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

対応可能：Liferay DXP 7.3以降

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

Using the Grid Fragment you can customize the layout options for different screen sizes.

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

You can customize your content layout combining the Grid Fragments with other Fragments.

コンピューターからこの ‘サービス’ コンテントページにアクセスすると、グリッドレイアウトに期待される結果が表示されます。しかし、スマートフォンからアクセスした場合、文字量や各カードフラグの幅の関係で、最適な結果とは言えません。グリッドフラグメントスタイルを使用すると、各モジュールに表示するカードの数をカスタマイズしたり、さまざまなスクリーンサイズで最高の表示エクスペリエンスが得られるようにスタイルを変更したりできます。

The default grid layout style is not optimized for a smartphone-sized screen.

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

コンテントページでグリッドフラグメントを構成します。
編集サイドバーで、 ブラウザ() ボタンをクリックし、カスタマイズしたいグリッド・フラグメントをクリックします。
編集ツールバーの［デバイスディスプレイ］セクションで、最適化するスクリーンサイズを選択します。
設定サイドバーの General タブで、画面サイズに適したレイアウトオプションを選択します。例えば、 Portrait Phone レイアウトオプションでは、1行に1つのモジュールがより良く機能します。
画像を選択して、ターゲット画面サイズに合わせて Resolution を設定するか（Liferay DXP 7.4+ で使用可能）、デフォルトの Auto オプションのままにして、 Adaptive Media を使用します。
［公開］をクリックします。
オプションとして、メインツールバーの シミュレーション() ボタンをクリックすると、ターゲットデバイス上で変更を確認できます。