#cssnite に参加してDreamweaverのファンになったいくつかの理由。

たいさ

2017.03.23

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

3/11(土)に CSS NITE Dreamweaver（ドリームウィーバー）祭りに参加してきました(ง `ω´)ง

エディタでゴリゴリHTMLとかCSSとか書くのも好きですが、本業でない場合、少しでも効率化させたいと思うものです。Dreamweaverは実はイケるらしい！と、風の噂で気になってはいましたが、これに参加して少し納得しました。すっかり使ってみたい欲にかられて最近のコーディングは極力、使うようにしています。

実際、8年ぶりのDreamweaverは、印象違います！なんてったって、余計なことをしない（笑）
GUIを操作するだけで、ある程度のページは作れますが、やっぱり、基礎力(html,css)がないと、ちょっと難しいですかね。

それでは、気になったところを中心にダイジェストでお知らせします。（有料セミナーということもあり、公式な資料公開は、開催90日後からだそうなので）

初級編

デザインビューを使いこなして、楽々ページ作成！

やりかた

HTMLを新規作成する。
デザインビューを表示する
サイトの要素をテキストですべて書き出し、整形する

テキスト原稿は、すべての要素がパラグラフ（p）で作成されることが大事なので、すべて改行させておくことが大事

デザインビューにテキストを貼り付けて、ショートカット使いつつ、整形していく

一部ですが、実際にやってみました

注意：ペーストの設定によって、余計なソースが付いてくる場合があるので、意図しないものが表示された場合は、設定を見直すこと

ワークスペースを最適化せよ

画面の下部
- ウィンドウ > プロパティを表示させるとよい
サイドバー（左側）
- CSSデザイナー
- DOMパネル
- アセットパネル : 画像データを一覧で表示してくれる（フォルダ横断なので紛失知らず！）
キーボードショートカットの追加
- ul/li/ddをコマンド789に割り当てる
ウィンドウ > ツールバー：全て表示させるのがオススメ（ドキュメント、標準、一般）
- 標準を表示させたときの、アドレスバーは、どの環境のファイルを見ているのか一目でわかるので便利

デザインビューでおこなうオススメの作業

テーブル要素の編集
- デザインビュー上でセルの連結はmキーだけでいける
- Excelからコピペするとtable構造で張り付く（Google Spreadsheetでもイケました！）
フォーム要素の設置
- 追加されるコードは、コードビューとデザインビューで異なるので注意
- デザインビューだとフォームのパラメータが全て入るので、後から不要なものをコードビューで削除するのがオススメ

注意：コピペしたときの挙動が意図と違う時は、環境設定のコピー/ペーストを調整する

copy-paste-setting

ビューの使い分け

ライブビュー：CSSデザイン、じっくりデザインを考えたいときに適してる
デザインビュー：マークアップ
リアルタイムブラウザプレビュー：最終確認

そのほかの便利な機能

同じwifi環境であれば、画面と同じ内容をスマホでもリアルタイムプレビューできる（QRコードを読み取るだけ）
検索置換はもともと最強。
- ファイルまたぎで置換できる。
- 複数行の検索置換もできる。
- 非モーダル化でより便利になった。これで、操作が終わってないときでも別の作業ができる！
矩形選択やbox選択もできる
クイック編集( cmd + e )が便利
クイックタグ編集（ cmd + t ）も便利
オススメは、cubic-bezier()関数。数字だとわかりづらいけど、ベジェ曲線がGUI上で変えられるのでアニメーションへの取っ付きにくさが減った。
コードヒントは、html5, css, js, phpのみ
cssのコードヒントは使い方のリファレンスも出てくるのが便利。
border-radius などを指定するときは、左右上下に何が設定されるかが出るので便利。box-shadow とか、引数の順番によって値の設定が変わるものも、何が指定されたのかリアルタイムで表示される。

番外編

フロントエンドが作りやすくなるPhotoshopでのワイヤー作成のいろは

画像は、高さを数字で指定するためにも、クリッピングでマスクしよう
シェイプは他のシェイプと不用意に重ねないように作ろう
アートボードを活用しよう
レイヤーは整理しよう
レイヤーの名前はカラーコードにするとわかりやすいよ！
ライブラリは、カラースキームを作るつもりで活用しよう！
画像はライブラリから利用しよう！
- ライブラリから配置すれば、ライブラリの画像を変更するだけで、画面上の画像が一気に変わる。
- 共有もできるので、SNSアイコンなど、今後も使うものはアイコンセットして使いまわすと便利
- 他の人のライブラリの画像もドラッグ&ドロップで利用できる
- 持ち主がコンテンツを更新した場合も、手動で更新できる（勝手に更新されないのがありがたい！）

Creative Cloudでアセット管理しておけば、デザイナーが更新した時点で、自動的にサイトのほうも修正されるので便利。分業しやすい。

中級編

Bootstrapでページを作ろう！

ポイント

ワイヤーフレームを作成する段階での利用がオススメ
- ライブビューとDOMパネルを使ってだけでレイアウト可能
- BootstrapのみのHTMLは読みやすく引渡しが効率的なので、時間の無駄が減る
サイズは、tabletから始めると考えやすい
画像は、プロファイルの下のほうの「レスポンシブ対応する」をチェックするだけで可変になる
cssのurlからライブラリの画像が呼び出せる。
- アセットが抽出されるので、ローカルに保存することもできる
作り込まずに、部分的に作って試してみるぐらいの感覚で作成するのが良い
大きいレイアウトは、XdやPsでおこない、レスポンシブ部分をDwでやるのがオススメ