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

Tailwind CSS width height utilities（幅・高さユーティリティ）の基本から実践的な使い方まで、10問の演習問題で体系的に学べる完全ガイド。固定値・相対値・分数値の使い分けから、企業サイトで頻出するレイアウトパターンまで実装例付きで解説します。

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

この記事では、Tailwind CSS width height utilities（幅・高さユーティリティ）を実践的に学習していきます。公式ドキュメントをベースに、基礎問題5問と実践問題5問の合計10問を通して、段階的にスキルアップできる構成になっています。

この記事で学べること:

• 固定値・相対値・分数値の3種類の width height 指定方法
• w-*、h-*、size-* の使い分けと実装パターン
• Flexbox・Grid を活用した企業サイト頻出レイアウト
• レスポンシブデザインに対応したコンテナ設計
• https://play.tailwindcss.com/ での実践的なハンズオン手法

すべての問題にブラウザ表示結果のスクリーンショットとコード例を掲載しているので、視覚的に理解しながら学習を進められます。初心者の方でも、この記事を読み終える頃には、Tailwind CSS で自信を持ってレイアウトを組めるようになっているはずです。

今回ハンズオンした内容

今回は、Tailwind CSS の公式ドキュメント（https://tailwindcss.com/docs/width、https://tailwindcss.com/docs/height）を参照しながら、width height utilities の基礎から実践まで体系的に学習しました。CSS フレームワークとして人気の Tailwind CSS では、w-* や h-* といったユーティリティクラスを使うことで、直感的にレイアウトを構築できます。

学習は2つのフェーズに分けて実施しました。まず基礎問題5問で固定値・相対値・分数値の使い方を習得し、その後、実践問題5問で企業サイトでよく見られるレイアウトパターンに挑戦しました。

ハンズオンで学習したコードと結果の画像

先にハンズオンで書いたコード全体を紹介しておきます。

<div class="feature/learn-tailwind-width-height">
  <div class="basic-1-container">
    <div class="w-64 h-32 bg-blue-500">基礎問題1</div>
  </div>
  <div class="basic-2-container">
    <div class="w-full h-hull bg-gray-400">基礎問題2</div>
  </div>
  <div class="basic-3-container">
    <div class="flex">
      <div class="w-1/3 h-24 bg-red-400">
        基礎問題3-a
      </div>
      <div class="w-2/3 h-24 bg-blue-400">
        基礎問題3-b
      </div>
    </div>
  </div>
  <div class="basic-4-container">
    <div class="size-16 bg-purple-500">
      基礎問題4
    </div>
  </div>
  <div class="basic-5-container">
    <div class="w-1/2 h-auto bg-yellow-400 p-4">
      基礎問題5
    </div>
  </div>
  <div class="practice-1-container">
    <div class="flex flex-col w-full h-4/5 bg-gray-800">
      <div class="h-auto">見出しエリア</div>
      <div class="h-auto">コンテンツエリア</div>
    </div>
  </div>
  <div class="practice-2-container">
    <div class="flex justify-between">
      <div class="w-1/3 h-40 bg-blue-400 p-4">エリア1</div>
      <div class="w-1/3 h-40 bg-green-400 p-4">エリア2</div>
      <div class="w-1/3 h-40 bg-red-400 p-4">エリア3</div>
    </div>
  </div>
  <div class="practice-3-container">
    <div class="flex">
      <div class="w-64 h-screen bg-gray-400">サイドバー</div>
      <div class="flex-1 h-screen bg-white">メインコンテンツ</div>
    </div>
  </div>
  <div class="practice-4-container">
    <div class="grid grid-cols-2 gap-4">
      <div class="h-48 bg-amber-400 p-4">amber</div>
      <div class="h-48 bg-blue-400 p-4">blue</div>
      <div class="h-48 bg-red-400 p-4">red</div>
      <div class="h-48 bg-green-400 p-4">green</div>
    </div>
  </div>
  <div class="practice-5-container">
    <div class="max-w-4xl mx-auto h-64 bg-purple-400 px-4">
      practice-5
    </div>
  </div>
</div>

画像も添付しておきます。Tailwind PLAYでスクショしました。

学習環境

学習環境/
├── ブラウザ: https://play.tailwindcss.com/
├── 対象ユーティリティ: w-*, h-*, size-*
└── 参照ドキュメント: Tailwind CSS 公式サイト

基礎問題フェーズ（問題1〜5）

基礎問題1: 固定値の幅と高さ

