「Adobe Dreamweaver CS6」で注目すべき4つの新機能

アドビシステムズのWebツールの最新版である「Adobe Dreamweaver CS6」、読者の皆さんはもう試してみただろうか？本記事ではまだ同ソフトを使ったことのない方のために、Adobe Dreamweaver CS6で追加された新機能を紹介する。

注目機能その1:可変グリットレイアウト

■可変グリットレイアウトとは何か？

Dreamweaver CS6には、「可変グリットレイアウト」という機能が新たに追加された。この機能を使えば、ひとつのソースでスマートフォンやタブレットのようなモバイル端末からデスクトップPCまで、様々なスクリーンサイズに対応する「レスポンシブWebデザイン」が可能となる。さらには、要素をグリット上に配置することによって、レイアウトを美しく見せることもできるのだ。

この新機能は最近流行しているWebデザインテクニックを可能とするもので、前者は、後者は「グリッドレイアウト」と呼ばれる。

■可変グリットレイアウトの使い方

Dreamweaver CS6のメニューの「ファイル」には、「新しい可変グリットレイアウト」という項目が追加されている。

メニューをクリックすると、以下のようなダイアログが表示される。「モバイル」、「タブレット」、「デスクトップ」という単語が並んでいることから、この機能を使うことで、様々なスクリーンサイズに対応するWebページの制作が可能であることがわかるだろう。


追加された「新しい可変グリットレイアウト」メニュー	可変グリットレイアウト設定ダイアログ

また、このダイアログ上では「列数」、「列の幅」、「領域全体の幅」といった項目を指定することができる。これらのパラメータを理解するには、可変グリットレイアウトに関する知識が必要となってくる。今回は、初期設定のまま「作成ボタン」をクリック。すると新しいCSSファイルを保存するダイアログが表示されるので、任意の場所にCSSファイルを保存すると、Dreamweaverのデザインビューが次のように切り替わる。

CSSファイル保存後のデザインビュー

このビューで特徴的なのが、5本の帯が縦に入っている点である。グリットレイアウトとは表示領域を「列」と「行」に区切りその中に要素を配置していくレイアウト手法である。この5本の帯がグリットの列を表しており、可変グリットレイアウトでは、ここに行を配置していくことでレイアウト作業を進めていく。

行による配置は、「挿入」パネル内にある「可変グリットレイアウトのDivタグを挿入する」を選択することで使用できる。このメニューを選ぶと、新規に挿入するDiv要素のid属性を指定するように求められるのでそれを追加し、「OK」ボタンをクリックすると行が追加される。


CSSファイル保存後のデザインビュー	追加された行(Div要素)

追加された行は単なるDiv要素なので、見出しやリストなど、どんなコンテンツでも配置することができる。適当にコンテンツを記述し、いくつか行を追加した結果、以下のような結果になった。

全部で４つの行を追加

ここまで例として見てきたのは、スマートフォン向けのレイアウト(480pixel×800pixel)。これをタブレット用にレイアウトを変更するには、次のような手順がある。

CS6より追加された、ステージの下のアイコン。これをクリックすることで、スクリーンサイズを変更できるようになった。真ん中のタブレットのアイコンをクリックすると以下のように表示される。領域が広がっただけでなく、列の数が8つに増えた。


画像中央部にある3つの四角がアイコン。左から、モバイル(480pixel×800pixel)、タブレット(768pixel×1,024pixel)、デスクトップ(横幅1,000pixel)	タブレットサイズに変更後のグリット

広い表示領域を使用する場合、今まで縦積みで表示していたコンテンツを横に表示することも可能になる。ここでは縦に並んでいる「コンテンツ1」と「コンテンツ2」を、横並びに表示することもできる。コンテンツのサイズをは、コンテナをドラッグすることで調整できる。

次に、「コンテンツ2」にカーソルを合わせると右上に表示される「一つ上の行に移動」ボタンをクリックする。すると、「コンテンツ2」が一つ上の行に移動する。このように行や列を利用してレイアウトを行えるのが、可変グリットレイアウトの特徴である。