レスポンシブレイアウト

AEM では、レイアウトコンテナ​コンポーネントを使用して、ページのレスポンシブレイアウトを作成できます。

レスポンシブグリッド内にコンポーネントを配置できる段落システムを提供します。このグリッドでは、デバイスやウィンドウのサイズおよび形式に従ってレイアウトを再編成できます。このコンポーネントを、レイアウト​モードと連動して使用すると、デバイスに依存するレスポンシブレイアウトを作成および編集できます。

レイアウトコンテナには、次の特徴があります。

  • 水平方向のスナップをグリッドに提供します。また、コンポーネントをグリッドに並べて配置して、折りたたみやリフローのタイミングを定義できます。
  • 事前定義済みのブレークポイント(電話、タブレット用など)を使用して、関連するデバイスまたは向きのコンテンツに必要な動作を定義できます。
    • 例えば、コンポーネントのサイズや、特定のデバイスでコンポーネントを表示するかどうかをカスタマイズできます。
  • ネストして、列を制御できます。

その後、エミュレーターを使用して、特定のデバイスのコンテンツのレンダリング方法を確認できます。

AEM は、次のメカニズムを組み合わせて使用することにより、ページのレスポンシブレイアウトを実現します。

  • レイアウトコンテナ​コンポーネント

    このコンポーネントは、コンポーネントブラウザーで使用でき、レスポンシブグリッド内にコンポーネントを追加および配置できるグリッド段落システムを提供します。ページ上のデフォルトの段落システムとしても設定できます。

  • レイアウトモード

    レイアウトコンテナをページに配置したら、レイアウト​モードを使用して、レスポンシブグリッド内にコンテンツを配置できます。

  • エミュレーター
    コンポーネントをインタラクティブにサイズ変更することによってデバイスやウィンドウのサイズに従ってレイアウトを再編成する、レスポンシブ Web サイトを作成および編集できます。その後、エミュレーターを使用して、コンテンツのレンダリング方法を確認できます。

これらのレスポンシブグリッドメカニズムを使用すると、次のことが可能になります。

  • ブレークポイントを使用して、(デバイスのタイプと向きを基準とした)デバイスの幅に基づいて異なるコンテンツのレイアウトを定義する。
  • これらの同じブレークポイントとコンテンツのレイアウトを使用して、デスクトップ上のブラウザーウィンドウのサイズに応じたコンテンツを作成する。
  • グリッドに対して水平方向のスナップを使用し、グリッドにコンポーネントを配置し、必要に応じてサイズ変更し、横方向や上限/下限方向への折たたみや折り返しのタイミングを定義する。
  • 特定のデバイスレイアウトのコンポーネントを非表示にする。
  • 列の制御を実現する。

プロジェクトに応じて、レイアウトコンテナはページのデフォルトの段落システム、またはコンポーネントブラウザーを使用してページに追加できるコンポーネント(またはその両方)として使用できます。

ヒント

アドビはフロントエンド開発者用にレスポンシブレイアウトの GitHub ドキュメントをリファレンスとして提供しており、フロントエンド開発者は AEM の外部で AEM グリッドを使用できます(例えば、今後の AEM サイトの静的 HTML モックアップを作成する場合)。

メモ

前述のメカニズムの使用は、テンプレートでの設定によって有効になります。詳しくは、「レスポンシブレイアウトの設定」を参照してください。

レイアウトの定義、デバイスのエミュレーションおよびブレークポイント

Web サイトのコンテンツを作成する場合は、使用するデバイスに適した方法でコンテンツが表示されるようにする必要があります。

AEM では、デバイスの幅に依存するレイアウトを定義できます。

  • エミュレーターを使用すると、これらのレイアウトを様々なデバイスに基づいてエミュレートできます。デバイスタイプに加えて、回転デバイス​オプションによって選択した方向も、幅の変更として選択されるブレークポイントに影響する場合があります。
  • ブレークポイントとは、レイアウトの定義を区切るポイントのことです。
    • ブレークポイントでは、専用のレイアウトを使用するあらゆるデバイスの最大幅を(ピクセル単位で)効果的に定義します。
    • ブレークポイントは通常、デバイスのディスプレイの幅に応じて、様々なデバイスに使用できます。
    • ブレークポイントの範囲は、次のブレークポイントまで、左側に広がります。
    • ブレークポイントを具体的に選択することはできず、デバイスと向きの選択によって、適切なブレークポイントが自動的に選択されます。

