Bootstrap5 コンテナ

コンテナ(Containers)は、Bootstrapにおける最も基本的なレイアウト要素です。

コンテナとは何か？

コンテナは画面全体の横幅を制御したい場合に使います。ページの内容を中央に配置し、適切な水平パディングを提供します。これにより、各デバイスのビューポートに応じて適切にレスポンシブに調整されます。

コンテナの種類

Bootstrap5では、3種類のコンテナが提供されています。

.container

このコンテナは、さまざまなビューポートサイズでのレスポンシブな固定幅を持ちます。

.container-fluid

このコンテナは、ビューポートの幅に関係なく常に100％幅を占めます。これにより、ページ全体を埋めるレイアウトを作成できます。

.container-{breakpoint}

新しいBootstrap5で追加された特性で、特定のブレークポイント（sm、md、lg、xl、xxl）でのみ100％の幅を取るコンテナです。

ブレークポイントとは？

ブレークポイントとは、デバイスの画面サイズに応じてデザインやレイアウトが変わるポイントのことを指します。

以下に、メディアクエリを使ってブレークポイントを設定する基本的な例を示します。

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

この例では、ビューポートの幅が600ピクセル以下のときに、body要素の背景色を薄い青色に設定するCSSルールを指定しています。つまり、このCSSルールは600ピクセル以下のビューポート幅であるデバイス（たとえば、スマートフォン）に対するブレークポイントとなります。

Bootstrap5では、以下の5つのブレークポイントが定義されています。

• xs: 0px以上
• sm: 576px以上
• md: 768px以上
• lg: 992px以上
• xl: 1200px以上
• xxl: 1400px以上

これらのブレークポイントは、CSSメディアクエリで使用され、コンテンツのレイアウトと表示をコントロールします。