セクションブロック

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

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

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

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

サンプル

豊富なパターン

レイアウトプリミティブなブロックで構成された美しいブロックパターンが豊富に用意されているため、並べるだけで美しいページが作成できます(要ライセンスキー)。

豊富なパターン

レイアウトプリミティブなブロックで構成された美しいブロックパターンが豊富に用意されているため、並べるだけで美しいページが作成できます(要ライセンスキー)。

設定

HTML 要素

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

コンテンツの最大幅

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

背景色

背景色を設定できます。

上下パディング

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

両端の余白

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

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

間隔

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

オーバーフロー

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

スクロール

ページをスクロールしてその要素が画面に入ったときに、任意のアニメーションを実行させることができます。

目次

マニュアル