コンテンツコンテナ

コンテンツコンテナ

ページ内のコンテンツをレイアウトする場合には、コンテンツ幅が定義されたコンテンツコンテナ要素を用いることで、ページ中央に適切なコンテンツ（最大）幅を持たせて配置させることができます。レイアウトを組む際には、基本的にページ内のコンテンツを全てコンテンツコンテナ要素の中に含めるようにします。

<div class="su-container">
  <!-- ページコンテンツの内容 -->
</div>

コンテンツ（最大）幅は1280pxを基本とし、ビューポート幅が1280px以下になると、992pxのコンテンツ（最大）幅に変わります。ビューポート幅が992px以下になると、画面幅いっぱいに広がって表示されるようになります。

また、コンテンツコンテナ要素は左右両端に余白が設けられており、コンテンツの中身が画面幅との境界線に隣接しないようになっています。この余白サイズはCSS変数を使って変更することが可能です。この余白は初期値で1.5rem（24px相当）となっており、ビューポート幅のメディアクエリによって、768pxを閾値として1rem（16px相当）から、576pxを閾値として0.875rem（14px相当）に変化するように設定されています。

.su-container {
  --su-container-gutter-size: 2rem;
}

ビューポート幅とコンテンツ最大幅の変化

コンテンツコンテナ要素はサイズのバリエーションがあり、クラス名のサフィックスで使い分けることができます。最大のコンテンツ幅がブレークポイントに合わせて変化するようになり、レイアウトにリズムやアクセントを持たせることができます。

クラス名の一覧