Dreamweaver CC 2015年リリース、レスポンシブデザイン機能を大幅強化 – BootstrapやEmmet採用など

レスポンシブデザインの大幅機能強化とコード生産性の向上

Dreamweaver CC 2015年リリースが公開されました。このリリースでの最も大きな特徴は、レスポンシブデザイン対応です。Web制作者にとっては、もはや避けては通れないスマートフォン対応の手段として、アドビはDreamweaverでのレスポンシブデザイン作業を効率化するための機能をさらに追加しました。また、コード生産性を高めるためのエディター機能も強化されています。

以下、今回のリリースの主な内容です。

ビジュアルメディアクエリーバーの追加
ライブビューのリサイズバーの追加
CSSフレームワーク、Bootstrapのネイティブサポート
デバイスプレビュー機能の追加
Emmetのネイティブサポート
Lint機能の追加
コードビューのカラーテーマを追加

機能紹介チュートリアルビデオが公開されています。

以下、それぞれの機能紹介をご覧ください。

Dreamweaver CC 2015の新機能紹介

ビジュアルメディアクエリーバーの追加

ブレイクポイントを可視化する新しい機能です。どの画面幅にブレイクポイントがあるか一目で確認できます。3段に分けて、以下を表示します。

上段：max-width
中段：min-width と max-width
下段：min-width

https://blog.adobe.com/media_6506428ea25376d087a27ecc7dc820b2664a006b.gif

ブレイクポイントの追加も「+」ボタンを押すことで簡単にできます。

https://blog.adobe.com/media_a0ba60d5c46a2b271eda00d01df6ccc7f408802b.gif

ライブビューのリサイズバーの追加

ライブビューモードで画面幅を自由に変えて、レイアウトを調整するためのリサイズバーです。リサイズバーを使用中は画面幅が常に表示されます。ビジュアルメディアクエリーバーとセットで使うことで、レスポンシブデザインの制作効率が飛躍的に向上します。

https://blog.adobe.com/media_36668ac3edb30aad2c2c82fd4e5f399057604cec.gif

CSSフレームワーク、Bootstrapのネイティブサポート

オープンソースのCSSフレームワーク、BootstrapをDreamweaver CC 2015年リリースでは標準サポートしました。新規HTMLファイル作成時に、Bootstrapを自動セットアップ（CSS、font、JSなど）して開始することができます。

https://blog.adobe.com/media_e23a7b527772174991580ae42dc36a551f6248d8.gif

Bootstrapのスターターテンプレートをベースにして、Webページを作成していくこともできます。

https://blog.adobe.com/media_f6ad92edfd0a204154cd40cae9f9fb5b63f5305a.gif

また、挿入パネルからレスポンシブ対応のBootstrapコンポーネントをHTMLページに簡単に挿入することができます。Bootstrapのお作法を少し理解していれば、すぐに使いこなせると思います。

デバイスプレビュー機能の追加

編集中のHTMLファイルをPCやスマホなどの様々なブラウザーに簡単に表示させ、リアルタイムで編集結果を各ブラウザに反映させながら、調整作業ができるコーダーさんの必須機能です。

https://blog.adobe.com/media_11ba97bfb2bd3925f2a504373380504873fe6e1a.gif

Emmetのネイティブサポート

HTML、CSSコーディングを飛躍的に高速化してくれるEmmetもDreamweaver CC 2015年リリースから標準サポートになりました。

Emmetについて最初から学びたい方は、分かりやすく解説しているEmmet入門をどうぞ。

Lint機能の追加

コーディング中にHTMLや JavaScriptの構文チェックをしてくれます。クオリティの高いコードを記述することができるようになります。

コードビューのカラーテーマを追加

コーディングをする際の画面、コードビューに新たに10のテーマが追加され、15のテーマから選べるようになりました。お気に入りのテーマを見つけて、コーディング生産性を高めましょう。

https://blog.adobe.com/media_ba9f434a1fbded0de3a3f6701baf2ad891af3394.gif

まとめ

レスポンシブデザインのサイト制作をこれまで以上に手軽に進めるための新機能と、生産性と品質を高める新機能が新たに搭載されたDreamweaver CC 2015年リリース。

2014年10月に追加されたExtractサービスとの連携機能をスタートポイントにすれば、PSDデザインカンプからデザインをダイレクトに適用し、レスポンシブデザインに対応させ、スマホ上のブラウザでリアルタイムに結果を確認しながら制作作業ができるようになったDreamweaverを是非お試しください。