Tailwind CSS flex items-center justify-center 完全ガイド - 実践的な中央揃えテクニック

Tailwind CSS flex items-center justify-center（中央揃え）の使い方を、基礎から実践まで6つの演習問題で完全マスター。企業サイトでよく使うヘッダーナビ、カードレイアウト、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公式ドキュメントを参照しながら、flex、items-center、justify-centerの3つのユーティリティクラスを実践的に学習しました。

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

• https://tailwindcss.com/docs/display
• https://tailwindcss.com/docs/align-items
• https://tailwindcss.com/docs/justify-content

学習の全体構成

今回の学習は、以下の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）なので、交差軸は垂直方向になります。

実行結果の解説：
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）では、主軸は水平方向になります。

実行結果の解説：
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つのユーティリティを組み合わせることで、完全な中央配置を実現できることを体験する。

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

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

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

目的：
企業サイトでよく見られるヘッダーナビゲーションを実装する。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: ホバー時の色変化

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

実行結果の解説：
ロゴが左端、ナビゲーションメニューが右端に配置されたヘッダーが完成しました。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による要素間のスペース調整も重要なテクニック。

実行結果の解説：
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を使うと、縦並びのまま完全な中央配置が実現できます。

実行結果の解説：
見出し、サブテキスト、ボタンが縦に並び、かつ全体が画面の中央に配置された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デザインの基礎となる重要な技術です。今回学んだ知識を活かして、さらに高度なレイアウトにも挑戦してみてください。また別の記事でお会いしましょう！

関連記事

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

Tailwind CSS flex items-center justify-center 完全ガイド - 実践的な中央揃えテクニック

Tailwind CSS flex items-center justify-center（中央揃え）の使い方を、基礎から実践まで6つの演習問題で完全マスター。企業サイトでよく使うヘッダーナビ、カード ...

続きを見る

Tailwind CSS spacing utilities 完全ガイド - padding/margin 基礎を6問で習得

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

続きを見る

Tailwind CSS Width Height 完全ガイド - 基礎から実践まで10問で習得

Tailwind CSS width height utilities（幅・高さユーティリティ）の基本から実践的な使い方まで、10問の演習問題で体系的に学べる完全ガイド。固定値・相対値・分数値の使い分 ...

続きを見る

【実践10問】Tailwind CSS bg text color で背景色・テキスト色を完全習得

Tailwind CSS bg text color（背景色・テキスト色）のユーティリティを、基礎5問＋実践5問のハンズオン形式で完全解説。bg-, text- の基本パターンから企業サイトでの実践的 ...

続きを見る

Tailwind CSS rounded shadow ring を実践ハンズオン｜角丸・影・リングの基礎から応用まで

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

続きを見る