Tailwind CSS 高度なレイアウト技法

CSS Grid 習得

複雑なグリッドレイアウト

<!-- Holy Grail Layout -->
<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
  <header class="bg-white shadow">Header</header>
  <div class="grid grid-cols-[250px_1fr_300px]">
    <aside class="bg-gray-50 p-4">Sidebar</aside>
    <main class="p-6">Main Content</main>
    <aside class="bg-gray-50 p-4">Right Sidebar</aside>
  </div>
  <footer class="bg-gray-800 text-white">Footer</footer>
</div>

<!-- Responsive Holy Grail -->
<div class="grid min-h-screen grid-rows-[auto_1fr_auto]">
  <header>Header</header>
  <div class="grid grid-cols-1 md:grid-cols-[250px_1fr] lg:grid-cols-[250px_1fr_300px]">
    <aside class="order-2 md:order-1">Sidebar</aside>
    <main class="order-1 md:order-2">Main</main>
    <aside class="order-3 hidden lg:block">Right</aside>
  </div>
  <footer>Footer</footer>
</div>

グリッドテンプレートエリア

@utility grid-areas-dashboard {
  grid-template-areas:
    "header header header"
    "nav main aside"
    "nav footer footer";
}

@utility area-header { grid-area: header; }
@utility area-nav { grid-area: nav; }
@utility area-main { grid-area: main; }
@utility area-aside { grid-area: aside; }
@utility area-footer { grid-area: footer; }

<div class="grid grid-areas-dashboard grid-cols-[200px_1fr_250px] grid-rows-[60px_1fr_40px] min-h-screen">
  <header class="area-header bg-white shadow">Header</header>
  <nav class="area-nav bg-gray-100">Navigation</nav>
  <main class="area-main p-6">Main Content</main>
  <aside class="area-aside bg-gray-50 p-4">Sidebar</aside>
  <footer class="area-footer bg-gray-800 text-white">Footer</footer>
</div>

Auto-Fill と Auto-Fit グリッド

<!-- Auto-fill: フィットするだけ多くのトラックを作成、空のものも含む -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-6">
  <div class="bg-white rounded-lg shadow p-4">Card 1</div>
  <div class="bg-white rounded-lg shadow p-4">Card 2</div>
  <div class="bg-white rounded-lg shadow p-4">Card 3</div>
</div>

<!-- Auto-fit: 空のトラックを縮小 -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
  <!-- カードが利用可能なスペースに拡張される -->
</div>

<!-- Arbitrary values を使用 -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(min(100%,300px),1fr))] gap-4">
  <!-- コンテナが minmax の最小値より小さい場合に対応 -->
</div>

Subgrid

/* v4 で subgrid を有効化 */
@utility subgrid-cols {
  grid-template-columns: subgrid;
}

@utility subgrid-rows {
  grid-template-rows: subgrid;
}

<div class="grid grid-cols-4 gap-4">
  <!-- 2列にまたがるが、子要素を親グリッドに揃える -->
  <div class="col-span-2 grid subgrid-cols gap-4">
    <div>親の列1に揃えられた</div>
    <div>親の列2に揃えられた</div>
  </div>
</div>

高度な Flexbox パターン

スペース配分

<!-- 最初と最後が端になるように均等配置 -->
<div class="flex justify-between">
  <div>First</div>
  <div>Second</div>
  <div>Third</div>
</div>

<!-- エッジを含めて全てに均等配置 -->
<div class="flex justify-around">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

<!-- アイテム間のスペースがエッジの2倍 -->
<div class="flex justify-evenly">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

フレキシブルアイテムのサイズ変更

<!-- アイテムがスペースを均等に共有 -->
<div class="flex">
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
  <div class="flex-1">1/3</div>
</div>

<!-- 最初のアイテムが2倍のスペースを取得 -->
<div class="flex">
  <div class="flex-[2]">2/4</div>
  <div class="flex-1">1/4</div>
  <div class="flex-1">1/4</div>
</div>

<!-- 固定 + フレキシブル -->
<div class="flex">
  <div class="w-64 shrink-0">Fixed 256px</div>
  <div class="flex-1 min-w-0">Flexible (縮小可能)</div>
</div>

<!-- テキストオーバーフロー時に縮小を防止 -->
<div class="flex min-w-0">
  <div class="shrink-0">Icon</div>
  <div class="min-w-0 truncate">省略される長いテキスト</div>
</div>

Flexbox を使用した Masonry 風

<!-- 列ベースの masonry -->
<div class="flex flex-col flex-wrap h-[800px] gap-4">
  <div class="w-[calc(33.333%-1rem)] h-48">Item 1</div>
  <div class="w-[calc(33.333%-1rem)] h-64">Item 2</div>
  <div class="w-[calc(33.333%-1rem)] h-32">Item 3</div>
  <!-- アイテムが垂直にフロー、次の列に折り返す -->
</div>

コンテナクエリ

基本的なコンテナクエリ

@plugin "@tailwindcss/container-queries";

<!-- コンテナを定義 -->
<div class="@container">
  <!-- コンテナ幅に応答 -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</div>

