dev TailwindCSS

Tailwind CSS flex items-center justify-center の使い方 - Flexbox 中央揃えの書き方 | Hakko Smile

Tailwind CSS の flex items-center justify-center を使って要素を中央揃えする方法を、基礎3問＋実践3問のハンズオン形式で紹介します。tailwind items-center・tailwind justify-center・tailwind flex center などの実例と、ヘッダー・カード・CTA セクションでの使い方をまとめました。

読者がこの記事から得られる知識

この記事では、Tailwind CSS flex items-center justify-center の使い方を、実際にコードを書きながら学びます。Flexbox は Web デザインの基本中の基本で、特に中央揃えは最も頻繁に使用するテクニックです。

学習を通じて、以下の知識が身につきます：

  • flex、items-center、justify-center の3つのユーティリティクラスの正確な役割と使い分け
  • 垂直方向と水平方向の中央揃えを自由に操作する方法
  • 企業サイトで頻出する3つの実践パターン（ヘッダーナビ、カードレイアウト、CTA セクション）の実装方法
  • justify-between を使った両端配置のテクニック
  • flex-col を使った縦並びレイアウトの実装方法
  • よくある失敗パターンとその解決方法

実際にコードを書きながら学ぶハンズオン形式なので、読み終わる頃には Flexbox レイアウトを組めるようになります。

今回ハンズオンした内容

今回は Tailwind CSS Playground を使って、Tailwind CSS 公式ドキュメントを参照しながら、flex、items-center、justify-center の3つのユーティリティクラスを実践的に学習しました。

Tailwind CSS の基礎から学び直したい場合は、TailwindCSS とは？特徴とメリットを初心者向けに解説【体験談あり】 を参考にしてください。Flexbox と Grid の使い分けについては、TailwindCSS Flex と Grid の違いと使い分け にまとめています。

参照した公式ドキュメント：

学習の全体構成

今回の学習は、以下の6つの演習問題で構成されています：

基礎編（3問）

  1. 垂直方向の中央揃え（items-center）
  2. 水平方向の中央揃え（justify-center）
  3. 垂直・水平両方向の中央揃え（items-center + justify-center）

実践編（3問）

  1. ヘッダーナビゲーション（justify-between）
  2. 3列カードレイアウト（justify-center + gap）
  3. CTA セクション（flex-col + 垂直・水平の中央揃え）

実際に https://play.tailwindcss.com/ で動作確認しながら進めました。

基礎問題1：垂直方向の中央揃え

目的：
flex と items-center を使って、子要素を垂直方向（上下）に中央配置する方法を学ぶ

実装コード：

<div class="flex items-center h-32 bg-gray-200">
  <div class="bg-gray-500 p-4">01</div>
  <div class="bg-gray-500 p-4">02</div>
  <div class="bg-gray-500 p-4">03</div>
</div>

コードの意味：

  • flex: 親要素を Flexbox コンテナにする
  • items-center: 交差軸（垂直方向）の中央に子要素を配置
  • h-32: 高さ 128px（8rem）を設定
  • bg-gray-200: 背景色を薄いグレーに設定

実装の意図：
Flexbox の交差軸（cross axis）に沿った配置を理解するため。デフォルトでは横並び（flex-row）なので、交差軸は垂直方向になります。

Tailwind CSS items-center 垂直方向の中央揃え実装例

実行結果の解説：
3つの子要素が親要素の高さの中央に配置されました。items-center は交差軸の中央揃えを行うため、横並び配置の場合は垂直方向の中央揃えになります。

ここで重要なポイントは、親要素に高さ（h-32）を設定しないと中央揃えの効果が分かりにくいことです。

基礎問題2：水平方向の中央揃え

目的：
flex と justify-center を使って、子要素を水平方向（左右）に中央配置する方法を学ぶ

実装コード：

<div class="flex justify-center h-32 bg-blue-200">
  <div class="bg-blue-500 text-white p-4">01</div>
  <div class="bg-blue-500 text-white p-4">02</div>
  <div class="bg-blue-500 text-white p-4">03</div>
</div>

コードの意味：

  • flex: 親要素を Flexbox コンテナにする
  • justify-center: 主軸(水平方向)の中央に子要素を配置
  • h-32: 高さ 128px
  • bg-blue-200: 背景色を薄い青に設定

実装の意図：
Flexbox の主軸(main axis)に沿った配置を理解するため。横並び（flex-row）では、主軸は水平方向になります。

Tailwind CSS justify-center 水平方向の中央揃え実装例

実行結果の解説：
3つの子要素が親要素の幅の中央に配置されました。justify-center は主軸の中央揃えを行うため、横並び配置の場合は水平方向の中央揃えになります。

この問題を通じて、items-center（交差軸）と justify-center（主軸）の違いが明確になりました。

基礎問題3：垂直・水平両方向の中央揃え

目的：
flex、items-center、justify-center を組み合わせて、垂直・水平両方向の中央配置を実現する

実装コード：

<div class="flex h-64 items-center justify-center bg-green-200">
  <div class="bg-blue-500 p-8 text-2xl text-white">01</div>
</div>

コードの意味：

  • flex items-center justify-center: 垂直・水平両方向の中央揃え
  • h-64: 高さ 256px（16rem）
  • bg-green-200: 背景色を薄い緑に設定

実装の意図：
これまで学んだ2つのユーティリティを組み合わせることで、垂直・水平両方向の中央配置が実現できることを体験する。

Tailwind CSS flex items-center justify-center 垂直・水平方向の中央揃え実装例

実行結果の解説：
子要素が親要素の真ん中（垂直・水平両方）に配置されました。これは、Web デザインで最も頻繁に使用するパターンの1つです。

ローディング画面、モーダルダイアログ、エラーメッセージなど、様々な場面で活用できます。

実践問題1：ヘッダーナビゲーション

目的：
企業サイトでよく見られるヘッダーナビゲーションを実装する。justify-between を使った両端配置を学ぶ。詳しい使い方は TailwindCSS justify-between で両端配置するテクニック にもまとめています。

実装コード（最終版）：

<div class="flex h-16 items-center justify-between bg-white shadow-md">
  <div class="text-xl font-bold text-blue-600">Company</div>
  <div class="flex items-center gap-6">
    <div class="text-gray-600 hover:text-blue-600">Home</div>
    <div class="text-gray-600 hover:text-blue-600">About</div>
    <div class="text-gray-600 hover:text-blue-600">Contact</div>
  </div>
</div>

コードの意味：

  • justify-between: 子要素を両端に配置（ロゴとメニュー）
  • gap-6: メニュー項目間の隙間を 24px（1.5rem）に設定
  • hover:text-blue-600: ホバー時の色変化

実装の意図：
実際の企業サイトで使われているレイアウトパターンを再現することで、実務に直結する知識を得る。

Tailwind CSS ヘッダーナビゲーション実装例 justify-between使用

実行結果の解説：
ロゴが左端、ナビゲーションメニューが右端に配置されたヘッダーが完成しました。justify-between は、子要素を両端に配置し、間に均等なスペースを作ります。

重要な学び：
当初、メニューの親要素に hover:text-blue-600 を設定していましたが、これでは親要素全体にホバーした時のみ色が変わってしまいます。各メニュー項目に個別に hover: を設定することで、独立したホバー効果を実現できました。

また、gap-6 の配置場所も重要です。外側の親要素ではなく、メニュー項目をまとめる親要素に設定することで、メニュー項目間のみに隙間を作ることができます。

実践問題2：3列カードレイアウト

目的：
企業サイトの「サービス紹介」セクションなどでよく見られる、3列のカードレイアウトを実装する。

実装コード（最終版）：

