--- title: "グリッド設定" slug: "the-grid-settings" abstract: "SXAグリッドの定義、その設定、クラスについて。" --- # グリッド設定 グリッドシステムは、ウェブサイトを簡単に構成できるHTML/CSSコンポーネントのライブラリです。グリッドシステムは、一貫したデザインを持ち、クロスブラウザ対応を保証するレスポンシブなウェブサイトを作成するのに役立ちます。SXAグリッドレイアウトの仕組みを理解することで、グリッド設定の使い方や変更方法、クラスの追加方法についての洞察が得られます。 ## グリッドシステム デフォルトでSXAは以下のグリッドシステムを搭載しています: - Tailwind - 対応型でモバイルファーストのグリッドシステムで、カスタマイズ可能な12列レイアウトで、あらかじめ定義されたユーティリティクラスが含まれています。デフォルトのデバイスは以下の通りです: - モバイル - タブレット肖像 - Desktop Small - Desktop Regular - Desktop Large - Desktop XL - Bootstrap 5 - jsDelivr、自動マージン、テンプレートスターターページを備えたレスポンシブでモバイルファーストのシステム。デフォルトのデバイスは以下の通りです: - モバイル - モバイルの風景 - タブレット肖像 - Desktop small - Desktop レギュラー - Desktop large - Bootstrap 4 - レスポンシブでモバイルファーストのグリッドシステムで、12列レイアウトであらかじめ定義されたクラスを含みます。デフォルトのデバイスは以下の通りです: - コンパクト電話 - 電話 - タブレット - ノートパソコン - デスクトップ - Bootstrap 3 – レスポンシブでモバイルファーストのグリッドシステムで、12列レイアウトであらかじめ定義されたクラスが含まれています。デフォルトのデバイスは以下の通りです: - 電話 - タブレット - デスクトップ - 大型デスクトップ - Foundation – レスポンシブでモバイルファーストのグリッドシステムで、12列の柔軟なグリッドを持ち、任意のサイズまで拡大可能です。デフォルトサイズは以下の通りです: - 小さい - メディア - 大きい - グリッド960 – 幅960ピクセルに基づく12列グリッド。デフォルト設定は以下の通りです: - サイズ - 接頭辞 - 接尾辞 すべてのグリッドシステムには異なるシステムルール、クラス、オプションがあります。詳細については、各グリッドシステム独自のドキュメントをご参照ください。 サイト作成時にグリッドシステムを選択できます。サイト作成時にグリッドを選択しない場合は、デフォルトでBootstrap 5グリッドシステムが適用されます。 ![You can select a grid during site creation, in the Create a new SXA site dialog.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/104/sitecore-experience-accelerator/images/ce-sxa-create-site-select-grid.png) サイト設定フォルダ(Sitecore/Content/Tenant/Site/Settings)の **グリッド** セクションの **グリッドマッピング** フィールドで、デバイスを特定のグリッドシステムにマッピングできます。新しいデバイスを追加するたびに、グリッドマッピングを手動で設定する必要があります。新しい**SXAサイトを作成する** ウィザードで選択したグリッドシステムと同じものを選択しなければなりません。例えば、モバイルデバイス向けにGrid 960システムを使えます。 > !注サイト作成後にグリッドシステムを変更するには多くの手動変更が必要であることを理解することが重要です。ページ上の参照が前のグリッドシステムであるため、グリッドシステムを変更するとレイアウトが壊れてしまいます。 ## グリッドの定義 グリッドシステムはSitecoreの機能として保存されており(sitecore/System/設定/Feature/)、以下が含まれます: - グリッド定義項目 – すべてのグリッドシステム固有の項目(デバイスおよびそのクラス)を含みます。 - グリッド設定項目 – 新しい **SXAサイトを作成する** ウィザードのドロップダウンリストにグリッドを含めるための足場項目です。 グリッド定義項目には、コンテンツ作成者がエクスペリエンスエディターで使用できるグリッドシステム固有のすべての項目が含まれています。 ![The grid definition item in the content tree of the Content Editor app.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/104/sitecore-experience-accelerator/images/ce-grid-definition-item-rectangle.png) グリッド定義項目には以下のフィールドが含まれています: **フィールド** **概要** 名称 サイト作成ウィザードで表示したいグリッドシステムの名前です。 レンダリングパラメータフィールドタイプ グリッドパラメータのレンダリング方法を決定します。デフォルトのフィールドレンダラーは以下の通りです: Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid デフォルトのコンポーネントレイアウト ページ上でドラッグするレンダリングのデフォルトカラムサイズを設定します。異なる種類のデバイスごとに値を設定できます。その値は列の数を指定します。 グリッドテーマ グリッドに使われているテーマへのリンク。 グリッドフィールドパーサータイプ グリッドフィールドを解析するためのパーサータイプを決定します。デフォルトのグリッドフィールドパーサータイプは以下の通りです: Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid グリッドボディビューパス ページの本文レイアウトを定義するCSHTMLファイルへのパス。 フレックス 固定サイズに設定されていない場合のプレースホルダーの挙動を決定するCSSクラスの一覧。例えば、 row expanded。 固定 プレースホルダーが固定されたときの挙動を決定するCSSクラスの集合。例えば、 row。 ロウクラス CSSクラスは、Row Splitterレンダリング用に生成される div 要素に追加されました。 列コンテナクラス CSSクラスはすべての行の親 div 要素に追加されました。 ラッピングタグ ここで指定したタグで placeholder タグをラップします。例えば div。クラスを指定するには、 **Wrapping class** フィールドに入力してください。例えば row。レンダリングにラッピングタグが必要ない場合は、両方のフィールドをクリアしてください。 \> \[!注\] \> 使っているグリッドシステムによっては、このフィールドはすでに設定されている場合があります。 ラッピングクラス **Wrappingタグ**フィールドで指定されたタグにクラスを割り当てます。 \> \[!注\] \> 使っているグリッドシステムによっては、このフィールドはすでに設定されている場合があります。 グリッドセットアップ項目には以下のフィールドが含まれます: **フィールド** **概要** 名称 サイト作成ウィザードで表示したいグリッドシステムの名前です。 依存関係 機能のインストール順を自分で決められます。 グリッドの定義 グリッド定義項目を指します。例えば、Foundationグリッドシステムの場合:設定/機能/Experience Accelerator/Foundation/Foundation グリッドシステムのグリッド定義項目でレンダリングのデフォルトレイアウト設定を変更することができます。例えば、Bootstrap 5グリッド(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap 5)の場合: ![Example of chanting the layout settings of a grid in the grid definition item.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/104/sitecore-experience-accelerator/images/ce-grid-definition-default-layout-settings.png) ## グリッドクラス グリッド定義項目で定義されたクラスは、メディアライブラリ内のグリッドシステムの詳細に対応しています。例えば、エクスペリエンスエディターでは、大きなデスクトップを使う訪問者のためにレンダリングを非表示するオプションがあります。 ![Example of enabling a setting that hides the chosen component if a visitor is on a large desktop.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/104/sitecore-experience-accelerator/images/ee-grid-settings-hide-for-device.png) このオプションはBootstrapグリッドシステムのディスプレイ設定(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap/Bootstrap 5/Desktop Large/Display/None)で設定されています: ![Example of how the option to hide a component for large desktops is set in the Display settings of the grid itself.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/104/sitecore-experience-accelerator/images/ce-grid-display-settings.png) このクラスは、メディアライブラリ(sitecore/Media Library/Feature/Experience Accelerator)に読み込まれたbootstrapmin.cssファイルから取られています: ![Example showing that the class pulled from the bootstrapmin.css in the Media Library.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/104/sitecore-experience-accelerator/images/ce-grid-large-desktop-hide.png)