サイジングと配置

この章では、Tailwind CSS で要素のサイズと配置を制御する方法を学びます。

幅 (Width)

固定幅

<div class="w-0">0px</div>
<div class="w-1">4px</div>
<div class="w-4">16px</div>
<div class="w-8">32px</div>
<div class="w-16">64px</div>
<div class="w-32">128px</div>
<div class="w-64">256px</div>
<div class="w-96">384px</div>

パーセント幅

<div class="w-1/2">50%</div>
<div class="w-1/3">33.333%</div>
<div class="w-2/3">66.666%</div>
<div class="w-1/4">25%</div>
<div class="w-3/4">75%</div>
<div class="w-full">100%</div>

特殊な幅

<div class="w-auto">自動</div>
<div class="w-screen">ビューポート幅</div>
<div class="w-min">最小コンテンツ幅</div>
<div class="w-max">最大コンテンツ幅</div>
<div class="w-fit">フィット</div>

v4 の任意の値

<!-- v4 では角括弧なしで任意の値を指定可能 -->
<div class="w-200">50rem (= 200 × 0.25rem)</div>
<div class="w-[200px]">200px</div>
<div class="w-[50vw]">50vw</div>

w-200 の計算式に注意

w-200 は calc(var(--spacing) * 200) として計算されます。デフォルトの --spacing: 0.25rem では 50rem (800px) となり、200px ではありません。特定の px 値を指定したい場合は w-[200px] のようにブラケット構文を使用してください。

高さ (Height)

固定高さ

<div class="h-8">32px</div>
<div class="h-16">64px</div>
<div class="h-32">128px</div>
<div class="h-64">256px</div>

特殊な高さ

<div class="h-auto">自動</div>
<div class="h-full">100%</div>
<div class="h-screen">ビューポート高さ</div>
<div class="h-svh">小さいビューポート高さ</div>
<div class="h-lvh">大きいビューポート高さ</div>
<div class="h-dvh">動的ビューポート高さ</div>
<div class="h-min">最小コンテンツ高さ</div>
<div class="h-max">最大コンテンツ高さ</div>
<div class="h-fit">フィット</div>

svh / lvh / dvh の意味

svh / lvh / dvh はモバイルブラウザのアドレスバーを考慮した新しいビューポート単位です。

最小・最大サイズ

最小幅 (min-width)

<div class="min-w-0">0</div>
<div class="min-w-full">100%</div>
<div class="min-w-min">min-content</div>
<div class="min-w-max">max-content</div>
<div class="min-w-fit">fit-content</div>

最大幅 (max-width)

<div class="max-w-xs">320px</div>
<div class="max-w-sm">384px</div>
<div class="max-w-md">448px</div>
<div class="max-w-lg">512px</div>
<div class="max-w-xl">576px</div>
<div class="max-w-2xl">672px</div>
<div class="max-w-3xl">768px</div>
<div class="max-w-4xl">896px</div>
<div class="max-w-5xl">1024px</div>
<div class="max-w-6xl">1152px</div>
<div class="max-w-7xl">1280px</div>
<div class="max-w-full">100%</div>
<div class="max-w-none">なし</div>
<div class="max-w-prose">65ch (v4 非推奨・docs 非掲載。現行の代替は max-w-[65ch])</div>

Tailwind v4 での変更

