---
title: "グリッド設定"
slug: "the-grid-settings"
abstract: "グリッドの定義、設定、クラスは、一貫したデザインを持ち、クロスブラウザ対応を保証するレスポンシブなウェブサイトを作成するために使用されます。"
---
# グリッド設定

[グリッドシステムは](https://doc.sitecore.com/xp/en/users/sxa/104/sitecore-experience-accelerator/the-grid-layout-1064967.html)、ウェブサイトを簡単に構成できるHTML/CSSコンポーネントのライブラリです。グリッドシステムは、一貫したデザインを持ち、クロスブラウザ対応を保証するレスポンシブなウェブサイトを作成するのに役立ちます。グリッドレイアウトの仕組みを理解することで、グリッド設定の使い方や変更、クラスの追加に役立ちます。

## グリッドシステム

デフォルトでは、サイトを作成する際にBootstrap 5が付属しており、これはjsDelivr、自動マージン、テンプレートスターターページを備えたレスポンシブでモバイルファーストのシステムです。デフォルトのデバイスは以下の通りです:

-   モバイル
-   モバイルの風景
-   タブレット肖像
-   Desktop small
-   Desktop レギュラー
-   Desktop large

また、Bootstrap 4、Tailwind、Foundationなど、他のグリッドシステム用の組み込みアイテムも用意されています。

サイト作成後にグリッドシステムを変更するには多くの手動変更が必要です。ページ上のグリッドシステムへの言及があるため、グリッドシステムを変更するとレイアウトが壊れてしまいます。

すべてのグリッドシステムには異なるシステムルール、クラス、オプションがあります。より詳しい情報については、各グリッドシステムのドキュメントを参照してください。

## グリッド定義およびグリッド設定項目の設定

グリッドシステムはSitecoreの機能として保存されており(sitecore/System/設定/Feature/)、以下が含まれます:

-   *Grid Definition*項目には、グリッドシステム固有の設定、デバイス、そしてコンテンツ作成者がPagesで使用できるクラスが含まれます。
-   *Grid Setup*項目 – スキャフォールディング用のモジュールを設定するためのもので、依存関係の指定も含まれます。

![The grid settings in the Content Editor](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/ce-grid-definition-item-rectangles.png)

*Grid Definition*項目には以下のフィールドが含まれています:

フィールド

概要

名称

サイト作成ウィザードで表示したいグリッドシステムの名前です。

レンダリングパラメータフィールドタイプ

グリッドパラメータの描画方法を決定します。デフォルトのフィールドレンダラーはSitecoreです。XA。Foundation.Grid.Fields.FieldRenderers.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タグフィールドで指定されたタグにクラスを割り当てます。注:使用するグリッドシステムによっては、このフィールドはすでに設定されている場合があります。

*Grid Setup*項目には以下の項目が含まれます。

フィールド

概要

名称

サイト作成ウィザードで表示したいグリッドシステムの名前です。

依存関係

機能のインストール順を自分で決められます。

グリッドの定義

グリッド定義項目を指します。例えば、Foundationグリッドシステムの場合:設定/機能/Experience Accelerator/Foundation/Foundation

グリッドシステムの*Grid Definition*項目でコンポーネントのデフォルトレイアウト設定を変更できます。例えば、Bootstrap 5グリッド(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap 5)の場合:

![Example of changing the layout settings of a grid in the grid definition item.](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/ce-grid-definition-default-layout-settings.png)

## グリッドクラス

*Grid Definition*項目で定義されたクラスは、メディアライブラリ内のグリッドシステムの詳細に対応しています。例えば、エクスペリエンスエディターでは、大きなデスクトップを使う訪問者のためにレンダリングを非表示にするオプションがあります。

![Example of enabling a setting that hides a component if the visitor uses a large desktop](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/ee-grid-settings-hide.png)

このオプションはBootstrap 5グリッドシステムの **ディスプレイ** 設定(sitecore/System/Settings/Feature/Experience Accelerator/Bootstrap 5/Bootstrap 5/Large Desktop/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/sai/ja/developers/sitecoreai/images/ee-grid-settings-display-hidden.png)

このクラスは、メディアライブラリ(sitecore/Media Library/Feature/Experience Accelerator)に読み込まれたbootstrapmin.cssファイルから取られています:

![Example showing that the class pulled from the bootstrap.css in the Media Library.](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/ce-grid-large-desktop-hide.png)