dev TailwindCSS

TailwindCSS justify-between テクニック三選｜場面別の使い分けを解説

TailwindCSS justify-between の使い方を場面別に解説。flex justify-between が効かない、垂直方向がズレるなどの悩みを持つ方へ、実例付きで紹介します。

TailwindCSS justify-between が効かない状態と正しく配置できた状態の比較

はじめに

TailwindCSS justify-between、どう使えばいいか迷っていませんか？

「justify-between を書いたのに動かない」「両端に配置できたけど、縦がズレてる」——そんな経験はありませんか？

実は、justify-between には場面ごとに適切な組み合わせがあります。今回は、よく使う3つのテクニックを紹介します。

私の体験談

その前に、私の体験談を少しだけ聞いてください。

私も最初、TailwindCSSの配置でめちゃくちゃ苦労しました。

ヘッダーのロゴとナビを両端に置きたいのにできない。カードのタイトルとボタンを両端に配置したいのに、思い通りにならない。そもそも justify-between の使い方をよく理解してなかったんです。

結局、有識者のコードをたまたま見つけて真似したらうまくいきました。でも当時は、なぜうまくいったのかよくわからなかった。他の画面で justify-between を目にするたびに、だんだん理解していった感じです。

そんな遠回りは、私だけで十分。この記事が誰かの近道になれば嬉しいです。

テクニック1: 要素を両端に配置する

ヘッダーのロゴとナビゲーションなど、要素を左右の両端に配置したいとき、flex justify-between を使います。

読者Aさんの誤解

  1. 公式ドキュメントの Justify Content ページを開く
    https://tailwindcss.com/docs/justify-content
  2. 「justify-between → 両端に配置」と書いてある
  3. 「これだ！」とヘッダーに justify-between だけ付けてみる
  4. ...動かない。要素が縦に並んだまま
  5. 「あれ？両端配置って書いてあるのに...」

コード例

NG: justify-between だけ

<div class="bg-slate-700 p-8">
  <div class="justify-between bg-white rounded-lg p-4">
    <div class="font-bold">Logo</div>
    <nav>Menu</nav>
  </div>
</div>
justify-betweenだけでは要素が縦に並んだまま

OK: flex justify-between

<div class="bg-slate-700 p-8">
  <div class="flex justify-between bg-white rounded-lg p-4">
    <div class="font-bold">Logo</div>
    <nav>Menu</nav>
  </div>
</div>
flexを追加して要素が両端に配置される

解説

justify-between は Flexbox 専用のクラスです。flex とセットで使わないと効きません。

ポイント

要素を両端に配置したいときは、flex justify-between を使いましょう。

テクニック2: 両端配置で垂直方向も揃える

両端に配置できたけど、要素の高さが違うと縦がズレてしまうとき、items-center を追加します。

読者Bさんの誤解

  1. ヘッダーのロゴとナビを両端に配置したい
  2. flex justify-between を付けてみる
  3. 横は両端に配置できた！でも縦がズレてる...
  4. 「justify-between で配置してるのに、なんで揃わないの...？」

コード例

NG: flex justify-between だけ

<div class="bg-slate-700 p-8">
  <div class="flex justify-between bg-white rounded-lg p-4">
    <div class="bg-blue-500 text-white px-4 py-6 font-bold">Logo</div>
    <nav class="bg-gray-200 px-4 py-2">Menu</nav>
  </div>
</div>
items-centerがないと垂直方向がズレる

OK: flex justify-between items-center

<div class="bg-slate-700 p-8">
  <div class="flex justify-between items-center bg-white rounded-lg p-4">
    <div class="bg-blue-500 text-white px-4 py-6 font-bold">Logo</div>
    <nav class="bg-gray-200 px-4 py-2">Menu</nav>
  </div>
</div>
items-centerを追加して垂直方向も中央揃え

解説

justify-between は水平方向の配置を制御します。垂直方向を中央に揃えるには items-center が必要です。

ポイント

両端配置で垂直方向も揃えたいときは、flex justify-between items-center を使いましょう。

テクニック3: 要素が1つのとき右端に配置する

要素を右端に配置したいとき、justify-between では効きません。justify-end を使います。

読者Cさんの誤解

  1. ボタンを右端に配置したい
  2. 「justify-between は両端に配置する」と知っている
  3. 要素が1つでも右端に寄るだろうと思って使ってみる
  4. ...左に寄ったまま動かない
  5. 「両端配置なのに、なんで右に寄らないの...？」

コード例

NG: 要素が1つなのに justify-between

<div class="bg-slate-700 p-8">
  <div class="flex justify-between bg-white rounded-lg p-4">
    <button class="bg-blue-500 text-white px-4 py-2 rounded">ボタン</button>
  </div>
</div>
要素が1つだとjustify-betweenは効かない

OK: justify-end

<div class="bg-slate-700 p-8">
  <div class="flex justify-end bg-white rounded-lg p-4">
    <button class="bg-blue-500 text-white px-4 py-2 rounded">ボタン</button>
  </div>
</div>
justify-endでボタンが右端に配置される

解説

justify-between は要素が2つ以上ないと意味がありません。要素が1つのときは justify-end で右端に配置します。

ポイント

要素を1つだけ右端に配置したいときは、justify-end を使いましょう。

まとめ

TailwindCSS justify-between のテクニックを3つ紹介しました。

  • 要素を両端に配置する: flex justify-between
  • 両端配置で垂直方向も揃える: flex justify-between items-center
  • 要素が1つのとき右端に配置: flex justify-end

場面に応じて適切なクラスを使い分けてみてください。

最初の一歩を踏み出したい方へ

調べても調べても、何が正解かわからない——

WEB系へスキルチェンジするため、TailwindCSSを学び始めた頃の私です。

何から始めればいいのか、見当もつかない。記事を読んでも、情報がバラバラで混乱するばかり。

それでも諦めずに、調べて、手を動かして、試し続けました。

その結果、ようやく見えてきた「最初の一歩」を、この講座にまとめました。

同じ悩みを持つ方へ、最初の一歩を照らすガイドになれば嬉しいです。

👉 TailwindCSSハンズオン講座（無料の導入記事）

-dev, TailwindCSS