Bootstrap5 ブレークポイントとコンテナの具体的な使用法

1. Bootstrap5 ブレークポイント

1.1 モバイルファースト

モバイルファーストについて言えば、まずレスポンシブデザインについて触れなければなりません。レスポンシブインターフェースとは、さまざまなデバイスに適応できるページを設計することです。レスポンシブデザインでは、メディアクエリなどのテクノロジを使用して、さまざまなデバイス/ウィンドウでのスタイル適応を実現します。つまり、使用するさまざまなデバイスに基づいて、ユーザーに異なるページレイアウトを表示します。
これは、画面の幅を取得し、CSS を使用して異なる幅で異なる CSS 効果を使用できる HTML5 のメディアクエリテクノロジに基づいて実現されます。
モバイルファーストとは、まずモバイルクライアントに適したインターフェイスを開発し、次に PC 側の状況に応じて対応するスタイルを調整することを意味します。反対の設計思想は PC ファーストです。方法の選択は、習慣とユーザーの割合に基づいて行う必要があります。最近では、モバイルがまず推奨されるのが一般的です。

1.2 ブートストラップブレークポイント

いわゆるブレークポイントは、臨界点を指します。
このテーブルとその内容、特に頻繁に使用されるクラスインフィックスは覚えておく必要があります。
これについては、次のレイアウトセクションで詳しく説明します。ここで数回読んでみてください。覚えていなくても問題ありません。後でいつでも戻って確認できます。

ブレークポイントの種類	クラスインフィックス	解決
X-Small（超小型、通常は携帯電話）	なし	<576ピクセル
小型（小型、タブレット、または古いノートパソコン）	`sm`	≥576ピクセル
中型（中型、狭い画面のコンピュータ）	`md`	≥768ピクセル
大型（大型ワイドスクリーンコンピュータ）	`lg`	≥992ピクセル
特大（特大、ワイドスクリーンコンピュータ）	`xl`	≥1200ピクセル
超特大（超大型、高解像度のコンピュータまたは広告機器）	`xxl`	≥1400ピクセル

上の表からわかるように、画面は 5 つのブレークポイントを通じて 6 つのサイズに分割されています。読者はここでまずそれらを理解する必要があります。グリッドシステムについては、第 3 セクションでさらに詳しく説明します。

2. コンテナ

2.1 コンテナは物を保管するために使われる

コンテナーは Bootstrap の最も基本的なレイアウト要素であり、デフォルトのグリッドシステムを使用してレスポンシブな Web サイトを設計するときに必要です。コンテナーの最大幅は、ブラウザーの幅に応じて変更できます。コンテナの使い方は非常に簡単です。コンテナタグを body の内側のレイヤーに直接配置できます。一般的に、ページには他のすべてのビジュアルコンテンツをラップするためのコンテナタグが 1 つだけ必要です。ただし、このデモでは、さまざまなコンテナの効果を比較するために、1 つのページに複数のコンテナを配置しています。

2.2 Bootstrapコンテナの分類

Bootstrap のコンテナーは、デフォルトで次の 3 つのタイプに分かれています。

.container はデフォルトのコンテナーで、その幅は各レスポンシブブレークポイントの前のブレークポイントの最大幅になります。
.container-fluid は、常にブラウザの幅の 100% を占める流動的なコンテナです。
.container-{breakpoint}、ブレークポイントコンテナー。ブレークポイントに到達する前は、その幅は常にブラウザーの幅の 100% になります。ブレークポイントに到達した後は、その幅は常にブレークポイントの最大幅になります。ブレークポイントの値は、以前に導入したブレークポイントに対応しています。

次の表は、さまざまな解像度でのコンテナの幅を示しています。

	エクストラスモール <576ピクセル	小さい ≥576ピクセル	中くらい ≥768ピクセル	大きい ≥992ピクセル	特大 ≥1200ピクセル	XXラージ ≥1400ピクセル
。容器	100%	540ピクセル	720ピクセル	960ピクセル	1140ピクセル	1320ピクセル
.コンテナ-sm	100%	540ピクセル	720ピクセル	960ピクセル	1140ピクセル	1320ピクセル
.コンテナ-md	100%	100%	720ピクセル	960ピクセル	1140ピクセル	1320ピクセル
.コンテナ-lg	100%	100%	100%	960ピクセル	1140ピクセル	1320ピクセル
.コンテナ-xl	100%	100%	100%	100%	1140ピクセル	1320ピクセル
.コンテナ-xxl	100%	100%	100%	100%	100%	1320ピクセル
.コンテナ流体	100%	100%	100%	100%	100%	100%

2.3 ブラウザ幅の分析によるコンテナの変更

2.3.1 簡単な例

2.2 の表をよく理解していない方もいるかもしれません。いくつか例を挙げてみましょう。
container-md を例にとると、画面の幅が 768 ピクセル未満の場合、コンテナの幅は画面の幅の 100% を占めます。画面の幅が 768 ピクセルより大きく 992 ピクセル未満の場合、コンテナの幅は常に 720 ピクセルになります。画面の幅が 992 ピクセルより大きく 1200 ピクセル未満の場合、コンテナの幅は常に 960 ピクセルになります。他のブレークポイントコンテナやデフォルトコンテナでも同様です。

2.3.2 Bootstrapコンテナのいくつかの機能（フローコンテナを除く）

コンテナの幅は滑らかではなく不安定で、2 つのブレークポイント間の幅は同じです。
コンテナーにはブレークポイントの前には余白がなく、ブレークポイントの後には余白があります。768 ピクセルの画面の場合、コンテナーの幅は 720 ピクセルです。
デフォルトのコンテナ (container) と小さなコンテナ (container-sm) は現在同等ですが、次のステップで変更される可能性も否定できません。

2.4 ブラウザの幅に応じてコンテナを変更するデモコード

以下は、さまざまなブラウザ幅のデモコードと、GIF効果チャートです。理解できない場合は、コードをダウンロードして自分で勉強してください。スタイル部分は、コンテナの背景色と各コンテナの間隔を設定して区別しやすくするために私が書いたもので、コンテナ自体とは関係ありません。

2.4.1 デモアニメーション

2.4.2 デモソースコード

<!doctypehtml>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <meta name="キーワード" content="">
    <meta name="説明" コンテンツ="">
    <link href="bootstrap5/bootstrap.min.css" rel="外部nofollow" rel="スタイルシート">
 
    <title>さまざまな幅でのコンテナ幅のデモンストレーション</title>
    <スタイル>
      div{背景色: rgba(0, 0, 255, 0.178);パディング: 10px;マージン: 10px;}
    </スタイル>
  </head>
  <本文>
    <div class="container">デフォルトのコンテナ</div>
    <div class="container-sm">container-sm は小さなブレークポイントまで 100% の幅になります</div>
    <div class="container-md">container-md は中ブレークポイントまで 100% の幅</div>
    <div class="container-lg">container-lg は大きなブレークポイントまで 100% の幅になります</div>
    <div class="container-xl">container-xl は特大ブレークポイントまで 100% 幅</div>
    <div class="container-xxl">container-xxl 超特大ブレークポイントまで 100% 幅</div>
    <div class="container-fluid"> 流体コンテナ</div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </本文>
</html>

Bootstrap5 ブレークポイントとコンテナの具体的な使用法に関するこの記事はこれで終わりです。Bootstrap5 ブレークポイントとコンテナに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

以下もご興味があるかもしれません: