🎃
Bootstrapで子要素の配置を決めるクラス一覧
🚀 Bootstrapで子要素の配置を決めるクラス一覧
Bootstrapでは、子要素の配置を フレックスボックス（d-flex）やグリッド（row） を活用して制御できます。
汎用性を考え、よく使うクラスをカテゴリ別にまとめました！ ✅
1. フレックスボックスでの配置 (d-flex + justify-content + align-items)
Bootstrapは display: flex を簡単に適用できる d-flex を提供しており、
子要素の水平方向 (justify-content-) と 垂直方向 (align-items-) の配置を指定できます。
▶ 水平方向の配置 (justify-content-)
| クラス | 効果 |
|---|---|
justify-content-start |
左寄せ（デフォルト） |
justify-content-center |
水平中央揃え |
justify-content-end |
右寄せ |
justify-content-between |
均等配置（端に寄せる） |
justify-content-around |
均等配置（端に少し余白あり） |
justify-content-evenly |
均等配置（完全な間隔均等） |
🔹 例：
<div class="d-flex justify-content-between">
<div>左</div>
<div>右</div>
</div>
▶ 垂直方向の配置 (align-items-)
| クラス | 効果 |
|---|---|
align-items-start |
上寄せ |
align-items-center |
垂直中央揃え |
align-items-end |
下寄せ |
align-items-baseline |
文字のベースラインに揃える |
align-items-stretch |
高さを揃える（デフォルト） |
🔹 例：
<div class="d-flex align-items-center" style="height: 100px; background: #ddd;">
<div>中央揃えのテキスト</div>
</div>
▶ 子要素ごとの配置 (align-self-)
| クラス | 効果 |
|---|---|
align-self-start |
親の上部に配置 |
align-self-center |
親の中央に配置 |
align-self-end |
親の下部に配置 |
🔹 例：
<div class="d-flex">
<div class="align-self-start">上</div>
<div class="align-self-center">中央</div>
<div class="align-self-end">下</div>
</div>
2. グリッドシステム (row + col)
Bootstrapの グリッドシステム を使うと、子要素を自動的に整列できます。
▶ 基本のグリッド
<div class="row">
<div class="col-6">左側（幅50%）</div>
<div class="col-6">右側（幅50%）</div>
</div>
🔹 col-6 → 12カラムのうち 6カラム分（50%） を占める。
▶ 水平方向の配置 (justify-content-)
グリッドでも justify-content- を使えます。
<div class="row justify-content-center">
<div class="col-4">中央揃え</div>
</div>
3. 間隔調整 (gap- & g-)
▶ フレックスボックスの gap-
<div class="d-flex gap-3">
<div>要素1</div>
<div>要素2</div>
</div>
🔹 gap-3 → 3（rem 単位）の間隔ができる
▶ グリッドの g-
<div class="row g-3">
<div class="col">要素1</div>
<div class="col">要素2</div>
</div>
🔹 g-3 → グリッドの gap に適用
4. レスポンシブ対応
Bootstrapのクラスは レスポンシブ指定が可能 です。
| クラス | 効果 |
|---|---|
justify-content-md-center |
中画面（768px以上）で中央揃え |
align-items-lg-end |
大画面（992px以上）で下寄せ |
🔹 例（画面サイズごとに配置を変える）
<div class="d-flex justify-content-start justify-content-md-center justify-content-lg-end">
<div>レスポンシブな配置</div>
</div>
📌 小画面では 左寄せ → 中画面では 中央揃え → 大画面では 右寄せ
✅ まとめ
| カテゴリ | クラス | 効果 |
|---|---|---|
| 水平方向 | justify-content-center |
水平中央揃え |
justify-content-between |
均等配置（端に寄せる） | |
| 垂直方向 | align-items-center |
垂直中央揃え |
align-items-end |
下寄せ | |
| 子要素ごとの配置 | align-self-start |
個別に上寄せ |
align-self-center |
個別に中央揃え | |
| 間隔調整 | gap-3 |
3 rem の間隔 |
| グリッド配置 |
row + col
|
グリッドレイアウト |
| レスポンシブ対応 | justify-content-md-center |
中画面で中央揃え |
これらのクラスを組み合わせることで、柔軟な子要素の配置が可能！🚀
Discussion