EnglishEnglish العربيةالعربية PortuguêsPortuguês 日本語日本語

Tailwind CSS レイアウトシステム：コンテナ、ポジショニングとオーバーフロー制御

コンテナ

Containerクラスはレスポンシブな中央揃えラッパーを作成し、ブレークポイントに基づいて最大幅を自動的に調整します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>コンテナデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- 基本的なコンテナ -->
  <div class="container mx-auto p-4">
    <div class="bg-white rounded-lg shadow p-6 mb-6">
      <h2 class="text-xl font-semibold mb-4">基本的なコンテナ</h2>
      <p class="text-gray-600">コンテナは画面幅に応じてmax-widthを自動的に調整します</p>
    </div>
  </div>

  <!-- 全幅背景 + コンテナ内コンテンツ -->
  <div class="bg-blue-600 py-12">
    <div class="container mx-auto px-4">
      <h2 class="text-2xl font-bold text-white mb-4">全幅背景 + コンテナ内コンテンツ</h2>
      <p class="text-blue-100">背景は全幅に広がり、コンテンツは中央に配置されます</p>
    </div>
  </div>

  <!-- 各ブレークポイントでのコンテナ幅 -->
  <div class="container mx-auto p-4 mt-6">
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">コンテナブレークポイントリファレンス</h3>
      <div class="space-y-2 text-sm">
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">sm（≥640px）</span>
          <span class="font-mono">max-width: 640px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">md（≥768px）</span>
          <span class="font-mono">max-width: 768px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">lg（≥1024px）</span>
          <span class="font-mono">max-width: 1024px</span>
        </div>
        <div class="flex justify-between border-b pb-2">
          <span class="text-gray-600">xl（≥1280px）</span>
          <span class="font-mono">max-width: 1280px</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-600">2xl（≥1536px）</span>
          <span class="font-mono">max-width: 1536px</span>
        </div>
      </div>
    </div>
  </div>

  <!-- カスタムコンテナ幅 -->
  <div class="max-w-2xl mx-auto p-4 mt-6">
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
      <h3 class="font-semibold text-green-800 mb-2">カスタム最大幅</h3>
      <p class="text-green-600">containerの代わりにmax-w-2xl（672px）を使用</p>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

コンテナブレークポイントリファレンス：

ブレークポイント 最小幅 コンテナ最大幅
デフォルト - 100%
sm 640px 640px
md 768px 768px
lg 1024px 1024px
xl 1280px 1280px
2xl 1536px 1536px

従来のCSSとTailwindの比較 従来の方法ではレスポンシブコンテナのためにmax-widthとメディアクエリを手動で設定する必要がありますが、Tailwindのcontainerクラスはすべてのブレークポイントを自動的に処理します。

💡 ヒント： containerはmx-autoで水平中央揃えにする必要があります。設定でcenter: trueを有効にすると、コンテナを自動的に中央揃えにできます。

Position

Tailwindは完全なポジショニングシステムを提供しています：static、relative、absolute、fixed、sticky。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Positionデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- relative + absolute -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">relative + absolute ポジショニング</h3>
      <div class="relative h-48 bg-gray-200 rounded">
        <div class="absolute top-4 left-4 bg-blue-500 text-white px-4 py-2 rounded">
          top-4 left-4
        </div>
        <div class="absolute top-4 right-4 bg-green-500 text-white px-4 py-2 rounded">
          top-4 right-4
        </div>
        <div class="absolute bottom-4 left-4 bg-purple-500 text-white px-4 py-2 rounded">
          bottom-4 left-4
        </div>
        <div class="absolute bottom-4 right-4 bg-orange-500 text-white px-4 py-2 rounded">
          bottom-4 right-4
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="bg-red-500 text-white px-4 py-2 rounded">inset-0 中央揃え</span>
        </div>
      </div>
    </div>

    <!-- sticky ポジショニング -->
    <div class="bg-white rounded-lg shadow">
      <div class="sticky top-0 bg-blue-600 text-white p-4 rounded-t-lg z-10">
        <h3 class="font-semibold">Stickyポジショニング - 下にスクロールして効果を確認してください</h3>
      </div>
      <div class="p-6 space-y-4">
        <p class="text-gray-600">下にスクロールすると、ヘッダーが上部に固定されます。</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">スクロール領域</span>
        </div>
        <p class="text-gray-600">スクロールを続けてください...</p>
        <div class="h-96 bg-gray-100 rounded flex items-center justify-center">
          <span class="text-gray-400">さらなるコンテンツ</span>
        </div>
      </div>
    </div>

    <!-- fixed ポジショニングの例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Fixed ポジショニング</h3>
      <p class="text-gray-600 mb-4">
        Fixedポジショニングはビューポートに対する相対位置で、ナビバーやトップへ戻るボタンなどによく使われます。
        コード例：
      </p>
      <pre class="bg-gray-100 p-4 rounded text-sm">
