Tailwind CSS Width Height 使い方完全ガイド｜w-full・h-screen・size-* の違いがわかる

Tailwind CSS Width Height の使い方を解説。w-full と w-screen の違い、size-* ショートハンド、v4 の新単位（dvh/svh/lvh）まで、実例とコードで違いがわかるようにまとめました。

主要クラス早見表

Tailwind CSS Width Height の使い方をサクッと知りたい方のために、まずは頻繁に使うクラスを早見表で確認しましょう。「この章だけで全体像をつかみたい」場合は、ここを読めば十分実用的です。

width 主要クラス

サイト制作で出番の多い width 系クラスを一覧にまとめました。

クラス	効果	使う場面
w-full	親要素の幅 100%	親に合わせて広げる（最頻出）
w-screen	ビューポート幅 100%	画面いっぱいに広げる（ヘッダー等）
w-auto	コンテンツに応じた幅	デフォルト動作に戻す
w-1/2	親の50%	半々に分割
w-fit	コンテンツに合わせた幅	ボタンなど中身に合わせる
w-min	最小コンテンツ幅	折返し点まで縮める
w-max	最大コンテンツ幅	折返さず横に伸ばす

w-full vs w-screen の違い

「両方とも幅いっぱいに見える」と混同しがちな2つのクラスを整理します。

比較項目	w-full	w-screen
基準	親要素	ビューポート（画面幅）
出力CSS	width: 100%	width: 100vw
一般的な用途	コンテナ内の要素を親いっぱいに	ヘッダー・フッターなど画面幅いっぱいに
コンテナ内での使用	◎ 推奨	△ 親を無視するためズレる原因に
スクロールバー考慮	影響なし	スクロールバー幅を含むため横スクロール発生の可能性
レスポンシブでの安定性	◎ 安定	△ モバイルで意図しない挙動

w-* + h-* vs size-*（v3.4以降のショートハンド）

正方形要素（アイコン・アバター等）を作るとき、size-* を使うとコードがすっきりします。

書き方	コード例	用途
個別指定（w-* + h-*）	<div class="w-12 h-12">	幅と高さを別々に指定したい
ショートハンド（size-*）	<div class="size-12">	正方形（アイコン・アバター等）
異なる値が必要なケース	<div class="w-32 h-12">	横長/縦長（size-*は使えない）

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

この記事では、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 の違いを理解することが重要だと実感しています。

よくある悩み：w-full と w-screen の違い

Tailwind CSS で width を指定するとき、w-full と w-screen のどちらを使えばいいか迷ったことはありませんか？両方とも「画面いっぱいに広げる」イメージですが、基準が違うため使うべき場面も異なります。

w-full を使う場面（親要素いっぱい）

w-full は 親要素の幅 100% を意味します。出力される CSS は width: 100% です。

<div class="max-w-md mx-auto">
  <button class="w-full bg-blue-500 text-white py-2">
    送信する
  </button>
</div>

ボタンが親（max-w-md）の幅いっぱいに広がります。コンテナ内で要素を横に伸ばしたい時はこれが基本です。

w-screen を使う場面（画面いっぱい）

w-screen は ビューポートの幅 100% を意味します。出力される CSS は width: 100vw です。

<header class="w-screen bg-slate-800 text-white py-4">
  サイトロゴ
</header>

ヘッダーやフッターを画面いっぱいに広げたいときに使います。

よくある失敗：コンテナの中で w-screen を使う

以下のような書き方は、横スクロールが発生する原因になります。

<div class="max-w-3xl mx-auto p-4">
  <div class="w-screen bg-red-500">
    <!-- 親(max-w-3xl)を無視して画面幅まで広がる -->
  </div>
</div>

w-screen は親要素を無視してビューポート幅になるため、コンテナの外にはみ出します。さらにスクロールバーの幅も含むため、わずかに横スクロールが発生することがあります。

コンテナ内では原則 w-full を使うと覚えておきましょう。

よくある悩み：h-full が効かない時の対処

<div class="h-full"> を指定したのに、なぜか高さが反映されない…そんな経験はありませんか？これは Tailwind CSS 特有の問題ではなく、CSS の height: 100% の仕様に起因します。

原因：親要素に高さが指定されていない

h-full は height: 100% を出力します。100% は親要素の高さに対しての100% なので、親要素に明示的な高さがないと計算できず、高さが反映されません。

<!-- NG: 親に高さがないため h-full が効かない -->
<div>
  <div class="h-full bg-blue-500">
    高さが反映されない
  </div>
</div>

解決策1: 親要素に高さを指定する

<div class="h-screen">
  <div class="h-full bg-blue-500">
    親が画面の高さなのでh-fullが効く
  </div>
</div>

解決策2: min-h-screen を使う