名前付きコンテナ

<!-- 複数の名前付きコンテナ -->
<div class="@container/sidebar">
  <nav class="@[200px]/sidebar:flex-col @[300px]/sidebar:flex-row">
    Navigation
  </nav>
</div>

<div class="@container/main">
  <article class="@[600px]/main:prose-lg @[900px]/main:prose-xl">
    Content
  </article>
</div>

コンテナクエリユニット

<!-- コンテナとの相対サイズ -->
<div class="@container">
  <h1 class="text-[5cqw]">コンテナ幅に応じてスケール</h1>
  <p class="text-[3cqi]">コンテナインラインサイズに応じてスケール</p>
</div>

ポジションと レイヤリング

スティッキーポジショニング

<!-- スティッキーヘッダー -->
<header class="sticky top-0 z-50 bg-white/80 backdrop-blur-sm border-b">
  Navigation
</header>

<!-- スティッキーサイドバー -->
<aside class="sticky top-20 h-[calc(100vh-5rem)] overflow-auto">
  Sidebar content
</aside>

<!-- スティッキーテーブルヘッダー -->
<div class="overflow-auto max-h-96">
  <table>
    <thead class="sticky top-0 bg-white shadow">
      <tr>
        <th class="sticky left-0 bg-white z-10">Corner cell</th>
        <th>Column 2</th>
      </tr>
    </thead>
    <tbody>...</tbody>
  </table>
</div>

フィックス要素

<!-- フィックス下部ナビゲーション（モバイル） -->
<nav class="fixed bottom-0 inset-x-0 z-50 bg-white border-t md:hidden">
  <div class="flex justify-around py-2">
    <a href="#">Home</a>
    <a href="#">Search</a>
    <a href="#">Profile</a>
  </div>
</nav>

<!-- フィックスアクションボタン -->
<button class="fixed bottom-6 right-6 z-40 rounded-full bg-brand-500 p-4 shadow-lg">
  <PlusIcon />
</button>

Z-Index 管理

@theme {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}

@utility z-dropdown { z-index: var(--z-dropdown); }
@utility z-sticky { z-index: var(--z-sticky); }
@utility z-fixed { z-index: var(--z-fixed); }
@utility z-modal-backdrop { z-index: var(--z-modal-backdrop); }
@utility z-modal { z-index: var(--z-modal); }
@utility z-popover { z-index: var(--z-popover); }
@utility z-tooltip { z-index: var(--z-tooltip); }
@utility z-toast { z-index: var(--z-toast); }

オーバーフローとスクロール

カスタムスクロールバー

@utility scrollbar-thin {
  scrollbar-width: thin;
}

@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@utility scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* カスタムスクロールバーのスタイリング */
@utility scrollbar-custom {
  scrollbar-color: oklch(0.7 0 0) oklch(0.95 0 0);
}

@utility scrollbar-custom::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

@utility scrollbar-custom::-webkit-scrollbar-track {
  background: oklch(0.95 0 0);
  border-radius: 4px;
}

@utility scrollbar-custom::-webkit-scrollbar-thumb {
  background: oklch(0.7 0 0);
  border-radius: 4px;
}

@utility scrollbar-custom::-webkit-scrollbar-thumb:hover {
  background: oklch(0.5 0 0);
}

スクロールスナップ

<!-- 水平カルーセル -->
<div class="flex snap-x snap-mandatory overflow-x-auto gap-4 pb-4">
  <div class="snap-start shrink-0 w-80">Card 1</div>
  <div class="snap-start shrink-0 w-80">Card 2</div>
  <div class="snap-start shrink-0 w-80">Card 3</div>
</div>

<!-- フルページセクション -->
<div class="h-screen snap-y snap-mandatory overflow-y-auto">
  <section class="h-screen snap-start">Section 1</section>
  <section class="h-screen snap-start">Section 2</section>
  <section class="h-screen snap-start">Section 3</section>
</div>

<!-- パディング付きスクロールスナップ -->
<div class="snap-x scroll-pl-6 overflow-x-auto">
  <div class="snap-start">...</div>
</div>

アンカーのスクロールマージン

<!-- フィックスヘッダーのオフセット -->
<section id="about" class="scroll-mt-20">
  <!-- リンク時にフィックスヘッダーの下に表示 -->
</section>

アスペクト比とオブジェクトフィット

レスポンシブアスペクト比

<!-- 固定アスペクト比コンテナ -->
<div class="aspect-video bg-gray-100">
  <video class="h-full w-full object-cover">...</video>
</div>

<div class="aspect-square rounded-full overflow-hidden">
  <img src="avatar.jpg" class="h-full w-full object-cover" />
</div>

<!-- カスタムアスペクト比 -->
<div class="aspect-[4/3]">4:3 コンテンツ</div>
<div class="aspect-[21/9]">超ワイドコンテンツ</div>

オブジェクト配置

<!-- 画像の特定の部分にフォーカス -->
<div class="h-64 overflow-hidden">
  <img
    src="portrait.jpg"
    class="h-full w-full object-cover object-top"
  />
</div>

