グリッドレイアウト

概要

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

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

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

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

例:

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

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

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

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

グリッド レイアウト