実行した操作:

<div class="w-64 h-32 bg-blue-500">基礎問題1</div>

操作の意味:

• w-64: 幅を64（16rem）に設定
• h-32: 高さを32（8rem）に設定
• Tailwind CSS では、数値 × 0.25rem が実際のサイズになる

操作の意図:
固定値による幅・高さ指定の基本を理解する。数値の計算方法（64 × 0.25rem = 16rem）を体感的に学ぶため、具体的なサイズの矩形を作成しました。

実行結果:

結果の解説:
青い矩形が正しく表示されました。w-64（16rem）× h-32（8rem）のサイズになっています。Tailwind CSS の数値システムでは、w-16 は 4rem、w-64 は 16rem というように、数値に 0.25 を掛けた値が rem 単位で適用されることが確認できました。

基礎問題2: 相対値（親要素と画面基準）

実行した操作:

<div class="w-full h-screen bg-gray-400">基礎問題2</div>

操作の意味:

• w-full: 幅を親要素の100%に設定
• h-screen: 高さを画面全体（viewport）の高さに設定

操作の意図:
相対値による指定方法を学ぶため、親要素基準（full）と画面基準（screen）の2種類を組み合わせました。企業サイトのヒーローセクションなど、画面全体を使うレイアウトで頻繁に使用されるパターンです。

実行結果:

結果の解説:
グレーの矩形が画面全体に広がりました。w-full により横幅が親要素いっぱいに、h-screen により縦幅が viewport の高さいっぱいになっています。full と screen の違いを理解することが、レスポンシブデザインを実装する上で重要です。

基礎問題3: 分数値による幅指定

実行した操作:

<div class="flex">
  <div class="w-1/3 h-24 bg-red-400">基礎問題3-a</div>
  <div class="w-2/3 h-24 bg-blue-400">基礎問題3-b</div>
</div>

操作の意味:

• 親要素に flex を設定して子要素を横並びに配置
• w-1/3: 幅を親要素の1/3（約33.33%）に設定
• w-2/3: 幅を親要素の2/3（約66.67%）に設定

操作の意図:
分数値による柔軟なレイアウト分割を学ぶため、1:2 の比率で要素を配置しました。企業サイトのサイドバー付きレイアウトやカラムレイアウトで頻繁に使用されるパターンです。

実行結果:

結果の解説:
赤と青の2つの矩形が 1:2 の比率で横並びに表示されました。w-1/3 と w-2/3 を組み合わせることで、合計100%になり親要素にぴったり収まります。Tailwind CSS では w-1/2、w-1/4、w-1/5 など、様々な分数値が用意されています。

基礎問題4: 幅と高さの同時指定

実行した操作:

<div class="size-16 bg-purple-500">基礎問題4</div>

操作の意味:

• size-16: 幅と高さを同時に16（4rem）に設定
• w-16 h-16 と同じ意味

操作の意図:
正方形を作成する際に便利な size-* ユーティリティを学ぶため、簡潔な記法で実装しました。コードの可読性が向上し、特にアイコンやボタンなど正方形の要素を多用する場面で効果的です。

実行結果:

結果の解説:
紫の正方形（4rem × 4rem）が表示されました。size-16 は w-16 h-16 の省略記法で、1つのクラスで幅と高さを同時に指定できます。正方形を作成する際は、この size-* を使うことでコードがすっきりします。

基礎問題5: 高さの自動調整

実行した操作:

<div class="w-1/2 h-auto bg-yellow-400 p-4">基礎問題5</div>

操作の意味:

• w-1/2: 幅を親要素の50%に設定
• h-auto: 高さをコンテンツに合わせて自動調整
• p-4: 内側に padding（1rem）を追加

操作の意図:
高さを固定せず、コンテンツ量に応じて可変にする方法を学ぶため、h-auto を使用しました。テキストコンテンツの量が変動する場合に必須のテクニックです。

実行結果:

結果の解説:
黄色の矩形が親要素の50%幅で、コンテンツに応じた高さで表示されました。h-auto により、テキストの量が増えても自動的に高さが調整されます。p-4 で内側に余白を追加することで、コンテンツが読みやすくなっています。

基礎問題を通して、固定値・相対値・分数値の3種類の指定方法を習得できました。それでは、これらの知識を活かして実践問題に挑戦していきましょう。

実践問題フェーズ（問題6〜10）

実践問題1: ヒーローセクション

実行した操作:

<div class="flex flex-col w-full h-4/5 bg-gray-800">
  <div class="h-auto">見出しエリア</div>
  <div class="h-auto">コンテンツエリア</div>
</div>

操作の意味:

• flex flex-col: 子要素を縦方向に配置
• w-full: 幅を親要素の100%に設定
• h-4/5: 高さを画面の80%に設定
• bg-gray-800: ダークグレーの背景色

操作の意図:
企業サイトのトップページでよく見られるヒーローセクション（画面の大部分を占める大きなエリア）を実装しました。h-4/5 で画面の80%を使うことで、インパクトのある見た目になります。

実行結果:

結果の解説:
画面の80%を占めるダークグレーのヒーローセクションが表示されました。flex-col により子要素が縦方向に並び、企業サイトで頻繁に使用される「見出し + コンテンツ」の構造を実現できています。実際の企業サイトでは、h-screen（100%）や h-4/5（80%）がよく使われます。

実践問題2: 3カラムレイアウト

実行した操作:

<div class="flex">
  <div class="w-1/3 h-40 bg-blue-400 p-4">エリア1</div>
  <div class="w-1/3 h-40 bg-green-400 p-4">エリア2</div>
  <div class="w-1/3 h-40 bg-red-400 p-4">エリア3</div>
</div>

操作の意味:

• 親要素に flex を設定して子要素を横並びに配置
• 各要素を w-1/3 で均等に3分割
• h-40: 高さを10rem に統一
• p-4: 各要素に padding を追加

操作の意図:
企業サイトのサービス紹介やカード型レイアウトで頻出する3カラムレイアウトを実装しました。各カードが均等な幅（33.33%ずつ）で並び、視覚的にバランスの取れたデザインになります。

実行結果:

結果の解説:
3つのカードが均等に横並びで表示されました。w-1/3 を3つ並べることで、合計100%になり親要素にぴったり収まります。企業サイトでは、製品紹介やサービス一覧でこのパターンがよく使われます。

実践問題3: サイドバー付きレイアウト

実行した操作:

<div class="flex">
  <div class="w-64 h-screen bg-gray-400">サイドバー</div>
  <div class="flex-1 h-screen bg-white">メインコンテンツ</div>
</div>

操作の意味:

• 左側: w-64（16rem）の固定幅サイドバー
• 右側: flex-1 で残りの領域を自動的に埋める
• 両方とも h-screen で画面全体の高さを確保

操作の意図:
管理画面やドキュメントサイトで頻出するサイドバー付きレイアウトを実装しました。flex-1 を使うことで、画面サイズに関わらず右側が残りのスペースを自動で埋めます。

実行結果:

結果の解説:
左側に固定幅（16rem）のサイドバー、右側に可変幅のメインコンテンツエリアが表示されました。flex-1 は flex-grow: 1 と同じ意味で、残りのスペースを自動で埋める便利なユーティリティです。企業の管理画面やダッシュボードでは必須のレイアウトパターンです。

実践問題4: グリッドレイアウト（2行×2列）

実行した操作:

<div class="grid grid-cols-2 gap-4">
  <div class="h-48 bg-amber-400 p-4">amber</div>
  <div class="h-48 bg-blue-400 p-4">blue</div>
  <div class="h-48 bg-red-400 p-4">red</div>
  <div class="h-48 bg-green-400 p-4">green</div>
</div>

操作の意味:

• grid: グリッドレイアウトを有効化
• grid-cols-2: 2列のグリッドを作成
• gap-4: カード間に1remのスペースを追加
• h-48: 各カードの高さを12rem に統一

操作の意図:
企業サイトのポートフォリオや製品一覧で頻出するカード型グリッドレイアウトを実装しました。gap-4 により、カード間に適切な余白が生まれ、見やすいデザインになります。

実行結果:

結果の解説:
2行×2列のカードが、適切な間隔で配置されました。gap-4 により、行と列の両方に1remのスペースが自動的に追加されます。Flexbox では実現が難しい均等な間隔を、Grid レイアウトでは簡単に実装できます。

実践問題5: レスポンシブコンテナ

実行した操作:

<div class="max-w-4xl mx-auto h-64 bg-purple-400 px-4">
  practice-5
</div>

操作の意味:

• max-w-4xl: 最大幅を約56rem に制限
• mx-auto: 左右中央に配置
• h-64: 高さを16rem に設定
• px-4: 左右に1rem の padding を追加