<!-- Arbitrary オブジェクト位置 -->
<img class="object-cover object-[25%_75%]" src="..." />

高度なスペーシング

ロジカルプロパティ

<!-- LTR と RTL に対応 -->
<div class="ps-4 pe-6 ms-auto">
  テキスト方向を尊重するパディングとマージン
</div>

<!-- ブロック方向（水平書字モードでは垂直） -->
<div class="pbs-4 pbe-6 mbs-auto">
  ブロック方向のスペーシング
</div>

区切り線付きスペース

<!-- アイテム間の区切り線 -->
<ul class="divide-y divide-gray-200">
  <li class="py-4">Item 1</li>
  <li class="py-4">Item 2</li>
  <li class="py-4">Item 3</li>
</ul>

<!-- 水平区切り線 -->
<div class="flex divide-x divide-gray-200">
  <div class="px-4">Section 1</div>
  <div class="px-4">Section 2</div>
  <div class="px-4">Section 3</div>
</div>

フルブリード用ネガティブマージン

<!-- パディングされたコンテナ内のフルブリード画像 -->
<article class="px-6">
  <p>パディング付きコンテンツ</p>
  <img src="hero.jpg" class="-mx-6 w-[calc(100%+3rem)]" />
  <p>さらにパディング付きコンテンツ</p>
</article>

<!-- コンテンツ幅を超える引用 -->
<div class="max-w-prose mx-auto px-4">
  <p>通常のコンテンツ...</p>
  <blockquote class="-mx-8 md:-mx-16 px-8 md:px-16 py-8 bg-gray-100">
    コンテンツ幅を超えて拡張された特集引用
  </blockquote>
</div>

マルチカラムレイアウト

テキストカラム

<!-- レスポンシブカラム -->
<div class="columns-1 sm:columns-2 lg:columns-3 gap-8">
  <p>コンテンツはカラムに渡ってフロー...</p>
</div>

<!-- 固定幅カラム -->
<div class="columns-[300px] gap-6">
  <p>フィットするだけ多くの300pxカラムを作成</p>
</div>

<!-- 要素内の改行を防止 -->
<div class="columns-2">
  <div class="break-inside-avoid mb-4">
    まとまったままのカード
  </div>
</div>

レスポンシブパターン

コンテナクエリ + メディアクエリ

<div class="@container">
  <div class="
    /* コンポーネントレベルのレスポンシブ用コンテナクエリ */
    @md:flex @md:gap-4

    /* ページレベルのレスポンシブ用メディアクエリ */
    lg:grid lg:grid-cols-2
  ">
    Content
  </div>
</div>

ブレークポイントベースの表示・非表示

<!-- ブレークポイント別に異なるコンテンツを表示 -->
<nav>
  <!-- モバイルメニューボタン -->
  <button class="md:hidden">Menu</button>

  <!-- デスクトップナビゲーション -->
  <ul class="hidden md:flex gap-4">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

Clamp を使用したフルードサイジング

<!-- フルードパディング -->
<section class="py-[clamp(2rem,5vw,6rem)] px-[clamp(1rem,3vw,4rem)]">
  レスポンシブパディング付きコンテンツ
</section>

<!-- フルード max-width -->
<div class="mx-auto w-full max-w-[clamp(300px,90vw,1200px)]">
  レスポンシブコンテナ
</div>

印刷スタイル

<!-- 印刷時に要素を非表示 -->
<nav class="print:hidden">Navigation</nav>

<!-- 印刷時のみ表示 -->
<div class="hidden print:block">印刷専用コンテンツ</div>

<!-- 印刷固有のスタイル -->
<article class="print:text-black print:bg-white">
  <h1 class="text-2xl print:text-xl">Heading</h1>
  <a href="..." class="text-blue-500 print:text-black print:underline">
    リンク（印刷時はテキストで表示）
  </a>
</article>

<!-- ページ内改行を防止 -->
<div class="print:break-inside-avoid">
  このコンテンツを1ページでまとめておく
</div>

<!-- ページ改行を強制 -->
<div class="print:break-before-page">
  新しいページで開始
</div>

ベストプラクティス

1. モダンレイアウト手法を使用

<!-- 2D レイアウトには Grid を優先 -->
<div class="grid grid-cols-3 gap-4">

<!-- 1D レイアウトには Flexbox を優先 -->
<div class="flex items-center gap-2">

2. エッジケースに対応

<!-- flex アイテムがオーバーフローするのを防止 -->
<div class="flex min-w-0">
  <div class="min-w-0 truncate">長いテキスト</div>
</div>

<!-- グリッドが吹き出すのを防止 -->
<div class="grid grid-cols-1 min-w-0">
  <div class="overflow-hidden">オーバーフローする可能性があるコンテンツ</div>
</div>

3. セマンティックサイジングを使用

<!-- 読みやすいコンテンツには max-w-prose を優先 -->
<article class="max-w-prose mx-auto">

<!-- ページセクションにはコンテナを使用 -->
<div class="container mx-auto px-4">

4. すべてのブレークポイントをテスト

すべてのレスポンシブレイアウトがすべてのブレークポイントで機能することを確認するため、体系的なテストを作成してください。