v3 にあった max-w-screen-sm〜max-w-screen-2xl (breakpoint 幅をそのまま max-width にする utility) は、v4 では docs 非掲載 になりました。v4 alpha で一旦削除されましたが (Issue #13267)、互換レイヤーで復活しており動作自体はします。新規コードでは任意値 max-w-[640px] を使うか、@theme の --container-* で名前付きの値を定義するのが推奨です。

最小・最大高さ

<div class="min-h-0">0</div>
<div class="min-h-full">100%</div>
<div class="min-h-screen">100vh</div>
<div class="min-h-svh">100svh</div>

<div class="max-h-32">128px</div>
<div class="max-h-screen">100vh</div>
<div class="max-h-none">なし</div>

サイズ (幅と高さを同時に)

<div class="size-8">32px × 32px</div>
<div class="size-16">64px × 64px</div>
<div class="size-full">100% × 100%</div>

位置指定 (Position)

位置の種類

<div class="static">静的 (デフォルト)</div>
<div class="relative">相対</div>
<div class="absolute">絶対</div>
<div class="fixed">固定</div>
<div class="sticky">スティッキー</div>

位置の指定

<div class="absolute top-0 left-0">左上</div>
<div class="absolute top-0 right-0">右上</div>
<div class="absolute bottom-0 left-0">左下</div>
<div class="absolute bottom-0 right-0">右下</div>
<div class="absolute inset-0">全体に広がる</div>
<div class="absolute inset-x-0">左右に広がる</div>
<div class="absolute inset-y-0">上下に広がる</div>

位置の値

<div class="top-0">0px</div>
<div class="top-4">16px</div>
<div class="top-1/2">50%</div>
<div class="top-full">100%</div>
<div class="-top-4">-16px (負の値)</div>

Z-Index

<div class="z-0">0</div>
<div class="z-10">10</div>
<div class="z-20">20</div>
<div class="z-30">30</div>
<div class="z-40">40</div>
<div class="z-50">50</div>
<div class="z-auto">auto</div>
<div class="-z-10">-10 (負の値)</div>

オブジェクトフィット

画像や動画のフィット方法を制御します。

<img class="object-contain" src="..." />
<img class="object-cover" src="..." />
<img class="object-fill" src="..." />
<img class="object-none" src="..." />
<img class="object-scale-down" src="..." />

オブジェクトポジション

<img class="object-cover object-center" src="..." />
<img class="object-cover object-top" src="..." />
<img class="object-cover object-bottom" src="..." />
<img class="object-cover object-left" src="..." />
<img class="object-cover object-right" src="..." />

オーバーフロー

<div class="overflow-auto">自動</div>
<div class="overflow-hidden">非表示</div>
<div class="overflow-visible">表示</div>
<div class="overflow-scroll">スクロール</div>
<div class="overflow-x-auto">横スクロール</div>
<div class="overflow-y-auto">縦スクロール</div>

表示 (Display)

<div class="block">ブロック</div>
<div class="inline">インライン</div>
<div class="inline-block">インラインブロック</div>
<div class="flex">フレックス</div>
<div class="inline-flex">インラインフレックス</div>
<div class="grid">グリッド</div>
<div class="inline-grid">インライングリッド</div>
<div class="hidden">非表示</div>
<div class="contents">コンテンツ</div>

可視性

<div class="visible">表示</div>
<div class="invisible">非表示 (スペースは保持)</div>
<div class="collapse">折りたたみ</div>

アスペクト比

<div class="aspect-auto">自動</div>
<div class="aspect-square">1:1</div>
<div class="aspect-video">16:9</div>
<div class="aspect-[4/3]">4:3</div>

実践例

画面中央配置

<!-- 方法 1: Flexbox -->
<div class="min-h-screen flex items-center justify-center">
  <div class="p-8 bg-white rounded-lg shadow-sm">
    中央に配置されたコンテンツ
  </div>
</div>

<!-- 方法 2: Grid -->
<div class="min-h-screen grid place-items-center">
  <div class="p-8 bg-white rounded-lg shadow-sm">
    中央に配置されたコンテンツ
  </div>
</div>

<!-- 方法 3: Absolute + Transform -->
<div class="relative min-h-screen">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
              p-8 bg-white rounded-lg shadow-sm">
    中央に配置されたコンテンツ
  </div>
</div>

固定ヘッダー

<header class="fixed top-0 inset-x-0 z-50 bg-white shadow-sm">
  <nav class="max-w-7xl mx-auto px-4 h-16 flex items-center">
    <a href="/" class="font-bold text-xl">Logo</a>
  </nav>
</header>
<main class="pt-16">
  <!-- ヘッダーの高さ分のパディング -->
</main>

スティッキーサイドバー

<div class="flex">
  <aside class="w-64 sticky top-0 h-screen overflow-y-auto">
    サイドバー
  </aside>
  <main class="flex-1">
    メインコンテンツ
  </main>
</div>

カード画像

<div class="bg-white rounded-lg shadow-sm overflow-hidden">
  <div class="aspect-video relative">
    <img
      src="..."
      class="absolute inset-0 w-full h-full object-cover"
    />
  </div>
  <div class="p-4">
    <h3 class="font-bold">タイトル</h3>
  </div>
</div>

モーダル

<!-- オーバーレイ -->
<div class="fixed inset-0 z-50 bg-black/50 flex items-center justify-center">
  <!-- モーダル本体 -->
  <div class="relative bg-white rounded-lg shadow-xl max-w-lg w-full mx-4 max-h-[90vh] overflow-y-auto">
    <div class="p-6">
      <h2 class="text-xl font-bold">モーダルタイトル</h2>
      <p class="mt-4">モーダルの内容...</p>
    </div>
    <!-- 閉じるボタン -->
    <button class="absolute top-4 right-4">×</button>
  </div>
</div>

レスポンシブ画像

<div class="relative w-full aspect-[16/9]">
  <img
    src="..."
    class="absolute inset-0 w-full h-full object-cover rounded-lg"
  />
</div>

まとめ

• w-* / h-* で幅と高さ
• min-* / max-* で最小・最大サイズ
• size-* で幅と高さを同時に指定
• relative / absolute / fixed / sticky で位置指定
• top-* / right-* / bottom-* / left-* で位置
• z-* で重なり順
• object-* で画像のフィット方法
• aspect-* でアスペクト比

次に読む

• レスポンシブデザイン — 画面幅で配置を切り替える
• 状態バリアント — hover / focus でインタラクティブに
• Tailwind CSS ガイド 目次 — 全 18 章の構成に戻る