可変グリッドレイアウトによるレスポンシブデザイン

最終更新日 : 2021年12月20日

複数の画面用のレスポンシブな web サイトを作成したいとお考えですか? Dreamweaver で可変グリッドを使用して、モバイルデバイスやデスクトップ向けの web サイトをデザインする方法について説明します。

Web サイトのレイアウトは、表示するデバイスのサイズに対応している必要があります（レスポンシブデザイン）。可変グリッドレイアウトを使用すると、視覚的な方法で、web サイトを表示するデバイスに応じたレイアウトを作成できます。

例えば、web サイトをデスクトップ、タブレット、携帯電話で表示する場合、可変グリッドレイアウトを使用して、これらの各デバイスに適したレイアウトを指定することができます。 Web サイトがデスクトップ、タブレット、携帯電話のどのデバイスで表示されるかに応じて、それに対応したレイアウトが、web サイトの表示に使用されます。

詳細情報：アダプティブレイアウトとレスポンシブレイアウト（英語）

可変グリッドレイアウトのドキュメントではインスペクトモードは使用できません。

可変グリッドレイアウトの作成

Dreamweaver 2017 では、既存の可変グリッドレイアウトを編集できます。ただし、可変グリッドレイアウトを作成することはできません。

代わりに、Dreamweaver 2017 では Bootstrap を使用してレスポンシブレイアウトを作成します。 Bootstrap について詳しくは、Bootstrap ファイルの操作を参照してください。

ファイル／／可変グリッド（従来）を選択します。

グリッドの列数のデフォルト値が、メディアタイプの中央に表示されます。デバイスの列数は必要に応じて変更できます。

画面サイズに合わせたページ幅を設定するには、値を％で指定します。

ふち取りの幅は別途変更できます。ふち取りとは 2 つの列の間のスペースです。

ページの CSS オプションを指定します。

「作成」をクリックすると、CSS ファイルを指定するよう求められます。次のいずれかの操作を行います。

新規 CSS ファイルを作成します。
既存の CSS プロジェクトを開きます。
可変グリッド CSS ファイルとして開く CSS ファイルを指定します。

デフォルトでは、携帯電話用の可変グリッドが表示されます。また、可変グリッドの挿入パネルも表示されます。挿入パネルのオプションを使用してレイアウトを作成します。

他のデバイスのレイアウト作成に切り替える場合は、デザインビューの下にあるオプションの目的のアイコンをクリックします。

ファイルを保存します。 HTML ファイルを保存するとき、依存ファイル（boilerplate.css、respond.min.js など）をコンピューター内の場所に保存するかどうかを確認するメッセージが表示されます。場所を指定して、「コピー」をクリックします。

boilerplate.css は、HTML5 ボイラープレートに基づいています。これは、複数のデバイス間で web ページを一貫した方法でレンダリングするための CSS スタイルセットです。 respond.min.js は、以前のバージョンのブラウザーでメディアクエリをサポートする JavaScript ライブラリです。

可変グリッドドキュメントの編集

ライブビューで可変グリッドドキュメントを直接編集して、以下の操作を実行できます。

HTML クラスと ID のエレメントへの関連付け。詳しくは、エレメントディスプレイを参照してください。
画像の属性とテキストの編集。詳しくは、クイックプロパティインスペクターおよびライブビューでのテキストの編集を参照してください。
新しいエレメントの挿入。詳しくは、可変グリッドエレメントの挿入を参照してください。

また、エレメントクイックビューを使用して、可変グリッドドキュメントの HTML DOM 構造を表示できます。

可変グリッドエレメントの挿入

挿入パネル（ウィンドウ／挿入）には、可変グリッドレイアウトで使用できるエレメントが一覧表示されます。エレメントの挿入中に、可変エレメントとして挿入することを選択できます。

挿入パネルで、挿入するエレメントをクリックします。

表示されるダイアログボックスで「前」、「後」、「ネスト」をクリックして、ドキュメントでハイライト表示されたリファレンスエレメントを基準にエレメントを配置します。

クラスを選択するか、ID の値を入力します。クラスメニューに、ページ作成時に指定した、CSS ファイルのクラスが表示されます。

「可変エレメントとして挿入」チェックボックスを選択します。

挿入したエレメントを選択すると、Div を非表示、複製、または削除するためのオプションが表示されます。積み重ねられた Div の場合は、Div を入れ替えるためのオプションが表示されます。

オプション	説明
Div の入れ替え	現在選択されている要素を、上または下の要素と入れ替えます。
非表示	要素を非表示にします。要素を再表示するには、次のいずれかを実行します： IDセレクターを再表示するには、CSSファイルでdisplayプロパティをblockに変更します。（display:block）クラスセレクターの非表示を解除するには、ソースコードで適用されているクラス（hide_<MediaType>）を削除します。
1 行上に移動	要素を1行上に移動します。
複製	現在選択されているエレメントを複製します。要素にリンクされたCSSも複製されます。
削除	ID セレクターの場合は、HTML と CSS を削除します。 HTMLのみを削除するには、Deleteキーを押します。クラスセレクターの場合、HTMLのみが削除されます。
行揃え	クラスセレクターの場合、整列オプションはゼロマージンボタンとして機能します。 ID セレクターの場合は、整列ボタンをクリックすると、エレメントがグリッドに整列します。