マニュアルキャンセル

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

検索

最終更新日 : 2022年2月18日

複数の画面用のレスポンシブな 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）クラスセレクターの非表示を解除するには、ソースコードで適用されているクラス（hide_<MediaType>）を削除します。
1 行上に移動	エレメントを 1 行上に移動します。
複製	現在選択されているエレメントを複製します。エレメントにリンクされた CSS も複製されます。
削除	ID セレクターの場合は、HTML と CSS を削除します。HTML のみを削除するには、Delete キーを押します。クラスセレクターの場合は、HTML のみが削除されます。
行揃え	クラスセレクターの場合は、整列オプションは、ゼロマージンボタンとして機能します。 ID セレクターの場合は、整列ボタンをクリックすると、エレメントがグリッドに整列します。

注意：

ページ上のエレメントは、上向き矢印キーと下向き矢印キーを使用して周期的に動かすことができます。エレメントの境界を選択して、矢印キーを押します。

エレメントのネスト

可変エレメントを他の可変エレメント内でネストするには、フォーカスを親エレメント内に置いてから、必要な子エレメントを挿入します。

ネスト構造の複製もサポートされています。ネスト構造の複製では、（選択したエレメントの）HTML を複製し、関連する可変 CSS を生成します。選択したエレメント内に含まれる絶対位置のエレメントが適切に配置されます。ネスト構造のエレメントは、複製ボタンを使用して複製することもできます。

親エレメントを削除すると、エレメントに対応する CSS、子エレメント、関連する HTML も削除されます。ネスト構造のエレメントは、削除ボタン（キーボードショートカット：Ctrl+Delete）を使用して削除することもできます。

その他の関連ヘルプ

メディアクエリの作成

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト

詳しく見る