Tailwind CSS レイアウト用クラスのまとめ

目次

1. justify-*: 水平方向（左右）の配置
2. items-*: 垂直方向（上下）の配置
3. align-*: 垂直方向（上下）の配置（単一要素対象）
4. place-*: 水平＆垂直の同時配置
5. 紛らわしいもの
6. まとめ

---

justify-*: 水平方向（左右）の配置

justify-* クラスは、水平方向（主軸方向、flex や grid の場合）での要素配置を調整するために使用します。親要素に適用することで、子要素の配置をコントロールできます。

主なクラス一覧

クラス名	説明
justify-start	子要素を左寄せ（開始位置）。
justify-center	子要素を中央寄せ。
justify-end	子要素を右寄せ（終了位置）。
justify-between	子要素間に均等な余白を配置し、最初と最後の子要素を両端に配置。
justify-around	子要素間と両端に均等な余白を配置（両端は子要素間の余白の半分）。
justify-evenly	子要素間および両端に均等な余白を配置。

使用例

<div class="flex justify-between">
  <div>左寄せ</div>
  <div>中央</div>
  <div>右寄せ</div>
</div>

このコードでは、3つの子要素が水平方向に配置され、最初の子要素が左寄せ、最後の子要素が右寄せ、中央の子要素は間隔を均等にして配置されます。

---

items-*: 垂直方向（上下）の配置

items-* クラスは、親要素が flex または grid の場合に、交差軸（垂直方向）の配置を制御します。これにより、子要素を上下方向に揃えることができます。

主なクラス一覧

クラス名	説明
items-start	すべての子要素を交差軸の開始位置（上）に揃える。
items-center	すべての子要素を交差軸の中央に揃える。
items-end	すべての子要素を交差軸の終了位置（下）に揃える。
items-baseline	子要素をテキストのベースラインに揃える。
items-stretch	すべての子要素を交差軸方向に引き伸ばす（デフォルト動作）。

使用例

<div class="flex items-center h-16">
  <div>子要素1</div>
  <div>子要素2</div>
</div>

このコードでは、2つの子要素が垂直方向に中央寄せされます。

---

align-*: 垂直方向（上下）の配置（単一要素対象）

align-* クラスは、親要素が flex の場合に、特定の子要素を垂直方向に配置するために使用されます。他の子要素には影響を与えず、個別に配置を調整できます。

主なクラス一覧

クラス名	説明
align-auto	デフォルトの配置（親の設定に従う）。
align-start	子要素を交差軸の開始位置（上）に揃える。
align-center	子要素を交差軸の中央に揃える。
align-end	子要素を交差軸の終了位置（下）に揃える。
align-baseline	子要素をテキストのベースラインに揃える。
align-stretch	子要素を交差軸方向に引き伸ばす（親の高さに合わせる）。

使用例

<div class="flex h-16">
  <div class="align-start">子要素1（上寄せ）</div>
  <div class="align-end">子要素2（下寄せ）</div>
</div>

このコードでは、子要素1 は上寄せ、子要素2 は下寄せされます。

---

place-*: 水平＆垂直の同時配置

place-* クラスは、水平（justify-*）と垂直（items-*）の配置を一度に指定するために使用します。grid または flex の親要素に適用することで、すべての子要素の配置を調整できます。

主なクラス一覧

クラス名	説明
place-start	子要素を左上に配置。
place-center	子要素を中央（水平＆垂直）に配置。
place-end	子要素を右下に配置。
place-stretch	子要素を両方向に可能な限り引き伸ばす（デフォルト動作）。

使用例

<div class="grid place-center h-16">
  <div>中央寄せ</div>
</div>

このコードでは、子要素が親要素内で水平方向も垂直方向も中央寄せされます。

---

紛らわしいもの

Tailwind CSS には配置に関連するクラスが多いため、混乱しやすいことがあります。特に、text-* や self-* といったクラスに関して理解を深めることが重要です。

text-*: テキストの水平方向配置

text-* クラスは、テキスト要素の水平方向の配置を制御します。text-left、text-center、text-right は、テキストやインライン要素の配置にのみ適用され、ブロック要素の配置には影響しません。

クラス名	説明
text-left	テキストを左寄せ。
text-center	テキストを中央寄せ。
text-right	テキストを右寄せ。

self-*: 子要素の配置

self-* クラスは、個別の子要素に対して配置を指定します。flex の場合、親の items-* 配置を上書きして、個別に子要素を配置します。

クラス名	説明
self-start	子要素を交差軸の開始位置（上）に揃える。
self-center	子要素を交差軸の中央に

---

まとめ

• justify-* クラスは、親要素内で子要素を水平方向に配置します。justify-start、justify-center、justify-end などを使うことで、子要素の水平方向の位置を調整できます。
• items-* クラスは、親要素内での垂直方向（交差軸）の配置を制御します。全ての子要素に適用され、items-start や items-center などで配置を変更できます。
• align-* クラスは、flex レイアウトで特定の子要素の垂直方向（交差軸）の配置を調整します。個別の子要素に適用でき、align-start や align-center などで指定します。
• place-* クラスは、水平＆垂直方向の配置を同時に制御するために使います。特に place-center で簡単に要素を中央に配置することができます。

さらに、text-* クラスはテキストやインライン要素の水平方向の配置を調整するもので、ブロック要素には影響を与えません。

理解を深めてこれらのクラスを適切に組み合わせることで、レイアウトの設計が格段に楽になります。Tailwind CSS の配置クラスはシンプルながら強力で、使いこなせば効率的なスタイリングが可能になりますので、ぜひ積極的に活用してみてください！