このへんも後から環境設定で変更可能ですのでご安心を。2017の便利機能Adobeが無料で提供しているエディター、Brackets。そちらで使える便利機能が、Dreamweaverにも多数搭載されました。押すと、付随するCSSがニュッと表示されます。表示されるだけではなく、そこから編集し、CSSを更新することも可能。ファイルを行き来しなくても手軽に修正できます。リアルタイムプレビューBracketsにあったリアルタイムプレビュー機能が、Dreamweaverにも登場!「ライブビュー」とは違い、実際にブラウザー上で表示確認を行える機能です。変更点はファイルを保存しなくても即座に反映されるので、複数モニターや画面分割で作業がはかどります。画面右下のアイコンをクリック。QRコードも用意されていますよ。ページをプレビューする方法」をご覧ください。LESSファイルをコンパイルSassやLESSといったCSSプリプロセッサーに対応しました!簡単な設定をしておけば、保存するだけでコンパイルされるので制作のスピードもあがります!フレームワークのCompass、Bourbonにも対応。CSSプリプロセッサーを利用するには、きちんとサイトを定義しておく必要があります。メニューの「サイト」から新規サイトを作成し、サイト名とフォルダーを定義します。サイト名は直接Webサイトには表示されないので、任意のものでOK。プリプロセッサー」でファイルの保存時に自動コンパイルを有効にします。その他オプションはお好みで変更してください。ソースフォルダーと出力先フォルダーも設定。「ソースフォルダー」欄はSCSSやLESSファイルが保存されているフォルダーを指定します。あとはSCSS/LESSファイルを変更し、保存すると、自動的にCSSにコンパイルされます。上記画像は左側のSCSSファイルを保存すると、右側のCSSファイルが生成されている様子です。うはー!テンション上がる!ちなみに私が試した時、なぜか初回はうまくCSSファイルが出力されませんでしたが、Dreamweaverを再起動させるとちゃんと動作しました。;)CSSプリプロセッサーについては以下の記事でも詳しく紹介されているので、設定の際はこちらも参考にしてみてください。LESSを使ったBootstrapカスタマイズコーディングの時短機能ここからは従来のDreamweaverからあるものもありますが、時間短縮のための便利な機能が標準で備わっているのでご紹介。Emmetプラグインや余計な設定なしでEmmetが使えます。Emmetで使える構文はEmmet公式のチートシートを参考にしてください。キーを押しながら必要な行数分ドラッグして入力すると、その行数だけ同じテキストが反映されます。意外とよく使う機能です。スニペットパネルよく使うコードを保存しておけます。デフォルトで保存されているスニペットも多く、ガシガシ利用しちゃいましょう。左側のスニペットパネルを表示してダブルクリックするだけで保存しておいたコードが呼び出せます。キーを押すだけでコードが表示されます。スニペットパネルの詳しい使い方は「スニペットでコードを再利用する」を読んでみてください。2017はまだリリースされて間もないので、もう少しいじり倒してみようと思います。Dreamweaverに出戻りかも。してまたAdobeの囲い網の中へ...。シェアするTwitterFacebookはてブPocketニュースレターWeb制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。中の人ってこんな人Webデザイナー+WebデベロッパーのManaです。日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作の学校を卒業。カナダやオーストラリア、イギリスの企業でWebデザイナーとして働きました。詳しく知りたいという方は詳細ページへ。@chibimanaでつぶやいてます。Webクリエイターボックス。