&lt;nav class="fixed top-0 left-0 right-0 bg-white shadow"&gt;
  固定ナビバー
&lt;/nav&gt;

&lt;button class="fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full"&gt;
  トップへ戻る
&lt;/button&gt;</pre>
    </div>

    <!-- 位置オフセットプロパティ -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">位置オフセットプロパティ</h3>
      <div class="grid grid-cols-2 gap-4">
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">top-0</code>
          <span class="text-gray-500 text-sm ml-2">top: 0px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">right-4</code>
          <span class="text-gray-500 text-sm ml-2">right: 16px</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">bottom-full</code>
          <span class="text-gray-500 text-sm ml-2">bottom: 100%</span>
        </div>
        <div class="bg-gray-100 p-4 rounded">
          <code class="text-sm">left-1/2</code>
          <span class="text-gray-500 text-sm ml-2">left: 50%</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

Positionクラスリファレンス：

クラス CSS 値 説明
static position: static デフォルトのポジショニング、オフセットなし
relative position: relative 相対ポジショニング、元のスペースを保持
absolute position: absolute 絶対ポジショニング、最も近いpositioned祖先に対して相対
fixed position: fixed Fixedポジショニング、ビューポートに対して相対
sticky position: sticky Stickyポジショニング、スクロール時に固定

従来のCSSとTailwindの比較 従来の方法ではCSSでpositionとオフセット値を設定する必要がありますが、Tailwindはrelative、top-4、left-4などのクラスを使ってHTML内で直接宣言できます。

Z-index 重ね順

Z-indexはpositioned要素の重ね順を制御し、どの要素が前面に表示されるかを決定します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-index重ね順デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 重ね順の例 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Z-index重ね順効果</h3>
      <div class="relative h-64">
        <div class="absolute left-8 top-8 w-48 h-32 bg-red-400 rounded-lg shadow-lg z-10 flex items-center justify-center">
          <span class="text-white font-bold">z-10</span>
        </div>
        <div class="absolute left-16 top-16 w-48 h-32 bg-blue-400 rounded-lg shadow-lg z-20 flex items-center justify-center">
          <span class="text-white font-bold">z-20</span>
        </div>
        <div class="absolute left-24 top-24 w-48 h-32 bg-green-400 rounded-lg shadow-lg z-30 flex items-center justify-center">
          <span class="text-white font-bold">z-30</span>
        </div>
        <div class="absolute left-32 top-32 w-48 h-32 bg-purple-400 rounded-lg shadow-lg z-40 flex items-center justify-center">
          <span class="text-white font-bold">z-40</span>
        </div>
      </div>
    </div>

    <!-- 実践的な応用 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">実践的な使用例</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <code class="w-24">z-0</code>
          <span class="text-gray-600">デフォルトレイヤー</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-10</code>
          <span class="text-gray-600">カード、コンテンツ領域</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-20</code>
          <span class="text-gray-600">ドロップダウン、サイドバー</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-30</code>
          <span class="text-gray-600">Stickyナビバー</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-40</code>
          <span class="text-gray-600">モーダルオーバーレイ</span>
        </div>
        <div class="flex items-center gap-4">
          <code class="w-24">z-50</code>
          <span class="text-gray-600">モーダル、ポップアップ</span>
        </div>
      </div>
    </div>

    <!-- 負のz-index -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">負のZ-index</h3>
      <div class="relative h-32">
        <div class="absolute inset-0 bg-blue-100 rounded flex items-center justify-center">
          <span class="text-blue-600">z-0 背景レイヤー</span>
        </div>
        <div class="absolute left-4 top-4 w-32 h-24 bg-red-400 rounded -z-10 flex items-center justify-center">
          <span class="text-white">-z-10</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法ではCSSで特定のz-index値を設定する必要がありますが、Tailwindはほとんどのユースケースをカバーするz-0からz-50までのプリセットレベルを提供しています。

