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

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

対応可能：Liferay DXP 7.3以降

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

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

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

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

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

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

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

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