--- title: "グリッド設定" slug: "the-grid-settings" abstract: "SXAグリッドの定義、その設定、クラスについて。" --- # グリッド設定 グリッドシステムは、ウェブサイトを簡単に構成できるHTML/CSSコンポーネントのライブラリです。グリッドシステムは、一貫したデザインを持ち、クロスブラウザ対応を保証するレスポンシブなウェブサイトを作成するのに役立ちます。SXAグリッドレイアウトの仕組みを理解することで、グリッド設定の使い方や変更方法、クラスの追加方法についての洞察が得られます。 ## グリッドシステム デフォルトでSXAは以下のグリッドシステムを搭載しています: - Bootstrap 3 – レスポンシブでモバイルファーストのグリッドシステムで、12列レイアウトであらかじめ定義されたクラスを含みます。デフォルトのデバイスは以下の通りです: - 電話 - タブレット - デスクトップ - 大型デスクトップ - Foundation – 12列の柔軟なグリッドを持ち、任意のサイズまで拡大可能なレスポンシブでモバイルファーストのグリッドシステム。デフォルトのサイズは以下の通りです: - 小さい - メディア - 大きい - グリッド960 – 幅960ピクセルに基づく12列グリッド。デフォルト設定は以下の通りです: - サイズ - 接頭辞 - 接尾辞 > !注すべてのグリッドシステムは異なるシステムルール、クラス、オプションを持っています。詳細については、各グリッドシステム独自のドキュメントを参照してください。 サイトを作成する際にグリッドシステムを選択できます。 ![9ED7924974DC419E98BD925B39794F6E.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/9ED7924974DC419E98BD925B39794F6E.png) > !注サイト作成時にグリッドを選択しない場合、デフォルトでBootstrapグリッドが適用されます。 サイト設定フォルダ(Sitecore/Content/Tenant/Site/Settings)の **グリッド** セクションの **グリッドマッピング** フィールドで、デバイスを特定のグリッドシステムにマッピングできます。 > !注新しいデバイスを追加するたびに、グリッドマッピングを手動で設定する必要があります。サイト作成ウィザードで選択したのと同じグリッドシステムを選択しなければなりません。 例えば、モバイルデバイス向けにGrid 960システムを利用できます: ![42C28EF9A5F94FC382EE0EF43529D38C.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/42C28EF9A5F94FC382EE0EF43529D38C.png) > !注サイト作成後にグリッドシステムを変更するには多くの手動変更が必要であることを理解しておくことが重要です。ページ上のグリッドシステムへの参照があるため、グリッドシステムを変更するとレイアウトが壊れてしまいます。 ## グリッドの定義 グリッドシステムはSitecoreの機能として保存されており(sitecore/System/設定/Feature/)、以下が含まれます: - グリッド定義項目 – すべてのグリッドシステム固有の項目(デバイスおよびそのクラス)を含みます。 - グリッド設定項目 – 新しい **エクスペリエンスアクセラレーター作成の** ドロップダウンリストにグリッドを含めるための足場項目です。 グリッド定義項目には、コンテンツエディターがエクスペリエンスエディターで使用できるグリッドシステム固有のすべての項目が含まれます。 ![SXA-grid-960.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-grid-960.PNG) グリッド定義項目には以下のフィールドが含まれています: フィールド 概要 名称 サイト作成ウィザードで表示したいグリッドシステムの名前です。 レンダリングパラメータフィールドタイプ グリッドパラメータのレンダリング方法を決定します。デフォルトのフィールドレンダラーは以下の通りです:Sitecore。XA。Foundation.Grid.Fields.FieldRenderer.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid デフォルトのコンポーネントレイアウト ページ上でドラッグするレンダリングのデフォルトカラムサイズを設定します。異なる種類のデバイスごとに値を設定できます。その値は列の数を指定します。 グリッドテーマ グリッドに使われているテーマへのリンク。 グリッドフィールドパーサータイプ グリッドフィールドを解析するためのパーサータイプを決定します。デフォルトのグリッドフィールドパーサータイプは以下の通りです:Sitecore。XA。Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid グリッドボディビューパス ページの本文レイアウトを定義するCSHTMLファイルへのパス。 フレックス 固定サイズに設定されていない場合のプレースホルダーの挙動を決定するCSSクラスの一覧。例えば、行展開。 固定 プレースホルダーが固定された際の挙動を決定するCSSクラスの集合。例えば、行。 ロウクラス CSSクラスはRow Splitterレンダリング用に生成されるdiv要素に追加されました。 列コンテナクラス CSSクラスはすべての行の親div要素に追加されました。 ラッピングタグ ここで指定したタグ(例えばdiv)のプレースホルダータグをラップします。クラスを指定するには、Wrapping classフィールド(例:row)に入力してください。レンダリングにラップタグが必要ない場合は、両方のフィールドをクリアしてください。注:使用しているグリッドシステムによっては、このフィールドがすでに設定されている場合があります。 ラッピングクラス Wrappingタグフィールドで指定されたタグにクラスを割り当てます。注:使用するグリッドシステムによっては、このフィールドがすでに設定されている場合があります。 グリッドセットアップ項目には以下のフィールドが含まれます: **フィールド** **概要** 名称 サイト作成ウィザードで表示したいグリッドシステムの名前です。 依存関係 機能のインストール順を自分で決められます。 グリッドの定義 グリッド定義項目を指します。例えば、Foundationグリッドシステムの場合:設定/機能/Experience Accelerator/Foundation/Foundation グリッドシステムのグリッド定義項目でレンダリングのデフォルトレイアウト設定を変更することができます。例えば、Foundationグリッド(sitecore/System/Settings/Feature/Experience Accelerator/Foundation)の場合: ![SXA-default-component-layout-foundation.PNG](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-default-component-layout-foundation.PNG) ## グリッドクラス グリッド定義項目で定義されたクラスは、メディアライブラリ内のグリッドシステムの詳細に対応しています。例えば、エクスペリエンスエディターでは、大きなデスクトップを使う訪問者のためにレンダリングを非表示するオプションがあります。 ![8F9FCD535695467BAA228219635649EA.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/8F9FCD535695467BAA228219635649EA.png) このオプションはBootstrapグリッドシステムの可視化設定(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap/Bootstrap/Largeデスクトップ/Visibility/Hideのみ、大規模デスクトップのみ)で設定されています。 ![B99FF684D0F7443994AD0EF2FF68CDF5.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/B99FF684D0F7443994AD0EF2FF68CDF5.png) このクラスは、メディアライブラリ(sitecore/Media Library/Feature/Experience Accelerator)に読み込まれたbootstrap.cssファイルから取得しています: ![887645316B134986BAD9BF89C777F423.png](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/887645316B134986BAD9BF89C777F423.png)