デスクトップ​デバイスには、特定の幅がなく、デフォルトのブレークポイントに関連します(つまり、すべてが最後に設定したブレークポイントを上回ります)。

メモ

個別のデバイスごとにブレークポイントを定義するという方法も考えられますが、そうするとレイアウトの定義とメンテナンスに必要となる作業が大幅に増加することになります。

エミュレーターを使用してエミュレーションおよびレイアウト定義用の特定のデバイスを選択すると、関連するブレークポイントもハイライト表示されます。レイアウト変更は、ブレークポイントが適用される他のデバイス(アクティブなブレークポイントマーカーの左側で、次のブレークポイントマーカーの前に位置するすべてのデバイス)にも適用できます。

例えば、エミュレーションとレイアウトのためにデバイス iPhone 6 Plus(幅の定義は 540 ピクセル)を選択した場合、ブレークポイント​電話(768 ピクセルで定義)もアクティブ化されます。iPhone 6 へのレイアウト変更は、電話​ブレークポイントの下の他のデバイス(iPhone 5(320 ピクセルで定義)など)に適用できます。

エミュレーター

エミュレートするデバイスの選択

  1. 必要なページを編集用に開きます。次に例を示します。

    http://<host>:<port>/editor.html/content/wknd/en/sports/la-skateparks.html

  2. 上部のツールバーから​エミュレーター​アイコンを選択します。

    エミュレーターボタン

  3. エミュレーターツールバーが開きます。

    エミュレーターツールバー

    エミュレーターツールバーに追加のレイアウトオプションが表示されます。

    • デバイスを回転 - 垂直方向(縦置き)から水平方向(横置き)に、またはその逆に、デバイスを回転できます。

    デバイスの回転(横置き)ボタン
    デバイスの回転(縦置き)ボタン

    • デバイスを選択 - エミュレートする特定のデバイスをリストから定義します(詳しくは次のステップを参照)。

    デバイス選択ボタン

  4. エミュレートするデバイスを選択するには、次のどちらかの方法を使用できます。

    • デバイスを選択アイコンを使用して、ドロップダウンセレクターから選択する。
    • エミュレーターツールバーのデバイスのインジケーターをタップまたはクリックする。

    デバイス選択ドロップダウン

  5. 特定のデバイスを選択すると、次のことができます。

    • 選択したデバイス(iPad など)のアクティブマーカーを確認する。
    • 該当するブレークポイントタブレット​など)のアクティブマーカーを確認する。
    • 青い点線は、選択したデバイス(ここでは横置きの iPhone 6 Plus)の​フォールド​を表します。

    フォールド

    • フォールドは、コンテンツのページの改行と見なすこともできます(ブレークポイントと混同しないでください)。これは、デバイスでスクロールする前にユーザーに表示されるコンテンツの部分を確認するために表示されます。
    • エミュレートしているデバイスの高さが画面サイズより高い場合、フォールドの線は表示されません。
    • フォールドは、作成者の利便性のために表示されます。公開されたページには表示されません。

レイアウトコンテナとそのコンテンツの追加(編集モード)

レイアウトコンテナ​は、次の特徴を持つ段落システムです。

  • 他のコンポーネントを含む。
  • レイアウトを定義する。
  • 変更に応答する。
メモ

まだ使用可能になっていない場合は、レイアウトコンテナ​を、段落システムまたはページ用に明示的にアクティベートする必要があります。

  1. レイアウトコンテナ​は、コンポーネントブラウザーで標準コンポーネントとして使用できます。ここから、ページ上の必要な場所へドラッグできます。そうすると、「コンポーネントをここにドラッグ」プレースホルダーが表示されます。

  2. その後、コンポーネントをレイアウトコンテナに追加できます。これらのコンポーネントには実際のコンテンツが含まれます。

    レイアウトコンテナ

レイアウトコンテナでの選択およびアクションの実行(編集モード)

他のコンポーネントと同様に、レイアウトコンテナは、選択してからアクション(切り取り、コピー、削除)を実行できます(編集​モードのとき)。

注意