⚠️ 注意： z-indexはpositioned要素（relative、absolute、fixed、sticky）にのみ影響します。デフォルトの動作にリセットするにはz-autoを使用してください。

Overflow 制御

Overflowはコンテンツがコンテナを超えた場合の表示方法を制御します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overflow制御デモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- overflow-auto -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-auto</h3>
      <p class="text-gray-600 mb-4">コンテンツがあふれるとスクロールバーを表示します</p>
      <div class="overflow-auto h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">これは長いコンテンツです...</p>
        <p class="mb-4">overflow-autoの効果を示しています。</p>
        <p class="mb-4">コンテンツがコンテナの高さを超えると、スクロールバーが自動的に表示されます。</p>
        <p class="mb-4">ユーザーはスクロールしてすべてのコンテンツを表示できます。</p>
        <p class="mb-4">さらにコンテンツを追加...</p>
        <p class="mb-4">さらにテキストコンテンツ。</p>
        <p>最後の段落のコンテンツ。</p>
      </div>
    </div>

    <!-- overflow-hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-hidden</h3>
      <p class="text-gray-600 mb-4">あふれたコンテンツを非表示にします</p>
      <div class="overflow-hidden h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">これは長いコンテンツです...</p>
        <p class="mb-4">overflow-hiddenの効果を示しています。</p>
        <p class="mb-4">コンテナを超えたコンテンツは非表示になります。</p>
        <p class="mb-4">ユーザーはスクロールして非表示のコンテンツを見ることはできません。</p>
        <p class="mb-4">このコンテンツは見えません...</p>
        <p class="mb-4">これも見えません...</p>
        <p>これも見えません...</p>
      </div>
    </div>

    <!-- overflow-scroll -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">overflow-scroll</h3>
      <p class="text-gray-600 mb-4">常にスクロールバーを表示します</p>
      <div class="overflow-scroll h-40 border-2 border-gray-300 rounded p-4">
        <p class="mb-4">このコンテンツは短いですが...</p>
        <p>スクロールバーは常に表示されています。</p>
      </div>
    </div>

    <!-- 水平オーバーフロー -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">水平オーバーフロー制御</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-auto（水平スクロール）</p>
          <div class="overflow-x-auto border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-blue-200 p-4 rounded flex-shrink-0 w-48">アイテム 1</div>
              <div class="bg-blue-300 p-4 rounded flex-shrink-0 w-48">アイテム 2</div>
              <div class="bg-blue-400 p-4 rounded flex-shrink-0 w-48 text-white">アイテム 3</div>
              <div class="bg-blue-500 p-4 rounded flex-shrink-0 w-48 text-white">アイテム 4</div>
            </div>
          </div>
        </div>

        <div>
          <p class="text-sm text-gray-600 mb-2">overflow-x-hidden（水平オーバーフローを非表示）</p>
          <div class="overflow-x-hidden border-2 border-gray-300 rounded p-4">
            <div class="flex gap-4 w-[800px]">
              <div class="bg-green-200 p-4 rounded flex-shrink-0 w-48">アイテム 1</div>
              <div class="bg-green-300 p-4 rounded flex-shrink-0 w-48">アイテム 2</div>
              <div class="bg-green-400 p-4 rounded flex-shrink-0 w-48 text-white">アイテム 3</div>
              <div class="bg-green-500 p-4 rounded flex-shrink-0 w-48 text-white">アイテム 4</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- テキストオーバーフロー -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">テキストオーバーフロー</h3>
      <div class="space-y-4">
        <div>
          <p class="text-sm text-gray-600 mb-2">truncate（1行省略記号）</p>
          <p class="truncate bg-gray-100 p-3 rounded">
            これは長いテキストコンテンツです。truncateクラスは1行テキストがあふれる場合に省略記号を表示し、コンテナ幅を超えるコンテンツを...で隠します。
          </p>
        </div>
        <div>
          <p class="text-sm text-gray-600 mb-2">text-ellipsis + overflow-hidden</p>
          <p class="text-ellipsis overflow-hidden whitespace-nowrap bg-gray-100 p-3 rounded">
            これは省略記号を実現する別の方法で、text-ellipsis、overflow-hidden、whitespace-nowrapの組み合わせが必要です
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

