Documentation

グリッドフラグメントを使用したレスポンシブレイアウトの構築

対応可能:Liferay DXP 7.3以降

Liferay DXPではデフォルトでレスポンシブデザインが使用されますが、コンテンツレイアウトをさらに細かく制御したい場合があります。 コンテントページでグリッドフラグメントを使用することにより、デスクトップデバイスとモバイルデバイスのさまざまなスクリーンサイズに対してコンテンツレイアウトを正確に制御できます。 コンテントページを編集する場合、[デバイス表示]セクション(C)でグリッドフラグメント(A)を使用してコンテンツの外枠を描き、さまざまなターゲットデバイス用にカスタマイズされたレイアウトスタイル(B)を定義できます。 たとえば、1行のモジュール数をカスタマイズしたり、グリッドパッディングオプションをスマートフォンサイズの画面専用にカスタマイズすることが可能です。

グリッドフラグメントを使用すると、さまざまなスクリーンサイズのレイアウトオプションをカスタマイズできます。

次の例を考えてみましょう。 保険会社のWebサイトのサービスセクションに、潜在的な顧客を対象としたサービスの概要を提供します。 このセクションでは、3つのモジュールのグリッドフラグメント(B)内に一連のカードフラグメント(A)を使用して、3つの異なるサービスに関する情報を含めます。

グリッドフラグメントを他のフラグメントと組み合わせて、コンテンツレイアウトをカスタマイズできます。

コンピューターからこの「サービス」コンテンツページにアクセスすると、グリッドレイアウトに期待される結果が表示されます。 ただし、スマートフォンからページにアクセスすると、各カードフラグメントのテキストの量(C)とグリッドのパッディングサイズ(D)の関係で、適切な結果とはなりません。 グリッドフラグメントスタイルを使用すると、各モジュールに表示するカードの数をカスタマイズしたり、さまざまなスクリーンサイズで最高の表示エクスペリエンスが得られるようにスタイルを変更したりできます。

デフォルトのグリッドレイアウトスタイルは、スマートフォンのスクリーンサイズに最適化されていません。

グリッドフラグメントのレイアウトの変更

  1. コンテントページを開いて編集します(または新しいコンテントページを作成します)。

  2. コンテントページでグリッドフラグメントを構成します。

  3. 編集サイドバーで、 [Selection] をクリックし、カスタマイズするグリッドフラグメントをクリックします。

  4. 編集ツールバーの[Device Display]セクションで、最適化するスクリーンサイズを選択します。

    [Device Display]セクションで、カスタマイズするスクリーンサイズを選択します。

  5. 編集サイドバーの [Styles] 列で、スクリーンサイズに適したレイアウトオプションを選択します。 たとえば、 [スマホ(縦)] レイアウトオプションでは、行ごとに1つのモジュールを設定した方がはるかに効果的です。

  6. ターゲットのスクリーンサイズの画像 解像度 を構成する(Liferay DXP 7.4以降で使用可能)か、デフォルトの [Auto] オプションのままにしてアダプティブメディアを使用します。

    ターゲットスクリーンサイズの画像解像度を選択するか、[Auto]オプションのままにしてアダプティブメディアを使用します。

  7. 公開] をクリックします。

  8. 必要に応じて、メインツールバーの [シミュレーション](Simulation)ボタンをクリックして、ターゲットデバイスでの変更を確認します。

    コンテンツページエディタの[Device Display]および[Styles]オプションを使用して、グリッドフラグメントのレイアウトをカスタマイズします。

Tip

選択したグリッドフラグメント構成を保存して、他のコンテンツページで再利用できます。 詳細については、 フラグメント構成の保存 を参照してください。

追加情報