#cssnite に参加してDreamweaverのファンになったいくつかの理由。
3/11(土)に CSS NITE Dreamweaver(ドリームウィーバー)祭り に参加してきました(ง `ω´)ง
エディタでゴリゴリHTMLとかCSSとか書くのも好きですが、本業でない場合、少しでも効率化させたいと思うものです。Dreamweaverは実はイケるらしい!と、風の噂で気になってはいましたが、これに参加して少し納得しました。すっかり使ってみたい欲にかられて最近のコーディングは極力、使うようにしています。
実際、8年ぶりのDreamweaverは、印象違います!なんてったって、余計なことをしない(笑)
GUIを操作するだけで、ある程度のページは作れますが、やっぱり、基礎力(html,css)がないと、ちょっと難しいですかね。
それでは、気になったところを中心にダイジェストでお知らせします。(有料セミナーということもあり、公式な資料公開は、開催90日後からだそうなので)
初級編
デザインビューを使いこなして、楽々ページ作成!
やりかた
- HTMLを新規作成する。
- デザインビューを表示する
- サイトの要素をテキストですべて書き出し、整形する
- テキスト原稿は、すべての要素がパラグラフ(p)で作成されることが大事なので、すべて改行させておくことが大事
- デザインビューにテキストを貼り付けて、ショートカット使いつつ、整形していく
一部ですが、実際にやってみました
注意:ペーストの設定によって、余計なソースが付いてくる場合があるので、意図しないものが表示された場合は、設定を見直すこと
ワークスペースを最適化せよ
- 画面の下部
- ウィンドウ > プロパティ を表示させるとよい
- サイドバー(左側)
- CSSデザイナー
- DOMパネル
- アセットパネル : 画像データを一覧で表示してくれる(フォルダ横断なので紛失知らず!)
- キーボードショートカットの追加
- ul/li/ddをコマンド789に割り当てる
- ul/li/ddをコマンド789に割り当てる
- ウィンドウ > ツールバー:全て表示させるのがオススメ(ドキュメント、標準、一般)
- 標準を表示させたときの、アドレスバーは、どの環境のファイルを見ているのか一目でわかるので便利
- 標準を表示させたときの、アドレスバーは、どの環境のファイルを見ているのか一目でわかるので便利
デザインビューでおこなうオススメの作業
- テーブル要素の編集
- デザインビュー上でセルの連結はmキーだけでいける
- Excelからコピペするとtable構造で張り付く(Google Spreadsheetでもイケました!)
- デザインビュー上でセルの連結はmキーだけでいける
- フォーム要素の設置
- 追加されるコードは、コードビューとデザインビューで異なるので注意
- デザインビューだとフォームのパラメータが全て入るので、後から不要なものをコードビューで削除するのがオススメ
- 追加されるコードは、コードビューとデザインビューで異なるので注意
注意:コピペしたときの挙動が意図と違う時は、環境設定のコピー/ペーストを調整する
ビューの使い分け
- ライブビュー: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は読みやすく引渡しが効率的なので、時間の無駄が減る
- ライブビューとDOMパネルを使ってだけでレイアウト可能
- サイズは、tabletから始めると考えやすい
- 画像は、プロファイルの下のほうの「レスポンシブ対応する」をチェックするだけで可変になる
- cssのurlからライブラリの画像が呼び出せる。
- アセットが抽出されるので、ローカルに保存することもできる
- 作り込まずに、部分的に作って試してみるぐらいの感覚で作成するのが良い
- 大きいレイアウトは、XdやPsでおこない、レスポンシブ部分をDwでやるのがオススメ
要注意
- Sass版は使えない
- カスタマイズは困難
- Bootstrap4はまだ使えない
- Bootstrapには、縦に間を作るクラスが用意されていないので、別途 emma.css などを活用するとよい
DreamWeaverに内包されているEmmetは完全版ではない
- 拡張機能を別途ダウンロードして利用するのがオススメ
- Adobeの拡張機能管理ツールはサポートされなくなったので、DNXzone Extension Managerから入れるのがいちばん安定している
Sassを使うための勘所
Dw上でコンパイルできるようになったものの、クイック編集やCSSデザイナーで修正しても、反映はCSSだけで、SCSS側は変更されないそうなので、使うにはまだ早いのかもしれません。
コンパイルの設定
- サイト > サイトの管理 > サイト設定を開く
- CSSプリプロセッサー > 一般:コンパイルが有効か確認、チェックが入っているか否か
- CSSプリプロセッサー > ソースと出力:別にするのか定義する、出力フォルダーと入力フォルダーを設定する
梱包されているSassライブラリ
Bourbon(v4系)が互換性がいいのでオススメ。
ただし、バージョンを指定することはできず、自動的に最新のものが適用されるので注意。どれを選んでも、ゆくゆくの段階で使えなくなる可能性あり。
安全にライブラリを使うには?
公式サイトからダウンロードして利用するのがオススメ
ただし、直接更新した場合、アップデートに対応できなくなるので、内容を修正したい場合は、cssで読み込んでから、上書くようにする
$btn-default-bg: $000;
@import 'bootstrap';
参加してみて思ったこと
開催中から触り始めるようになって、はや一週間程度。読み直してて「挿入」機能の存在を忘れていたことに気づきました・・・。これも活用すれば、もっと簡単にページが作れると思います。エディタの癖を適度に抜きながら、自分の中でいいバランスを見つけていくことが大事な気がします。
実際に作ったページがあるのですが、まだ公開前だったので、公開されたら別途Dwの使い勝手含めてお知らせしたいと思います。とりあえず、このブログはDwで編集しましたw
合わせて見たい
毎週木曜の20時からAdobeのCreative Cloud道場が開催されており、先週はちょうどDreamweaver特集でした。