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

BY 公開

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

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

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

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

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

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

Dreamweaver CC 2015の新機能紹介

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

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

  • 上段:max-width
  • 中段:min-width と max-width
  • 下段:min-width

dwcc2015_visual_media_queries_bar

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

dwcc2015_adding_breakpoint

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

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

dwcc2015_resizebar

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

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

dwcc2015_new_file_with_bootstrap

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

dwcc2015_bootstrap_templates

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

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

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

dwcc2015_device_preview

Emmetのネイティブサポート

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

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

Lint機能の追加

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

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

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

dw-code-coloring

まとめ

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

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

  TAGS

  AUTHOR

Keisuke Todoroki

アドビ システムズ 株式会社 / デベロッパーマーケティングスペシャリスト。 1999年、早稲田大学理工学部を卒業後、大手印刷会社に勤務。主にEC分野で J2EE開発に携わるが、Flexとの衝撃的な出会いを機にRIAの世界へ。 2008年4月、アドビシステムズ入社。 アドビのWebツール全般のマーケティングを担当。