グリッドフラグメントを使用したレスポンシブレイアウトの構築
対応可能：Liferay DXP 7.3以降
Liferay DXPではデフォルトでレスポンシブデザインが使用されますが、コンテンツレイアウトをさらに細かく制御したい場合があります。 コンテントページでグリッドフラグメントを使用することにより、デスクトップデバイスとモバイルデバイスのさまざまなスクリーンサイズに対してコンテンツレイアウトを正確に制御できます。 Content Pageを編集すると、Grid Fragment (1) を使ってコンテンツのアウトラインを描き、Device Display セクション (3) で異なるターゲットデバイス用にカスタマイズしたレイアウトスタイル (2) を定義することができます。 たとえば、1行のモジュール数をカスタマイズしたり、グリッドパッディングオプションをスマートフォンサイズの画面専用にカスタマイズすることが可能です。
次の例を考えてみましょう。 保険会社のWebサイトのサービスセクションに、潜在的な顧客を対象としたサービスの概要を提供します。 ここでは、3つのモジュールのGrid Fragmentの中に、3つの異なるサービスの情報を持つ一連のCard Fragmentを使用します。
コンピューターからこの ‘サービス’ コンテントページにアクセスすると、グリッドレイアウトに期待される結果が表示されます。 しかし、スマートフォンからアクセスした場合、文字量や各カードフラグの幅の関係で、最適な結果とは言えません。 グリッドフラグメントスタイルを使用すると、各モジュールに表示するカードの数をカスタマイズしたり、さまざまなスクリーンサイズで最高の表示エクスペリエンスが得られるようにスタイルを変更したりできます。
グリッドフラグメントのレイアウトの変更
コンテントページでグリッドフラグメントを構成します。
編集サイドバーで、 ブラウザ(
) ボタンをクリックし、カスタマイズしたい Grid Fragment をクリックします。編集ツールバーの［Device Display］セクションで、最適化するスクリーンサイズを選択します。
設定サイドバーの「General」タブで、画面サイズに応じた優先レイアウトオプションを選択します。 たとえば、 ［スマホ（縦）］ レイアウトオプションでは、行ごとに1つのモジュールを設定した方がはるかに効果的です。
画像を選択して、その 解像度 をターゲット画面サイズに合わせて設定するか（Liferay DXP 7.4+ で利用可能）、デフォルトの 自動 オプションのままにして 適応型メディア を使用することができます。
［Publish］ をクリックします。
必要に応じて、メインツールバーの シミュレーション（
）ボタンをクリックして、ターゲットデバイスでの変更を確認します。
選択したグリッドフラグメント設定を保存して、他のコンテンツページで再利用できます。 詳細については、 フラグメント構成の保存 を参照してください。