<div class="flex justify-center gap-8 bg-gray-100 py-16">
  <div class="bg-white p-6 rounded-lg shadow w-64">
    <div class="text-xl font-bold mb-4">Feature 1</div>
    <div class="text-gray-600">Description</div>
  </div>
  <div class="bg-white p-6 rounded-lg shadow w-64">
    <div class="text-xl font-bold mb-4">Feature 2</div>
    <div class="text-gray-600">Description</div>
  </div>
  <div class="bg-white p-6 rounded-lg shadow w-64">
    <div class="text-xl font-bold mb-4">Feature 3</div>
    <div class="text-gray-600">Description</div>
  </div>
</div>

コードの意味：

  • justify-center: 3つのカードを中央に配置
  • gap-8: カード間の隙間を 32px（2rem）に設定
  • py-16: 上下のパディングを 64px（4rem）に設定
  • rounded-lg: 角を丸くする（大きめ）
  • shadow: 影をつける
  • w-64: カードの幅を 256px（16rem）に固定

実装の意図：
複数の要素を横並びで中央配置する方法を学ぶ。gap による要素間のスペース調整も重要なテクニック。

Tailwind CSS 3列カードレイアウト実装例

実行結果の解説：
3つのカードが綺麗に横並びで中央配置されたセクションが完成しました。gap-8 により、カード間に適度な余白が生まれ、視認性が向上しています。

重要な学び：
各カードに w-64 で固定幅を設定することで、レイアウトが安定します。また、mb-4 でタイトルと説明文の間に余白を作ることで、読みやすさが向上しました。

実践問題3：CTA セクション

目的：
「お問い合わせ」や「資料請求」などの CTA（Call To Action）セクションを実装する。flex-col を使った縦並びレイアウトを学ぶ。

実装コード（最終版）：

<div class="flex flex-col items-center justify-center h-96 bg-blue-600">
  <div class="text-4xl font-bold text-white mb-4">
    お気軽にお問い合わせください
  </div>
  <div class="text-xl text-blue-100 mb-8">
    専門スタッフが丁寧に対応いたします
  </div>
  <button class="bg-white text-blue-600 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50">
    お問い合わせ
  </button>
</div>

コードの意味：

  • flex-col: 縦並びレイアウトに変更
  • items-center justify-center: 垂直・水平両方向の中央揃え
  • h-96: 高さ 384px（24rem）
  • text-4xl: 大きな見出し（36px）
  • mb-4、mb-8: 下マージン（要素間の余白）

実装の意図：
flex-col を使うことで、主軸と交差軸が入れ替わります。この状態で items-center と justify-center を使うと、縦並びのまま垂直・水平方向の中央配置が実現できます。

Tailwind CSS CTAセクション実装例 flex-col使用

実行結果の解説：
見出し、サブテキスト、ボタンが縦に並び、かつ全体が画面の中央に配置された CTA セクションが完成しました。

重要な学び：
最初、<button> タグの閉じタグを </div> と誤って記述してしまいました。HTML の基本的な構文エラーですが、こういった細かいミスに注意する必要があります。

また、flex-col を使うと、主軸が縦方向になるため：

  • justify-center: 垂直方向の中央揃え
  • items-center: 水平方向の中央揃え

となり、通常の flex-row の時とは逆になることを理解できました。

ハンズオンの中で私が疑問に感じた点や失敗した点

学習を進める中で、いくつかの疑問点や失敗がありました。これらを共有することで、同じ悩みを持つ方の参考になればと思います。

疑問1: items-center と justify-center の違いがわからない

最初は、この2つのユーティリティの違いが理解できず混乱しました。

解決策：
items-center は交差軸（cross axis）、justify-center は主軸（main axis）の中央揃えです。横並び（flex-row）の場合、主軸は水平方向なので justify-center で左右中央、交差軸は垂直方向なので items-center で上下中央になります。