レイアウトコンテナは段落システムなので、このコンポーネントを削除すると、レイアウトグリッドに加えて、そのコンテナ内にあるすべてのコンポーネント(およびそのコンテンツ)も削除されます。

  1. グリッドのプレースホルダーの上にマウスを移動するか、タップすると、アクションメニューが表示されます。

    レイアウトコンテナへの追加

    ​オプションを選択する必要があります。

    親ボタン

  2. レイアウトコンポーネントがネストされている場合は、​オプションを選択するとドロップダウンに選択肢が表示され、ネストしたレイアウトコンテナまたはその親を選択できます。

    ドロップダウンのコンテナ名の上にマウスを移動すると、アウトラインがページに表示されます。

    • ネストの一番下のレベルのレイアウトコンテナは、青色で描画されます。
    • それ以上のコンテナは明るい青色です。

    ネストされたコンテナ

  3. グリッド全体が、コンテンツも含めて強調表示されます。アクションツールバーが表示され、ここから、「削除」などのアクションを選択できます。

レイアウトの定義(レイアウトモード)

メモ

ブレークポイントごとに別々のレイアウトを定義できます(エミュレートされたデバイスのタイプと向きによって決定)。

レイアウトコンテナと共に実装されているレスポンシブグリッドのレイアウトを設定するには、レイアウト​モードを使用する必要があります。

レイアウト​モードは 2 つの方法で開始できます。

  • ツールバーのモードメニューを使用して​レイアウト​モードを選択する。
    • 編集​モードまたは​ターゲット設定​モードに切り替える場合と同様に、レイアウト​モードを選択します。
    • レイアウト​モードは持続され、モードセレクターで別のモードを選択するまで、レイアウト​モードのままです。
  • 個別のコンポーネントを編集する
    • コンポーネントのクイックアクションメニューの「レイアウト」オプションを使用すると、レイアウト​モードに切り替えることができます。
    • レイアウト​モードはコンポーネントを編集している間持続し、フォーカスが別のコンポーネントに移ると​編集​モードに戻ります。

レイアウトモードでは、グリッドに対して様々なアクションを実行できます。

  • 青いドットを使用して、コンテンツのコンポーネントのサイズを変更します。サイズ変更は常にグリッドにスナップされます。背景のサイズを変更する際には、次のように位置揃えを補助するためのグリッドが表示されます。

    コンポーネントのサイズ変更

    メモ

    コンポーネント(画像​など)のサイズが変更されても、割合と比率は維持されます。

  • コンテンツコンポーネントをクリックまたはタップします。ツールバーで次の操作を実行できます。

    • - 全体的にアクションを実行するために、レイアウトコンテナコンポーネント全体を選択できます。
    • 新規行にフロート - コンポーネントが、グリッド内の空きスペースに応じて、新しい行に移動します。
    • コンポーネントを非表示 - コンポーネントが非表示になります(レイアウトコンテナのツールバーから復元できます)。

    コンポーネントを非表示

  • レイアウト​モードでは、「コンポーネントをここにドラッグ」をタップまたはクリックすると、コンポーネント全体を選択できます。そうすると、このモードのツールバーが表示されます。

    ツールバーには、レイアウトコンポーネントの状態やそれに属するコンポーネントに応じて異なるオプションが表示されます。次に例を示します。

    • - 親コンポーネントを-選択します。

      親ボタン

    • 非表示のコンポーネントを表示 - すべてまたは個別のコンポーネントを表示します。数字は現在非表示のコンポーネントの数を示します。カウンターは非表示のコンポーネントの数を示します。

      「非表示のコンポーネントを表示」ボタン

    • ブレークポイントレイアウトを元に戻す - デフォルトのレイアウトに戻します。カスタマイズされたレイアウトが適用されなくなります。

      「ブレークポイントレイアウトを元に戻す」ボタン

    • 新規行にフロート - コンポーネントの位置を上に移動します(間隔がある場合)。

      「新規行にフロート」ボタン

    • コンポーネントを非表示 - 現在のコンポーネントを非表示にします。

      「コンポーネントを非表示」ボタン

    メモ

    上記の例では、フロートと非表示のアクションが使用可能になっています。これは、このレイアウトコンテナが親レイアウトコンテナ内にネストされているからです。

    • Unhide
      components親コンポーネントを選択し、
      「非表示の コンポーネントを表示」オプションこの例では、2 つのコンポーネントが非表示にされています。

      コンポーネントの再表示
      非表示のコンポーネントを表示」オプションを選択すると、現在非表示のコンポーネントが元の場所で青色で表示されます。

    「すべてを復元」ボタン

    すべてを復元」を選択すると、非表示のすべてのコンポーネントが表示されます。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now