Dreamweaver CS6 の新機能
Adobe Dreamweaver CS6 が発表されました。Dreamweaver は、デスクトップ、スマートフォン、タブレットに向けて、W3C 標準に準拠したサイトを視覚的な操作とコーディングの両方で制作できる、業界最先端の Web オーサリングツールです。Dreamweaver CS6 には、デスクトップからモバイルデバイスまで様々な画面に適応するコンテンツをデザインするための機能が加わりました。
この記事では、Dreamweaver CS6 の主な新機能や強化された機能の概要を紹介します。より詳しい情報および全ての新機能のリストは Dreamweaver 製品紹介のページをご覧下さい。
新機能１：可変グリッドレイアウト
Dreamweaver CS6 には、可変グリッドレイアウトと呼ばれる新しいレイアウト機能が付きました。可変グリッドレイアウトでは、画面の解像度に応じて、ページ内の要素の配置が自動的に変更されます。これを利用すると、スマートフォン、タブレット、デスクトップ、それぞれの画面にあわせてレイアウトが変化する画面デザインを容易に実現することができます。
Dreamweaver CS6 の可変グリッドレイアウトは、golden grid system と呼ばれる動的なレイアウトを、コーディング無しで実現するものです。ライブビューで実際の表示を確認しながらレイアウトを行えるため、効率的にレスポンシブデザインを実現できます。具体的には、Dreamweaver のデザインビューの背景に表示される列を使用して、領域（div タグ）の配置を指定します。背景の列の数は、画面の解像度に応じて 3 種類設定します。そのため、各領域が占める位置や大きさの指定は 3 回行います。表示に必要な CSS は、Dreamweaver が自動的に生成するため、面倒な手作業は不要です。
新機能２：CSS3 トランジション
Dreamweaver CS6 には、CSS3 によるトランジション効果を、コードを記述すること無く簡単に設定できる CSS トランジションパネルが用意されています。CSS トランジションパネルを使えば、新規トランジションの追加や、既存のトランジションの修正が直感的に行えます。必要な操作は、CSS トランジションパネル内で、トランジションを設定する CSS クラス名または ID と、トランジション発生の条件を選択して、変化させる CSS 属性とトランジション終了時の値を指定するだけです。必要なコードは Dreamweaver が生成します。
CSS トランジションパネルにより生成されるコードは純粋な CSS のため、特別なライブラリは不要で、JavaScript が無効にされているブラウザでも再生が可能です。CSS トランジションは、最新のほとんどのブラウザとモバイルデバイスでサポートされています。
新機能３：jQuery Mobile スウォッチ
以前は、Web サイトは主にデスクトップ PC の画面用に作成されていました。今では、モバイルデバイスの優先度が高くなり、場合によっては、デバイス専用サイトが制作されることもあります。Dreamweaver CS6 では、モバイルサイト作成用のフレームワークの jQuery Mobile との連携が強化されました。jQuery スウォッチパネルを使用して、スタイルを簡単に設定することができます。
スウォッチパネルからは、テーマを選択してアプリケーション全体を更新したり、個々の要素を選択して個別にスタイルを指定できます。Adobe Fireworks CS6 でデザインした独自のカスタムテーマをスウォッチパネルに追加して、Dreamweaver から利用することも可能です。
新機能４：Web フォントの利用
Dreamweaver CS6 では Web フォントが利用できるようになりました。「修正」メニューから「Web フォント」を選択すると、ダイアログボックスが表示さ、利用する Web フォントを指定できます。
Dreamweaver は、Web フォントが指定されると、サイト定義内に専用のフォルダを作成して指定されたフォントを読み込み、同時に Web フォント用のスタイルシートを作成します。一旦 Web フォントが設定されると、Dreamweaver 内では、通常のフォントと同様に Web フォントを扱えるようになります。