ページ全体を画面の高さ以上にしたい場合は、h-full ではなく min-h-screen を直接使うのが簡単です。

<div class="min-h-screen bg-gray-100">
  ページ全体の最小高さがビューポート分
</div>

解決策3: Flexbox や Grid で高さを揃える

兄弟要素間で高さを揃えたいだけなら、flex や grid の伸縮機能を使う方が安全です。

<div class="flex">
  <div class="bg-blue-500 p-4">短い</div>
  <div class="bg-green-500 p-4">
    長い長い長い<br>長い長い長い
  </div>
</div>
<!-- flex の子要素は自動で高さが揃う -->

より詳しく：3つの典型パターンで失敗を回避

h-full が効かないケースには、他にも「親が display: flex の場合」「min-height ではなく height でないと効かないケース」など複数のパターンがあります。

詳しい原因と対処は、別記事「Tailwind CSS Width / Height で失敗しやすい3つのテクニック」で解説しています。

Tailwind v4 の新しいビューポート単位（dvh / svh / lvh）

Tailwind CSS v4 では、モバイル端末のアドレスバー問題に対応する新しいビューポート単位が追加されました。「h-screen で画面いっぱいにしたつもりが、モバイルでアドレスバーの分だけずれて見える…」そんな悩みを解決するクラスです。

従来の問題：vh（h-screen）とアドレスバー

iOS Safari や Android Chrome では、スクロール状態によってアドレスバーが表示・非表示に切り替わります。これにより、100vh（h-screen）を指定した要素が、アドレスバー出現時にはみ出したり、隠れた時に余白ができたりすることがあります。

特にヒーローセクション（ファーストビュー）で「画面ぴったりに見せたい」時に、この挙動が表示崩れの原因になります。

v4で追加された3つの新単位

クラス	意味	動作
h-dvh	Dynamic Viewport Height	アドレスバーの表示変化に追従して動的に変わる
h-svh	Small Viewport Height	アドレスバーが見えている時の高さ（最小）
h-lvh	Large Viewport Height	アドレスバーが隠れている時の高さ（最大）

使い分けの目安

シーン	推奨クラス	理由
ファーストビュー（ヒーローセクション）	h-svh	アドレスバー出現時もコンテンツが切れない
スクロール後の固定エリア	h-lvh	表示領域を最大化できる
モーダル・サイドバー	h-dvh	常に画面ぴったりに追従

実例

<!-- ヒーローセクション：アドレスバーを考慮した安全な高さ -->
<section class="h-svh bg-gradient-to-b from-blue-500 to-purple-500">
  <h1>サイトタイトル</h1>
</section>

<!-- モーダル：アドレスバーの動きに追従 -->
<div class="h-dvh w-screen fixed inset-0 bg-white">
  <!-- モーダルコンテンツ -->
</div>

ブラウザ対応とフォールバック

iOS Safari 15.4+、Chrome 108+、Firefox 101+ で対応しています。古いブラウザ向けには h-screen を先に指定しておくと、後勝ちのCSSルールで自動的にフォールバックします。

<div class="h-screen h-dvh">
  対応ブラウザでは h-dvh、未対応では h-screen
</div>

補足: 幅にも w-dvw / w-svw / w-lvw が用意されていますが、実用上は高さ系（dvh/svh/lvh）の方が圧倒的に出番が多いです。

今回のまとめ

お疲れ様でした。今回は Tailwind CSS width height utilities を、基礎問題5問・実践問題5問の合計10問と、よくある悩みの解説、v4 の新ビューポート単位までを通して学習しました。

学習内容:

• 主要クラス早見表: w-full、w-screen、w-auto、分数値クラスなどの使い分けと、size-* ショートハンドの活用法を整理しました
• 固定値・相対値・分数値の3種類の指定方法: w-64（固定）、w-full/h-screen（相対）、w-1/3（分数）を使い分けることで、様々なレイアウトを実装できます
• Flexbox と Grid を活用したレイアウト: 企業サイトで頻出するヒーローセクション、3カラム、サイドバー、グリッド、レスポンシブコンテナの5パターンを習得しました
• size-* ユーティリティと gap-* の活用: 正方形を作る際の size-* や、Grid レイアウトでの gap-* など、コードを簡潔にする便利なユーティリティを学びました
• よくある悩みの解決策: w-full vs w-screen の使い分け、h-full が効かない時の3つの解決策（親要素に高さ指定 / min-h-screen / Flexbox・Grid）を整理しました
• Tailwind v4 の新ビューポート単位: モバイルのアドレスバー問題に対応する h-dvh / h-svh / h-lvh の使い分けと、h-screen でのフォールバック設計を理解しました

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 使い方完全ガイド｜w-full・h-screen・size-* の違いがわかる

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

続きを見る

【実践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 ...

続きを見る