実際にコードを書いて確認することで、この違いが明確になりました。

疑問2: gap を削除したらメニュー項目が詰まってしまった

実践問題1で、不要なクラスを整理する際に、必要な gap-6 まで削除してしまい、メニュー項目が「HomeAboutContact」のように隙間なく詰まってしまいました。

解決策：
gap は、要素間のスペースを作る重要なユーティリティです。削除する前に、その役割を確認する必要があります。gap は、隙間を作りたい要素の親要素に設定します。

失敗: HTML の class を classname と書いてしまった

React の記法と混同して、HTML で classname 属性を使ってしまいました。

結果：
スタイルが一切適用されず、原因を探すのに時間がかかりました。ブラウザは classname 属性を無視します。

教訓：

  • HTML: class 属性を使用
  • React: className 属性を使用（JSX の予約語対策）

プレーンな HTML と React を同時に学習していると混同しやすいので注意が必要です。

今回のまとめ

お疲れさまでした。今回は Tailwind CSS flex items-center justify-center のハンズオン学習を完了されました。

今回学習した内容をまとめます：

  • Flexbox 中央揃えの基本: flex、items-center、justify-center の3つのユーティリティクラスを使った垂直・水平方向の中央揃えテクニック
  • 実務で使える3つのパターン: 企業サイトで頻出するヘッダーナビゲーション、カードレイアウト、CTA セクションの実装方法と、justify-between、gap、flex-col の活用方法
  • よくある失敗と解決策: HTML タグの閉じ間違い、class と classname の混同、gap の役割など、初学者が陥りやすい罠とその回避方法

Flexbox は、Web デザインの基礎となる重要な技術です。今回学んだ知識を活かして、さらに高度なレイアウトにも挑戦してみてください。また別の記事でお会いしましょう。

体系的に学びたい場合は、TailwindCSS 学習方法 で私のおすすめ学習ステップを紹介しています。

関連記事

この記事で紹介した内容の他にも学習した内容を記事にしています。是非、ご覧になってみて下さい。

Tailwind CSS flex items-center justify-center を使った水平方向の中央揃え実装例
Tailwind CSS flex items-center justify-center の使い方 - Flexbox 中央揃えの書き方 | Hakko Smile

Tailwind CSS の flex items-center justify-center を使って要素を中央揃えする方法を、基礎3問＋実践3問のハンズオン形式で紹介します。tailwind it ...

続きを見る
Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得のロゴ
Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

Tailwind CSS spacing utilities（スペーシングユーティリティ）の基本である padding と margin を、公式ドキュメントに基づく6つの実践問題で完全習得。p-4、 ...

続きを見る
Tailwind CSS width height utilities の完全ガイド 基礎から実践まで10問で習得のロゴ
Tailwind CSS Width Height 使い方完全ガイド｜w-full・h-screen・size-* の違いがわかる

Tailwind CSS Width Height の使い方を解説。w-full と w-screen の違い、size-* ショートハンド、v4 の新単位（dvh/svh/lvh）まで、実例とコード ...

続きを見る
Tailwind CSS bg text color 背景色・テキスト色ユーティリティの学習ガイド アイキャッチ
Tailwind CSS 背景色・テキスト色 bg text color の使い方まとめ

Tailwind CSS 背景色（bg-）・テキスト色（text-）のユーティリティを、基礎5問＋実践5問のハンズオン形式で紹介します。bg-, text-の基本パターンから企業サイトの配色テクニック ...

続きを見る
Tailwind CSS rounded shadow ring ユーティリティ実践ハンズオン アイキャッチ
Tailwind CSS rounded shadow ring を実践ハンズオン｜角丸・影・リングの基礎から応用まで

Tailwind CSS rounded shadow ring の ユーティリティクラスを基礎から実践まで10問のハンズオンで完全理解。border・bg・opacity との組み合わせや、hove ...

続きを見る

-dev, TailwindCSS