Overflowクラスリファレンス：

クラス CSS 値 説明
overflow-auto overflow: auto 必要時にスクロールバーを表示
overflow-hidden overflow: hidden あふれたコンテンツを非表示
overflow-visible overflow: visible あふれたコンテンツを表示（デフォルト）
overflow-scroll overflow: scroll 常にスクロールバーを表示
overflow-x-auto overflow-x: auto 水平自動スクロール
overflow-y-auto overflow-y: auto 垂直自動スクロール

従来のCSSとTailwindの比較 従来の方法では水平方向と垂直方向でoverflow-xとoverflow-yプロパティを別々に設定する必要がありますが、Tailwindは統一されたoverflow-プレフィックスを提供しています。

Float と Clear

Floatは要素のフロートレイアウトに使用し、Clearはフロートの動作を制御します。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Floatデモ</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- 基本的なフロート -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">基本的なFloat</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-32 h-32 bg-blue-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-left</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          このテキストはフロート要素の周りに回り込みます。float-leftは要素を左にフロートさせ、
          後続のコンテンツがその周りを流れるようにします。これは古典的なテキストの画像回り込み効果です。
          回り込み効果を示すためにテキストを追加しています...
        </p>
      </div>
    </div>

    <!-- 右フロート -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">右Float</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-right w-32 h-32 bg-green-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">float-right</span>
        </div>
        <p class="text-gray-700 leading-relaxed">
          float-rightは要素を右にフロートさせます。テキストは左からフロート要素の周りに回り込みます。
          このレイアウトパターンは従来のウェブデザインでは一般的でしたが、現在はFlexboxやGridが推奨されています。
          回り込み効果を示すためにテキストを追加しています...
        </p>
      </div>
    </div>

    <!-- Clear制御 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clear制御</h3>
      <div class="bg-gray-100 p-4 rounded">
        <div class="float-left w-24 h-24 bg-blue-400 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="float-left w-24 h-24 bg-blue-500 rounded m-2 flex items-center justify-center">
          <span class="text-white text-sm">Float</span>
        </div>
        <div class="clear-both bg-yellow-200 p-4 rounded mt-4">
          <p>clear-both：両側のフロートをクリアし、これが新しい行から始まることを保証します</p>
        </div>
      </div>
    </div>

    <!-- clearfix -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Clearfix（フロートの解除）</h3>
      <div class="bg-gray-100 p-4 rounded overflow-hidden">
        <div class="float-left w-32 h-32 bg-purple-400 rounded m-4 flex items-center justify-center">
          <span class="text-white">フロート要素</span>
        </div>
        <div class="float-right w-32 h-32 bg-purple-500 rounded m-4 flex items-center justify-center">
          <span class="text-white">フロート要素</span>
        </div>
        <p class="text-gray-600">
          親要素にoverflow-hiddenを使用してフロートを解除しています
        </p>
      </div>
    </div>

    <!-- モダンな代替手法 -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">モダンな代替手法（推奨）</h3>
      <p class="text-gray-600 mb-4">
        レイアウトのニーズには、Floatの代わりにFlexboxまたはGridが推奨されます：
      </p>
      <div class="flex gap-4">
        <div class="w-32 h-32 bg-blue-400 rounded flex items-center justify-center">
          <span class="text-white">Flex 1</span>
        </div>
        <div class="w-32 h-32 bg-blue-500 rounded flex items-center justify-center">
          <span class="text-white">Flex 2</span>
        </div>
        <div class="w-32 h-32 bg-blue-600 rounded flex items-center justify-center">
          <span class="text-white">Flex 3</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

Float/Clearクラスリファレンス：

クラス CSS 値 説明
float-left float: left 左にフロート
float-right float: right 右にフロート
float-none float: none フロートなし
clear-left clear: left 左フロートをクリア
clear-right clear: right 右フロートをクリア
clear-both clear: both 両側のフロートをクリア
clear-none clear: none クリアなし

従来のCSSとTailwindの比較 従来の方法では::after疑似要素を使った.clearfixクラスを記述する必要がありますが、Tailwindは親要素にoverflow-hiddenを使用するだけでフロートをクリアできます。

⚠️ 注意： Floatレイアウトは大部分がFlexboxとGridに置き換えられています。Floatは現在、画像の周りのテキスト回り込みなどの特定のシナリオで主に使用されています。

総合レイアウト例