操作の意図:
大画面でもコンテンツが広がりすぎないよう、最大幅を制限したレスポンシブコンテナを実装しました。max-w-* と mx-auto の組み合わせは、記事コンテンツやフォームで頻繁に使用されるパターンです。

実行結果:

結果の解説:
中央に配置された、最大幅56remのコンテナが表示されました。大画面でも横幅が広がりすぎないため、テキストの可読性が保たれます。px-4 により、モバイル表示時にも左右に余白が確保され、画面端にコンテンツが張り付かない設計になっています。

実践問題を通して、企業サイトで頻出する5つのレイアウトパターンを習得できました。基礎問題で学んだ知識を組み合わせることで、実用的なデザインを実装できることが確認できましたね。

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

疑問1: w-16 と w-64 の数値の意味がわからない

最初の基礎問題1で、「幅を64（16rem）に設定」という指示を見て、w-64 と書くべきところを w-16 と書いてしまいました。

原因:
Tailwind CSS の数値システムを理解していなかったため、「16rem = w-16」だと勘違いしていました。

解決方法:
Tailwind CSS では、数値 × 0.25rem が実際のサイズになります。つまり：

• w-16 = 16 × 0.25rem = 4rem
• w-64 = 64 × 0.25rem = 16rem

この法則を理解してから、数値の指定がスムーズになりました。

疑問2: 画面全体の高さの指定方法がわからない

基礎問題2で、「高さを画面全体（viewport）の高さに設定」という要件に対して、最初は h-full を使ってしまいました。

原因:
full と screen の違いを理解していませんでした。

解決方法:

• h-full: 親要素の100%
• h-screen: 画面（viewport）全体の高さ

ヒントをもらって h-screen に修正したところ、正しく画面全体の高さになりました。この違いを理解することが、レスポンシブデザインを実装する上で重要です。

失敗3: size ユーティリティの存在を知らなかった

基礎問題4で、「幅と高さを同時に設定」という要件に対して、wh-16 という存在しないユーティリティを書いてしまいました。

原因:
w- と h- を組み合わせた略記法があると勝手に想像してしまいました。

解決方法:
正しくは size-16 です。これは w-16 h-16 の省略記法で、正方形を作る際に便利です。公式ドキュメントを確認することの重要性を実感しました。

失敗4: 分数値の書き方を間違えた

基礎問題5で、「幅を親要素の50%に設定」という要件に対して、最初は w-2/1 と書いてしまいました。

原因:
分数の書き方を逆に理解していました（分子と分母が逆）。

解決方法:
正しくは w-1/2 です。Tailwind CSS の分数値は：

• w-1/2 = 50%（1 ÷ 2）
• w-1/3 = 33.33%（1 ÷ 3）
• w-2/3 = 66.67%（2 ÷ 3）

分数の読み方をそのまま書けば良いと理解してから、間違えなくなりました。

疑問5: gap-4 を忘れた理由

実践問題4で、グリッドレイアウトを作る際、gap-4 を最初入れ忘れていました。

原因:
要件に「カード間にスペース」と書いてあったのを見落としていました。

解決方法:
Grid レイアウトでは、gap-* を使ってカード間のスペースを指定します。これを忘れると、カードがぴったりくっついて見づらくなります。指摘を受けて gap-4 を追加したところ、見やすいレイアウトになりました。

これらの疑問や失敗を通して、Tailwind CSS の基本的な文法やユーティリティの使い方を体系的に学ぶことができました。特に、数値システム（× 0.25rem）と full / screen の違いを理解することが重要だと実感しています。

今回のまとめ

お疲れ様でした。今回は Tailwind CSS width height utilities を、基礎問題5問・実践問題5問の合計10問を通して学習しました。

学習内容:

• 固定値・相対値・分数値の3種類の指定方法: w-64（固定）、w-full/h-screen（相対）、w-1/3（分数）を使い分けることで、様々なレイアウトを実装できます
• Flexbox と Grid を活用したレイアウト: 企業サイトで頻出するヒーローセクション、3カラム、サイドバー、グリッド、レスポンシブコンテナの5パターンを習得しました
• size-* ユーティリティと gap-* の活用: 正方形を作る際の size-* や、Grid レイアウトでの gap-* など、コードを簡潔にする便利なユーティリティを学びました

Tailwind CSS の width height utilities は、レイアウトを構築する上で最も基本的かつ重要なユーティリティです。今回学んだ知識を活かして、実際のプロジェクトで様々なレイアウトに挑戦してみてください。また別の記事でお会いしましょう！

関連記事

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

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 ...

続きを見る