コンテナ

コンテンツを水平方向に中央揃えするためのシンプルなコンテナ

containerは、より大きなビューポートでコンテンツを中央揃えするために使用できるシンプルなユーティリティ要素です。どのようなコンテキストでも使用できますが、主に以下のいずれかの直接の子要素として使用されます。

ナビゲーションバー
ヒーロー
セクション
フッター

概要 #

	下記 `1023px`	デスクトップ `1024px`と`1215px`の間	ワイドスクリーン `1216px`と`1407px`の間	フルHD `1408px`以上
クラス	`max-width`
`.container`	全幅	`960px`	`1152px`	`1344px`
`.container.is-widescreen`	全幅		`1152px`	`1344px`
`.container.is-fullhd`	全幅			`1344px`
`.container.is-max-desktop`	全幅	`960px`
`.container.is-max-widescreen`	全幅	`960px`	`1152px`

デフォルトの動作 #

デフォルトでは、containerは$desktopブレークポイントからしかアクティブになりません。$widescreenと$fullhdブレークポイントに達すると、max-widthが増加します。

各ブレークポイントでのコンテナの幅は、$device - (2 * $gap)の結果です。$gap変数のデフォルト値は32pxですが、変更できます。

コンテナは次のように動作します。

$desktopでは、最大幅は960pxになります。
$widescreenでは、最大幅は1152pxになります。
$fullhdでは、最大幅は1344pxになります。

値960、1152、1344は、12と16の両方で割り切れるように選択されています。

このコンテナは、デスクトップとそれ以上のビューポートで中央揃えされます。

<div class="container">
  <div class="notification is-primary">
    This container is <strong>centered</strong> on desktop and larger viewports.
  </div>
</div>

ワイドスクリーンまたはフルHDのみ #

is-widescreenとis-fullhdの2つの修飾子を使用すると、それらの特定のブレークポイントまで、フル幅のコンテナを持つことができます。

このコンテナは、$widescreenブレークポイントまでフル幅です。

<div class="container is-widescreen">
  <div class="notification is-primary">
    This container is <strong>fullwidth</strong> <em>until</em> the
    <code>$widescreen</code> breakpoint.
  </div>
</div>

このコンテナは、$fullhdブレークポイントまでフル幅です。

<div class="container is-fullhd">
  <div class="notification is-primary">
    This container is <strong>fullwidth</strong> <em>until</em> the
    <code>$fullhd</code> breakpoint.
  </div>
</div>

デスクトップとワイドスクリーンの最大幅 #

より大きなビューポートで狭いコンテナが必要になる場合があります。そのため、Bulmaは2つの修飾子を提供しています。

.container.is-max-desktopはデスクトップコンテナのように動作します。
.container.is-max-widescreenはワイドスクリーンコンテナのように動作します。

このコンテナは、ワイドスクリーンとフルHDでmax-widthが$desktop - $container-offsetになります。

<div class="container is-max-desktop">
  <div class="notification is-primary">
    This container has a <code>max-width</code> of
    <code>$desktop - $container-offset</code> on widescreen and fullhd.
  </div>
</div>

このコンテナは、フルHDでmax-widthが$widescreen - $container-offsetになります。

<div class="container is-max-widescreen">
  <div class="notification is-primary">
    This container has a <code>max-width</code> of
    <code>$widescreen - $container-offset</code> on fullhd.
  </div>
</div>

絶対最大幅 #

すべてのコンテナの最大幅を変更する場合は、$container-max-width Sass変数の値を更新することで実行できます。

デフォルトでは、$fullhdブレークポイントの値を使用して、containerの絶対最大幅が計算されます。それを$widescreen、$desktop、またはピクセル単位の任意の値に小さく変更するだけです。

流動的なコンテナ #

最大幅を設けずに、左右に32pxのマージンを維持したい場合は、is-fluid修飾子を追加します。

このコンテナは流動的です。任意のビューポートサイズで、左右に32pxのギャップがあります。

<div class="container is-fluid">
  <div class="notification is-primary">
    This container is <strong>fluid</strong>: it will have a 32px gap on either
    side, on any viewport size.
  </div>
</div>

Sass変数	CSS変数	値
`$container-offset`	`var(--bulma-)`	`2 * iv.$gap`
`$container-max-width`	`var(--bulma-)`	`iv.$fullhd`

SassとCSS変数 #

Sass変数	CSS変数	値
`$container-offset`	`var(--bulma-)`	`2 * iv.$gap`
`$container-max-width`	`var(--bulma-)`	`iv.$fullhd`

ここから始めましょう

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー