サンプルで学ぶDreamweaver CS6！「レスポンシブWebデザイン」に挑戦してみよう

マルチデバイス対応のサイト制作者必見！Dreamweaver CS6概説

　バージョン5以降より、HTML5、CSS3、スマートフォンをはじめとする最近のサイト制作に必要な新しいスキルの支援機能に力を入れているDreamweaver。最新のDreamweaver CS6では、デバイスやブラウザウィンドウの横幅に応じてレイアウトが変更されるレスポンシブWebデザインを実現する「可変グリッドレイアウト」機能が目玉です。本稿では「可変グリッドレイアウト」「CSSトランジション」など、Dreamweaver CS6の新機能を使うワークフローを、サンプルを作成しながら紹介していきます。

Dreamweaverとは

　Adobe Dreamweaver（以下、Dreamweaver）は、Webページを作成・更新・管理するためのソフトウェアです。Dreamweaverにはいくつかの編集モードがあり、コードビュー（HTMLコードやCSS、JavaScriptファイルなどコードを直接編集できる画面）、デザインビュー（Webページをブラウザで表示した形に近い状態で編集できる画面）の両方で編集できます。

　さらに、Dreamweaver CS4で登場したライブビュー（レンダリングエンジンに利用しブラウザに非常に近い状態での表示確認ができる画面）では、SafariやGoogle Chromeと同じWebkitというレンダリングエンジンを採用しており、実際の画面を確認しつつ作業を進めることができます。

　デザイナーにとっては、HTMLやCSSのコードをオートコンプリート（自動補完）してくれる機能である「コードヒント」や、視覚的に確認しながら編集ができる機能、テンプレートやライブラリといった作業を効率化させる機能などがあり、プログラマーにとっても、サーバーサイドスクリプトの補完やデータベースとの接続などの便利な機能があります。

　この記事の内容は、最新のCS6の体験版にて実際にお試しいただけます。下記サイトよりダウンロードしてお使いください。

• Dreamweaver CS6 体験版ダウンロード
  

• データ提供元：データクラフト製品情報サイト「sozaijiten.com（ソザイジテン.ドット コム）」

素材辞典シリーズ 「サンプル画像」について

　本書籍サンプルファイル中のウォーターマーク入りサンプル画像（以下、「本画像」という）は、素材辞典シリーズの製品と仕様が異なります。本画像を営利・非営利を問わず、本記事を用いた学習用途以外の目的にご使用になる場合は、別途、製品版の素材辞典シリーズをご購入ください。

Dreamweaver CS6の新機能

　Dreamweaver CS6の主な新機能／改良点は次の通りです。

可変グリッドレイアウト

　「レスポンシブWebデザイン」を制作する上で強力な支援ツールとなる機能です（追ってサンプルで解説します）。

CSS3アニメーション

　CSS Transitionを使ったアニメーションを［CSSトランジション］パネルで設定で可能です（追ってサンプルで解説します）。

［jQuery Mobileスウォッチ］パネル

　選択した要素にjQuery Mobileテーマ（カラー）やアイコンを適用できます。

FTPクライアント機能の改良

　アップロード速度が大幅に向上しています。アップロード中にアイコンが表示されたり、マウスオーバーするとツールチップにステータスが表示されます。

複数のクラスを適用可能

　複数のクラスを適用できるようになりました。［プロパティ］パネルから、または、タグセレクター、［フォーマット］メニュー［CSSスタイル］→［複数のクラスを適用］。タグセレクタで要素を選択後、［CSSスタイル］パネルで適用したいクラスをクリック、command＋クリックで選択、右クリックメニューから適用をクリックします。