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

2017.03.23

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

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

CSS Nite LP51「Reboot Dreamweaver」

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

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

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

初級編

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

やりかた

  1. HTMLを新規作成する。
  2. デザインビューを表示する
  3. サイトの要素をテキストですべて書き出し、整形する
    • テキスト原稿は、すべての要素がパラグラフ(p)で作成されることが大事なので、すべて改行させておくことが大事
  4. デザインビューにテキストを貼り付けて、ショートカット使いつつ、整形していく

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

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

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

  • 画面の下部
    • ウィンドウ > プロパティ を表示させるとよい
  • サイドバー(左側)
    • 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でやるのがオススメ

要注意

  • Sass版は使えない
  • カスタマイズは困難
  • Bootstrap4はまだ使えない
  • Bootstrapには、縦に間を作るクラスが用意されていないので、別途 emma.css などを活用するとよい

DreamWeaverに内包されているEmmetは完全版ではない

  • 拡張機能を別途ダウンロードして利用するのがオススメ
  • Adobeの拡張機能管理ツールはサポートされなくなったので、DNXzone Extension Managerから入れるのがいちばん安定している

Sassを使うための勘所

Dw上でコンパイルできるようになったものの、クイック編集やCSSデザイナーで修正しても、反映はCSSだけで、SCSS側は変更されないそうなので、使うにはまだ早いのかもしれません。

コンパイルの設定

  1. サイト > サイトの管理 > サイト設定を開く
  2. CSSプリプロセッサー > 一般:コンパイルが有効か確認、チェックが入っているか否か
  3. CSSプリプロセッサー > ソースと出力:別にするのか定義する、出力フォルダーと入力フォルダーを設定する

CSS-pri-processer

梱包されているSassライブラリ

Bourbon(v4系)が互換性がいいのでオススメ。
ただし、バージョンを指定することはできず、自動的に最新のものが適用されるので注意。どれを選んでも、ゆくゆくの段階で使えなくなる可能性あり。

安全にライブラリを使うには?

公式サイトからダウンロードして利用するのがオススメ
ただし、直接更新した場合、アップデートに対応できなくなるので、内容を修正したい場合は、cssで読み込んでから、上書くようにする

$btn-default-bg: $000;
@import 'bootstrap';

参加してみて思ったこと

開催中から触り始めるようになって、はや一週間程度。読み直してて「挿入」機能の存在を忘れていたことに気づきました・・・。これも活用すれば、もっと簡単にページが作れると思います。エディタの癖を適度に抜きながら、自分の中でいいバランスを見つけていくことが大事な気がします。

実際に作ったページがあるのですが、まだ公開前だったので、公開されたら別途Dwの使い勝手含めてお知らせしたいと思います。とりあえず、このブログはDwで編集しましたw

合わせて見たい

毎週木曜の20時からAdobeのCreative Cloud道場が開催されており、先週はちょうどDreamweaver特集でした。