グリッド レイアウト

概要

SXA は、応答性に優れたグリッド レイアウトに基づいています。

グリッド システムは、一貫したデザインを持ち、クロスブラウザーに対応した、応答性に優れた Web サイトの作成に役立ちます。グリッド システムは、ページを等間隔の列に分割して表示します。

グリッドの列をページ上に表示するには、リボンの [表示] タブの [表示] セクションで、[グリッド] を選択します。

使用するグリッド システムに応じて、ページはいくつかの列に分割されます。ページ上での列の分割方法は自由に選択することができます。SXA の各ページでは、行や列のスプリッターを使って、縦横にスペースを分割し、必要なページ構造を作ることができます。

例:

ページ上の列を分割するためのさまざまなオプション。
0EA9B7DA9F0546B29E52466C6EE4D29C.png

既定では、SXA は、サイトの作成時に選択する 4 つの異なるグリッド システム (Bootstrap 3、Bootstrap 4、Foundation、Grid 960) を付属しています。

[グリッド] タブで、利用可能な 4 つのグリッド システムのいずれかを選択します。

グリッドシステムの種類によって、使用する余白、列幅、動作などが異なります。ほとんどのシステムでは、デバイスの種類 (モバイル、タブレット、デスクトップなど) ごとに分類されています。

注記

サイトの作成後にグリッド システムを変更するには、多くの手動変更が必要になることに注意してください。ページは以前のグリッド システムを参照しているため、グリッド システムに変更を加えるとレイアウトが壊れます。

SXA は他のグリッド フレームワークの統合をサポートしており、独自のグリッド フレームワークを構築することもできます。