Bootstrap5 コンテナ
この記事では、Bootstrap5におけるコンテナの概念と使用方法について解説します。コンテナは、コンテンツを囲み、コンテンツの幅を設定するために重要なコンポーネントです。
一、コンテナの種類
Bootstrap5には、主に以下の2種類のコンテナが用意されています。
| コンテナ | 説明 |
|---|---|
.container |
|
.container-fluid |
|
二、使用例
<!-- 固定幅コンテナ -->
<div class="container">
<p>このコンテンツは固定幅のコンテナ内に配置されます。</p>
</div>
<!-- 流動的なコンテナ -->
<div class="container-fluid">
<p>このコンテンツは流動的なコンテナ内に配置されます。</p>
</div>
上記のコードでは、<div>タグと対応するコンテナクラス名を使用して、コンテナを作成しています。.containerクラスは固定幅コンテナを、.container-fluidクラスは流動的なコンテナを作成します。
三、注意事項
- コンテナの外側に別の
.containerクラスをネストしないでください。 - 必要に応じて、コンテナ内でグリッドシステムを使用して、より詳細なレイアウトを行うことができます。
四、関連リンク
- グリッドシステム: コンテナと組み合わせて使用できる、より詳細なグリッドシステムの使用方法について説明しています。
よくある質問
Q1: .containerと.container-fluidのどちらを使うべきですか？
A1: ほとんどの場合、.containerを使用することをお勧めします。.container-fluidは、ビューポート全体にコンテンツを配置する必要がある場合にのみ使用してください。
Q2: コンテナの中に別のコンテナをネストできますか？
A2: いいえ、コンテナの外側に別の.containerクラスをネストしないでください。ネストが必要な場合は、グリッドシステムを使用してください。
Q3: コンテナの幅を変更できますか？
A3: はい、ブレークポイントを使用して、異なる画面サイズに合わせてコンテナの幅を変更できます。詳細については、公式ドキュメントを参照してください。