C++
 Computer >> コンピューター >  >> プログラミング >> C++

Bootstrapのコンテナ入門：containerとcontainer-fluidの違いを徹底解説

名前が示す通り、コンテナ（container）とは何かを保持したり束ねたりするためのものです。Bootstrapにおけるコンテナも同様に、ビューポート上のコンテンツを格納・管理する役割を担います。

コンテナは、ビューポートの四辺との間にマージンを設けることでコンテンツに余白（パディング）を与えます。この余白は、デザインのニーズに応じて自由に変更することも可能です。さらに、コンテナ同士を入れ子（ネスト）にして使うこともできます。

Bootstrapのコンテナ入門：containerとcontainer-fluidの違いを徹底解説

それでは、それぞれのクラスについて詳しく見ていきましょう。

.containerクラス

Bootstrapの.containerクラスは、ビューポート内で固定幅を持つレスポンシブなコンテナを作成します。ビューポートのサイズに応じて、コンテナの最大幅（max-width）が自動的に切り替わるのが特徴です。

以下の表は、ビューポートのサイズ別に定義される.containerクラスのmax-widthをまとめたものです。


極小
(Extra Small)		小
(Small)		中
(Medium)		大
(Large)		特大
(Extra Large)
max-width100%540px720px960px1140px

コード例

理解を深めるために、具体的な例を見てみましょう。

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container bg-dark text-white" style>
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

出力結果

このコードの出力結果は以下の通りです。

Bootstrapのコンテナ入門：containerとcontainer-fluidの違いを徹底解説

.container-fluidクラス

一方、.container-fluidクラスは、ビューポートの幅に対して常に100%の幅を持つレスポンシブなコンテナを作成します。ビューポートのサイズに関係なく、max-widthは常に100%に設定されます。

以下の表は、.container-fluidクラスのmax-widthをまとめたものです。


極小
(Extra Small)		小
(Small)		中
(Medium)		大
(Large)		特大
(Extra Large)
max-width100%100%100%100%100%

コード例

こちらも具体例で確認してみましょう。

<html>
<head>
<title>.Container Class</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body style="border:5px solid Black;">
<br>
<div class="container-fluid bg-dark text-white">
<center>
<h1>tutorialspoint</h1>
<h6>SIMPLYEASYLEARNING</h6>
</center>
</div>
</body>
</html>

出力結果

このコードの出力結果は以下の通りです。

Bootstrapのコンテナ入門：containerとcontainer-fluidの違いを徹底解説

まとめ

.containerはブレークポイントごとに最大幅が制限された「固定幅」のレイアウトに、.container-fluidは画面幅いっぱいに広がる「フルワイド」のレイアウトに適しています。用途に応じて使い分けることで、柔軟で美しいレスポンシブデザインを実現できます。

  1. Linuxのfindコマンド徹底解説！基本構文から実践的な使用例まで

    新規インストール直後のLinuxには、どれくらいのファイルが含まれているかご存知ですか？Pop!_OSを例に挙げると、なんと31,000個以上のファイルが存在します。これはドキュメントの作成や音楽の保存、PDFのダウンロード、写真の整理などを始める前の話です。そのため、必要なファイルやフォルダを必要なときに素早く見つけるのは、意外と難しい作業になります。この記事では、Linuxのfindコマンドの使い方を、実用的なコマンド例とともに詳しく解説していきます。findコマンドの基本構文構文とは、単語やコマンドの組み合わせ方のことです。普通の文章でも語順を入れ替えると意味不明になるように、コマンドも

  2. C++で解く「最大水量コンテナ」問題 ― 二重ポインタでO(N)実装

    問題概要 容器の壁の高さが配列として与えられ、その中で最大量の水を溜められる容器を見つけるのがこの問題の目標です。壁の高さは配列の要素で表され、2つの壁の間の距離（インデックスの差）が容器の幅として扱われます。たとえば、高さ Arr[i] と Arr[j] の壁の間の幅は j−i です（0 ≤ i < j ≤ N、N は壁の総数＝配列の長さ）。 水位は低い方の壁の高さまでしか上がりません。Arr[i] < Arr[j] なら水位は Arr[i] となり、幅は j−i なので、溜められる水の面積は次の式で表せます。 面積 ＝ min(Arr[i], Arr[j]) × (j − i)