TailwindCSS width height テクニック三選｜h-fullやw-fullが効かないときの解決法

TailwindCSS width height（幅・高さ）が思い通りにならない？h-full が効かない、w-full で画面幅にならない、max-w が効かないなど、よくある3つの落とし穴と解決法を実例付きで解説します。

この問題、見覚えありませんか？

TailwindCSS width height（幅・高さ）の指定で「効かない」と感じたことはありませんか？

「h-full を付けたのに高さが100%にならない」「w-full で画面幅いっぱいにならない」——こうした悩みを抱える方は多いのではないでしょうか。

今回は、TailwindCSS の幅・高さ指定でよくある3つの落とし穴と、その解決法を一緒に学んでいきましょう。

【体験談】私がこの記事を書いたきっかけ

私自身、今回の失敗例を整理していて「これは自分も同じミスをしそうだ」と感じました。

理由は、親要素が必要だということを知らなかったからです。

公式ドキュメントを見ても、「親要素に高さが必要」「親の制約を受ける」といったポイントを読み取れる自信がありません。このミスをする人は多いのではないかと思います。

実際の開発では時間の余裕がないことも多く、こうした「読み取れない部分」で時間がかかるのは厳しいですよね。

だからこそ、この記事でつまずきやすいポイントを整理しておきたいと思いました。

テクニック三選

それでは、TailwindCSS の width / height でよくある落とし穴と解決法を3つ紹介します。

テクニック1: h-full を付けたのに高さが100%にならない

誤解シナリオ:

1. 読者Aさんは、サイドバーを親要素の高さいっぱいに広げたい
2. 公式ドキュメント（https://tailwindcss.com/docs/height）で h-full を見つける
3. 「height: 100% か、これだ！」と思い h-full を適用
4. 「あれ？高さが変わらない…」と困惑

NGパターン:

<div class="flex gap-4">
  <div class="w-48 bg-white p-4 h-full">
    サイドバー（h-full なのに高さが広がらない）
  </div>
  <div class="flex-1 bg-white p-4">
    <p>メインコンテンツ</p>
    <p>複数行あります</p>
    <p>さらに行があります</p>
  </div>
</div>

OKパターン:

<div class="flex gap-4 items-stretch">
  <div class="w-48 bg-white p-4">
    サイドバー（items-stretch で自動的に高さが揃う）
  </div>
  <div class="flex-1 bg-white p-4">
    <p>メインコンテンツ</p>
    <p>複数行あります</p>
    <p>さらに行があります</p>
  </div>
</div>

解説:

h-full（height: 100%）は親要素に明示的な高さがないと効かない。CSSの仕様で、%指定の高さは親の高さを基準にするため、親に高さがなければ計算できません。

flexboxで横並びにした場合、items-stretch（デフォルト値）を使えば子要素は自動的に高さが揃います。

ポイント:

flexboxで子要素の高さを揃えたいときは、h-full ではなく items-stretch（デフォルト）を活用しましょう。

---

テクニック2: w-full を付けたのに画面幅いっぱいにならない

誤解シナリオ:

1. 読者Bさんは、ヒーローセクションを画面幅いっぱいに広げたい
2. 公式ドキュメント（https://tailwindcss.com/docs/width）で w-full を見つける
3. 「width: 100% だから画面いっぱいになるはず！」と思い w-full を適用
4. 「あれ？左右に余白がある…」と困惑

NGパターン:

<div class="max-w-4xl mx-auto">
  <div class="w-full bg-white p-4">
    ヒーローセクション（w-full なのに画面幅いっぱいにならない）
  </div>
  <div class="bg-white p-4 mt-4">
    通常コンテンツ
  </div>
</div>

OKパターン:

<div class="w-screen -mx-8 bg-white p-4">
  ヒーローセクション（w-screen で画面幅いっぱい）
</div>
<div class="max-w-4xl mx-auto">
  <div class="bg-white p-4 mt-4">
    通常コンテンツ
  </div>
</div>

解説:

w-full は親要素の幅100%であり、画面幅ではありません。親に max-w-4xl や padding があれば、その制約を受けます。

画面幅いっぱいにしたい場合は w-screen（100vw）を使います。ただし、親の padding 分はみ出すので、-mx-8 のようなネガティブマージンで調整が必要です。

ポイント:

画面幅いっぱいに広げたいときは、w-full ではなく w-screen を使いましょう。

---

テクニック3: max-w-* を付けたのにテキストがはみ出す

誤解シナリオ:

1. 読者Cさんは、カード内の長いURLが幅をはみ出すので制限したい
2. 公式ドキュメント（https://tailwindcss.com/docs/max-width）で max-w-xs を見つける
3. 「これで幅を制限できる！」と思い flex の子要素に max-w-xs を適用
4. 「あれ？URLがはみ出して max-w が効いてない…」と困惑

NGパターン:

<div class="flex gap-4 bg-white p-4 rounded">
  <div class="max-w-xs bg-blue-100 p-2 rounded">
    https://example.com/very/long/path/to/resource/that/keeps/going
  </div>
  <div class="bg-gray-100 p-2 rounded">右側</div>
</div>

OKパターン:

<div class="flex gap-4 bg-white p-4 rounded">
  <div class="max-w-xs min-w-0 break-all bg-blue-100 p-2 rounded">
    https://example.com/very/long/path/to/resource/that/keeps/going
  </div>
  <div class="bg-gray-100 p-2 rounded">右側</div>
</div>

解説:

flexbox の子要素は min-width: auto がデフォルトで、コンテンツの最小幅より小さくなりません。長いURLなどスペースのない文字列は折り返されず、はみ出してしまいます。

min-w-0 で最小幅の制約を解除し、break-all で単語の途中でも折り返すようにすると、max-w-* 内に収まります。

ポイント:

flex の子要素で長い文字列がはみ出すときは、min-w-0 と break-all を追加しましょう。

---

まとめ

TailwindCSS width height テクニック三選を紹介しました。

今回学んだポイントをおさらいしましょう：

• h-full が効かない → flexboxなら items-stretch（デフォルト）を活用
• w-full で画面幅にならない → w-screen を使う
• max-w が効かない → min-w-0 と break-all を追加

これらは公式ドキュメントを見ただけでは気づきにくいポイントです。ぜひ実際のコーディングで活用してみてください。

また別の記事でお会いしましょう。

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

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

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

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

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

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

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

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