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