ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

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

対応可能：Liferay DXP 7.3以降

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

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

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

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

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

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

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

コンテンツページでグリッドフラグメントを設定します。
編集サイドバーで、 ブラウザ () ボタンをクリックし、カスタマイズするグリッドフラグメントをクリックします。
編集ツールバーの［デバイスディスプレイ］セクションで、最適化するスクリーンサイズを選択します。
設定サイドバーの［一般］タブで、画面サイズに応じた優先レイアウトオプションを選択します。たとえば、［スマホ（縦）］レイアウトオプションでは、行ごとに1つのモジュールを設定した方がはるかに効果的です。
画像を選択して、対象の画面サイズに合わせて解像度を設定するか（Liferay DXP 7.4 以降で利用可能）、デフォルトの「自動」オプションのままにしてアダプティブメディアを使用してください。
［Publish（公開）］をクリックします。
必要に応じて、メインツールバーの シミュレーション () ボタンをクリックすると、対象デバイスでの変更内容を確認できます。