上記のすべての概念を組み合わせて、完全なページレイアウトを作成してみましょう。

例

HTML 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>総合レイアウト例</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100">
  <!-- 固定ナビバー -->
  <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <h1 class="text-xl font-bold text-gray-800">マイウェブサイト</h1>
      <div class="space-x-4">
        <a href="#" class="text-gray-600 hover:text-blue-600">ホーム</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">概要</a>
        <a href="#" class="text-gray-600 hover:text-blue-600">お問い合わせ</a>
      </div>
    </div>
  </nav>

  <!-- メインコンテンツ領域 -->
  <div class="pt-16">
    <!-- ヒーローセクション -->
    <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-4">マイウェブサイトへようこそ</h2>
        <p class="text-xl opacity-90">Tailwind CSSで構築されたモダンなレイアウト</p>
      </div>
    </div>

    <!-- コンテンツカード -->
    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">カードタイトル</h3>
            <p class="text-gray-600 text-sm">カードの説明...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-green-400 to-green-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">カードタイトル</h3>
            <p class="text-gray-600 text-sm">カードの説明...</p>
          </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
          <div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600"></div>
          <div class="p-6">
            <h3 class="text-lg font-semibold mb-2">カードタイトル</h3>
            <p class="text-gray-600 text-sm">カードの説明...</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Stickyサイドバーレイアウト -->
    <div class="container mx-auto px-4 pb-12">
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- メインコンテンツ -->
        <div class="flex-1 bg-white rounded-lg shadow p-6">
          <h3 class="text-xl font-semibold mb-4">メインコンテンツ領域</h3>
          <div class="space-y-4">
            <p class="text-gray-600">これはメインコンテンツ領域で、スペースの大部分を占めています。</p>
            <div class="h-96 bg-gray-100 rounded"></div>
          </div>
        </div>
        
        <!-- サイドバー -->
        <aside class="lg:w-64 lg:sticky lg:top-20 lg:self-start">
          <div class="bg-white rounded-lg shadow p-6">
            <h4 class="font-semibold mb-4">サイドバー</h4>
            <p class="text-gray-600 text-sm">Stickyポジショニングを使用して、スクロール中も上部に固定されます。</p>
          </div>
        </aside>
      </div>
    </div>
  </div>

  <!-- トップへ戻るボタン -->
  <button class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hover:bg-blue-700 transition-colors z-40">
    ↑
  </button>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では固定ナビ、レスポンシブグリッド、Stickyサイドバーなどのレイアウトのために大量のCSSを記述する必要がありますが、TailwindはHTML内のユーティリティクラスですべてを実現し、コード量を70%以上削減できます。

❓ よくある質問

Q containerとmax-w-2xlの違いは何ですか？
A containerはレスポンシブで、異なるブレークポイントで自動的にmax-widthを調整します。max-w-2xlは672pxの固定最大幅です。固定幅が必要な場合は後者が適しています。
Q Stickyポジショニングが機能しないのはなぜですか？
A Stickyには親要素に定義された高さがあり、スクロールを許可する必要があります。よくある問題は、親要素にoverflow: hiddenがあることで、これがStickyの動作を妨げます。親要素がオーバーフローを制限していないことを確認してください。
Q いつoverflow-hiddenを使ってフロートをクリアすべきですか？
A 親要素がフロートされた子要素を含み、親の高さが子要素を包含する必要がある場合に使用します。モダンなレイアウトでは、Floatの代わりにFlexboxまたはGridが推奨されます。
Q z-index値の規約は何ですか？
A Tailwindはz-0からz-50を提供しています。推奨されるレイヤリングスキーム：z-10 コンテンツ、z-20 ナビゲーション、z-30 Stickyナビ、z-40 オーバーレイ、z-50 モーダル。過度に大きな値の使用は避けてください。

📖 まとめ

📝 課題

  1. ⭐ containerとmx-autoを使用して中央揃えのページを作成し、固定幅のカードグリッドレイアウトを配置してみましょう

  2. ⭐⭐ Fixedナビバー（fixed）とStickyサイドバー（sticky）を持つ2カラムレイアウトページを作成してみましょう

  3. ⭐⭐⭐ fixedポジショニング、z-50重ね順、overflow-hidden背景オーバーレイを使用した完全なModalコンポーネントを作成し、レスポンシブ対応も含めてみましょう

100%