ページ内のコンテンツを整理・区分するために、コンテンツの1つのまとまりをつくりたいときに使用するブロックです。

通常、このようなセクションを実装するには

• 背景色やオーバーフローを指定するための「デコレーター」ブロック
• 上下パディングを設けるための「ガター」ブロック
• コンテンツの最大幅の指定と左右余白を設けるための「コンテナー」ブロック

を組み合わせる必要がありますが、この「セクション」ブロックはそれらが1つにまとまった役割を果たすものなので、ブロックを組み合わせる手間を減らすことができます。

サンプル

設定

HTML 要素

ブロックの HTML タグを変更できます。

コンテンツの最大幅

コンテンツの最大幅（max-width）を設定できます。

背景色

背景色を設定できます。

上下パディング

上下パディング（padding）を設定できます。

両端の余白

左右に確保する余白（padding-right/left）を設定できます。

「ルートパディングを使用」が有効な場合は、画面端とコンテンツがくっつかないようにするための最低限の余白と同じサイズの余白が適用されます。

間隔

子ブロック間の間隔（gap）を設定できます。

オーバーフロー

コンテンツが溢れたときの動作（overflow）を設定できます。