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

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

詳細情報:アダプティブレイアウトレスポンシブレイアウト

Dreamweaver 12.2 Creative Cloud リリースには、HTML5 構造エレメントのサポート、ネスト構造のエレメントの編集の簡易化など、可変グリッドレイアウトに関する多くの拡張機能が含まれています。拡張機能の完全な一覧については、ここをクリックしてください。

注意:

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

可変グリッドレイアウトの使用

可変グリッドレイアウトの使用方法については、ビデオチュートリアル「可変グリッドレイアウトについて詳しく知る」をご覧ください。

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

  1. ファイル新しい可変グリッドレイアウトを選択します。

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

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

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

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

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

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

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

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

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

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

     

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

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

  1. 挿入パネルで、挿入するエレメントを選択します。

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

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

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

    オプションラベル説明
    ADiv の入れ替え現在選択されているエレメントを、上または下のエレメントと入れ替えます。
    B非表示エレメントを非表示にします。.

    エレメントの非表示を解除するには、次のいずれかの操作を行います:

    ID セレクターの非表示を解除するには、CSS ファイル内の表示プロパティをブロックするように変更します。(display:block

    クラスセレクターの非表示を解除するには、ソースコードで適用されているクラス(hide_<MediaType>)を削除します。
    C1 行上に移動エレメントを 1 行上に移動します。
    D複製現在選択されているエレメントを複製します。エレメントにリンクされた CSS も複製されます。
    E削除ID セレクターの場合は、HTML と CSS を削除します。HTML のみを削除するには、Delete キーを押します。
    クラスセレクターの場合は、HTML のみが削除されます。
    Fロックエレメントを絶対位置指定されたエレメントに変換します。
    G行揃えクラスセレクターの場合は、整列オプションは、ゼロマージンボタンとして機能します。
    ID セレクターの場合は、整列ボタンをクリックすると、エレメントがグリッドに整列します。

    注意:

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

エレメントのネスト

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

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

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー