English 中文 العربية 日本語 Português

Tailwind CSS: Tailwind CSS インタラクティブ状態：hover/focus/active…

1. 状態プレフィックスの概要

Tailwindは状態プレフィックスを使用して、疑似クラスCSSを記述することなく、異なる状態の要素にスタイルを適用します。

プレフィックス CSS 疑似クラス 説明
hover: :hover マウスホバー
ocus: :focus フォーカス状態
ctive: :active マウス押下
disabled: :disabled 無効状態
isited: :visited 訪問済みリンク
irst: :first-child 最初の子要素
last: :last-child 最後の子要素
odd: :nth-child(odd) 奇数の子要素
even: :nth-child(even) 偶数の子要素

(1) サンプル

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 p-8">``
  ``<div class="max-w-4xl mx-auto space-y-8">``
    <!-- hover 状態 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``hover 状態`</h3>`
      `<div class="flex gap-4">`
        `<button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-700 transition-colors">`
          ホバーで暗く
        `</button>`
        `<button class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-colors">`
          ホバーでボーダー変化
        `</button>`
        `<button class="px-6 py-3 bg-green-500 text-white rounded-lg hover:shadow-lg hover:shadow-green-500/50 transition-all">`
          ホバーでシャドウ
        `</button>`
      `</div>`
    `</div>`

    <!-- focus 状態 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``focus 状態`</h3>`
      `<div class="space-y-4">`
        <input type="text" placeholder="入力欄をクリックしてフォーカス効果を確認"
               class="w-full p-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none transition-all">
        <input type="text" placeholder="カスタムフォーカスシャドウ"
               class="w-full p-3 border border-gray-300 rounded-lg focus:shadow-lg focus:shadow-purple-500/30 focus:border-purple-500 focus:outline-none transition-all">
      `</div>`
    `</div>`

    <!-- active 状態 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``active 状態`</h3>`
      `<div class="flex gap-4">`
        `<button class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 active:bg-blue-800 active:scale-95 transition-all">`
          押下で暗く・縮小
        `</button>`
        `<button class="px-6 py-3 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 active:bg-gray-100 active:scale-95 transition-all">`
          押下エフェクト
        `</button>`
      `</div>`
    `</div>`

    <!-- disabled 状態 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``disabled 状態`</h3>`
      `<div class="flex gap-4">`
        `<button class="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">`
          有効なボタン
        `</button>`
        `<button disabled class="px-6 py-3 bg-blue-500 text-white rounded-lg disabled:opacity-50 disabled:cursor-not-allowed">`
          無効なボタン
        `</button>`
        <input type="text" placeholder="有効な入力欄"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
        <input type="text" disabled placeholder="無効な入力欄"
               class="p-3 border border-gray-300 rounded-lg disabled:bg-gray-100 disabled:cursor-not-allowed">
      `</div>`
    `</div>`

    <!-- 訪問済みリンク -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``訪問済みリンク`</h3>`
      `<div class="flex gap-4">`
        `<a href="#visited1" class="text-blue-600 hover:text-blue-800 visited:text-purple-600">`
          クリック後に紫色に
        `</a>`
        `<a href="#visited2" class="text-green-600 hover:text-green-800 visited:text-gray-400">`
          クリック後に灰色に
        `</a>`
      `</div>`
    `</div>`
  `</div>`
</body>
</html>
論理コード 73 行（40 行制限超過、参照専用）

従来のCSSとTailwindの比較 従来の方法では utton:hover { background-color: ... } のような疑似クラスルールを記述する必要がありますが、Tailwindでは hover:bg-blue-700 のようなプレフィックスで直接宣言できます。

💡 ポイント： 状態プレフィックスは組み合わせて使用できます。例えば hover:focus:ring-2 とすると、ホバーかつフォーカス時にスタイルを適用できます。

2. 構造的疑似クラス（first/last/odd/even）

構造的疑似クラスプレフィックスは、特定の位置にある子要素を選択するために使用します。

(1) サンプル

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 p-8">``
  ``<div class="max-w-4xl mx-auto space-y-8">``
    <!-- first/last -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``first/last`</h3>`
      `<ul class="space-y-2">`
        `<li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">`
          最初のアイテム（first:bg-blue-50）
        `</li>`
        `<li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">`
          2番目のアイテム
        `</li>`
        `<li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">`
          3番目のアイテム
        `</li>`
        `<li class="p-3 bg-gray-50 rounded first:bg-blue-50 first:text-blue-700 last:bg-green-50 last:text-green-700">`
          最後のアイテム（last:bg-green-50）
        `</li>`
      `</ul>`
    `</div>`

    <!-- odd/even -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``odd/even`</h3>`
      `<ul class="space-y-0">`
        `<li class="p-3 odd:bg-white even:bg-gray-50 border-b">`行 1（odd:bg-white）`</li>`
        `<li class="p-3 odd:bg-white even:bg-gray-50 border-b">`行 2（even:bg-gray-50）`</li>`
        `<li class="p-3 odd:bg-white even:bg-gray-50 border-b">`行 3（odd:bg-white）`</li>`
        `<li class="p-3 odd:bg-white even:bg-gray-50 border-b">`行 4（even:bg-gray-50）`</li>`
        `<li class="p-3 odd:bg-white even:bg-gray-50 border-b">`行 5（odd:bg-white）`</li>`
        `<li class="p-3 odd:bg-white even:bg-gray-50">`行 6（even:bg-gray-50）`</li>`
      `</ul>`
    `</div>`

    <!-- テーブル例 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``テーブルのしま模様`</h3>`
      `<table class="w-full">`
        ``<thead>``
          `<tr class="bg-gray-100">`
            `<th class="p-3 text-left">`名前`</th>`
            `<th class="p-3 text-left">`メール`</th>`
            `<th class="p-3 text-left">`役割`</th>`
          `</tr>`
        `</thead>`
        ``<tbody>``
          `<tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">`
            `<td class="p-3">`山田`</td>`
            `<td class="p-3">`yamada@example.com`</td>`
            `<td class="p-3">`管理者`</td>`
          `</tr>`
          `<tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">`
            `<td class="p-3">`鈴木`</td>`
            `<td class="p-3">`suzuki@example.com`</td>`
            `<td class="p-3">`編集者`</td>`
          `</tr>`
          `<tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">`
            `<td class="p-3">`佐藤`</td>`
            `<td class="p-3">`sato@example.com`</td>`
            `<td class="p-3">`ユーザー`</td>`
          `</tr>`
          `<tr class="odd:bg-white even:bg-gray-50 hover:bg-blue-50 transition-colors">`
            `<td class="p-3">`田中`</td>`
            `<td class="p-3">`tanaka@example.com`</td>`
            `<td class="p-3">`ユーザー`</td>`
          `</tr>`
        `</tbody>`
      `</table>`
    `</div>`
  `</div>`
</body>
</html>
論理コード 75 行（40 行制限超過、参照専用）

従来のCSSとTailwindの比較 従来の方法では li:first-child { ... } や r:nth-child(even) { ... } のようなセレクターを記述する必要がありますが、Tailwindでは irst:bg-blue-50 や even:bg-gray-50 のようなプレフィックスで直接宣言できます。

3. group-hover と peer

group-hover: と peer は、親子要素間または兄弟要素間のインタラクティブ状態を処理するために使用します。

(1) サンプル

HTML 📖 参照専用 
<!DOCTYPE html>
``<html lang="ja">``
``<head>``
  ``<meta charset="UTF-8">``
  ``<meta name="viewport" content="width=device-width, initial-scale=1.0">``
  ``<title>``group-hover と peer デモ</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">``
    <!-- group-hover 親子ホバー -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``group-hover 親子ホバー`</h3>`
      `<div class="grid grid-cols-1 md:grid-cols-3 gap-4">`
        `<div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">`
          `<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-blue-500 transition-colors">`
            `<span class="text-blue-500 group-hover:text-white transition-colors">`🎨`</span>`
          `</div>`
          `<h4 class="font-semibold group-hover:text-blue-600 transition-colors">`デザインツール`</h4>`
          `<p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">`親要素にホバーして効果を確認`</p>`
        `</div>`
        `<div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">`
          `<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-green-500 transition-colors">`
            `<span class="text-green-500 group-hover:text-white transition-colors">`⚡`</span>`
          `</div>`
          `<h4 class="font-semibold group-hover:text-green-600 transition-colors">`パフォーマンス`</h4>`
          `<p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">`親要素にホバーして効果を確認`</p>`
        `</div>`
        `<div class="group bg-gray-50 rounded-lg p-4 cursor-pointer transition-all hover:shadow-lg">`
          `<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3 group-hover:bg-purple-500 transition-colors">`
            `<span class="text-purple-500 group-hover:text-white transition-colors">`🔒`</span>`
          `</div>`
          `<h4 class="font-semibold group-hover:text-purple-600 transition-colors">`セキュリティ`</h4>`
          `<p class="text-gray-600 text-sm mt-1 group-hover:text-gray-900 transition-colors">`親要素にホバーして効果を確認`</p>`
        `</div>`
      `</div>`
    `</div>`

    <!-- group 組み合わせ使用 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``group 組み合わせ使用`</h3>`
      `<div class="space-y-4">`
        `<div class="group flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer">`
          `<div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-500 transition-colors">`
            `<svg class="w-5 h-5 text-blue-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            `</svg>`
          `</div>`
          `<div class="flex-1">`
            `<h4 class="font-medium group-hover:text-blue-600 transition-colors">`メニュー項目 1`</h4>`
            `<p class="text-sm text-gray-500 group-hover:text-blue-400 transition-colors">`説明テキスト`</p>`
          `</div>`
          `<svg class="w-5 h-5 text-gray-400 group-hover:text-blue-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          `</svg>`
        `</div>`

        `<div class="group flex items-center gap-4 p-4 bg-gray-50 rounded-lg hover:bg-green-50 transition-colors cursor-pointer">`
          `<div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center group-hover:bg-green-500 transition-colors">`
            `<svg class="w-5 h-5 text-green-500 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            `</svg>`
          `</div>`
          `<div class="flex-1">`
            `<h4 class="font-medium group-hover:text-green-600 transition-colors">`メニュー項目 2`</h4>`
            `<p class="text-sm text-gray-500 group-hover:text-green-400 transition-colors">`説明テキスト`</p>`
          `</div>`
          `<svg class="w-5 h-5 text-gray-400 group-hover:text-green-500 group-hover:translate-x-1 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
          `</svg>`
        `</div>`
      `</div>`
    `</div>`

    <!-- peer 兄弟要素 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``peer 兄弟要素`</h3>`
      `<div class="space-y-4">`
        `<div>`
          <input type="email" id="email" placeholder=" "
                 class="peer w-full p-3 pt-5 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none transition-all">
          <label for="email"
                 class="absolute left-3 top-1 text-gray-400 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-blue-500">
            メールアドレス
          `</label>`
        `</div>`
        `<div class="relative">`
          <input type="password" id="password" placeholder=" "
                 class="peer w-full p-3 pt-5 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-2 focus:ring-purple-500/50 focus:outline-none transition-all">
          <label for="password"
                 class="absolute left-3 top-1 text-gray-400 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-base peer-focus:top-1 peer-focus:text-sm peer-focus:text-purple-500">
            パスワード
          `</label>`
        `</div>`
        `<div class="flex items-center gap-3">`
          `<input type="checkbox" id="agree" class="peer sr-only">`
          <label for="agree"
                 class="w-5 h-5 border-2 border-gray-300 rounded peer-checked:bg-blue-500 peer-checked:border-blue-500 cursor-pointer transition-colors flex items-center justify-center">
            `<svg class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">`
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
            `</svg>`
          `</label>`
          `<span class="text-gray-700">`利用規約に同意します`</span>`
        `</div>`
      `</div>`
    `</div>`
  `</div>`
</body>
</html>
論理コード 103 行（40 行制限超過、参照専用）
💡 ポイント： 親要素に group クラスを追加し、子要素に group-hover: プレフィックスを使用します。前の兄弟要素に peer クラスを追加し、後の兄弟要素に peer-focus: などのプレフィックスを使用します。

4. カーソルスタイル（cursor-*）

cursor-* クラスは、マウスが要素の上にホバーしたときのカーソルスタイルを制御します。

クラス CSS 値 説明
cursor-auto cursor: auto 自動（デフォルト）
cursor-default cursor: default デフォルト矢印
cursor-pointer cursor: pointer 指のポインター
cursor-wait cursor: wait 待機
cursor-text cursor: text テキスト選択
cursor-move cursor: move 移動
cursor-not-allowed cursor: not-allowed 禁止
cursor-grab cursor: grab 掴む
cursor-grabbing cursor: grabbing 掴んでいる
cursor-crosshair cursor: crosshair 十字カーソル
cursor-zoom-in cursor: zoom-in ズームイン
cursor-zoom-out cursor: zoom-out ズームアウト

(1) サンプル

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 p-8">``
  `<div class="max-w-4xl mx-auto">`
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``カーソルスタイル`</h3>`
      `<div class="grid grid-cols-2 md:grid-cols-4 gap-4">`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-auto">`
          `<div class="text-2xl mb-2">`👆`</div>`
          `<div class="text-sm">`cursor-auto`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-default">`
          `<div class="text-2xl mb-2">`👆`</div>`
          `<div class="text-sm">`cursor-default`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-pointer">`
          `<div class="text-2xl mb-2">`👆`</div>`
          `<div class="text-sm">`cursor-pointer`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-wait">`
          `<div class="text-2xl mb-2">`⏳`</div>`
          `<div class="text-sm">`cursor-wait`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-text">`
          `<div class="text-2xl mb-2">`📝`</div>`
          `<div class="text-sm">`cursor-text`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-move">`
          `<div class="text-2xl mb-2">`✋`</div>`
          `<div class="text-sm">`cursor-move`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-not-allowed">`
          `<div class="text-2xl mb-2">`🚫`</div>`
          `<div class="text-sm">`cursor-not-allowed`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-grab">`
          `<div class="text-2xl mb-2">`✊`</div>`
          `<div class="text-sm">`cursor-grab`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-grabbing">`
          `<div class="text-2xl mb-2">`✊`</div>`
          `<div class="text-sm">`cursor-grabbing`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-crosshair">`
          `<div class="text-2xl mb-2">`➕`</div>`
          `<div class="text-sm">`cursor-crosshair`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-zoom-in">`
          `<div class="text-2xl mb-2">`🔍`</div>`
          `<div class="text-sm">`cursor-zoom-in`</div>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg text-center cursor-zoom-out">`
          `<div class="text-2xl mb-2">`🔍`</div>`
          `<div class="text-sm">`cursor-zoom-out`</div>`
        `</div>`
      `</div>`
    `</div>`
  `</div>`
</body>
</html>
論理コード 66 行（40 行制限超過、参照専用）

従来のCSSとTailwindの比較 従来の方法では cursor: pointer のようなCSSプロパティを記述する必要がありますが、Tailwindでは cursor-pointer のようなクラス名で直接宣言できます。

5. 選択制御（select-*）

select-* クラスは、ユーザーがテキストを選択できるかどうかを制御します。

クラス CSS 値 説明
select-none user-select: none 選択不可
select-text user-select: text 選択可能（デフォルト）
select-all user-select: all クリックで全選択
select-auto user-select: auto 自動

(1) サンプル

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 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">``選択制御`</h3>`
      `<div class="space-y-4">`
        `<div class="p-4 bg-gray-50 rounded-lg">`
          `<p class="text-sm text-gray-500 mb-2">`select-none：選択不可`</p>`
          `<p class="select-none">`このテキストは選択できません。ボタンやラベルなどのインタラクティブ要素に適しています。`</p>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg">`
          `<p class="text-sm text-gray-500 mb-2">`select-text：選択可能（デフォルト）`</p>`
          `<p class="select-text">`このテキストは選択できます。本文コンテンツに適しています。`</p>`
        `</div>`
        `<div class="p-4 bg-gray-50 rounded-lg">`
          `<p class="text-sm text-gray-500 mb-2">`select-all：クリックで全選択`</p>`
          `<p class="select-all bg-blue-50 p-2 rounded font-mono">`const apiKey = "abc123";`</p>`
        `</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="bg-gray-900 text-green-400 p-4 rounded-lg font-mono text-sm select-all">`
          npm install tailwindcss
        `</div>`
        <!-- ボタンテキストは選択不可 -->
        `<div class="flex gap-4">`
          `<button class="px-6 py-3 bg-blue-500 text-white rounded-lg select-none cursor-pointer hover:bg-blue-600">`
            ボタンテキストは選択不可
          `</button>`
          `<button class="px-6 py-3 bg-green-500 text-white rounded-lg select-none cursor-pointer hover:bg-green-600">`
            送信確認
          `</button>`
        `</div>`
      `</div>`
    `</div>`
  `</div>`
</body>
</html>
論理コード 46 行（40 行制限超過、参照専用）
💡 ポイント： select-none はボタンやラベルなど、テキスト選択が不要な要素によく使用されます。select-all はコードブロックやコマンドラインなど、ワンクリックコピーが望ましい箇所に使用されます。

6. リサイズ制御（resize-*）

esize-* クラスは、要素をリサイズできるかどうかを制御します。

クラス CSS 値 説明
esize-none
esize: none リサイズ不可
esize-y
esize: vertical 垂直方向のみリサイズ
esize-x
esize: horizontal 水平方向のみリサイズ
esize
esize: both リサイズ可能

(1) サンプル

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 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">リサイズ制御</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-none：リサイズ不可</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-none h-24 focus:outline-none focus:border-blue-500"
                    placeholder="リサイズ不可のテキストエリア"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-y：垂直方向のみリサイズ</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-y h-24 focus:outline-none focus:border-blue-500"
                    placeholder="垂直方向にリサイズ可能なテキストエリア"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize-x：水平方向のみリサイズ</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize-x h-24 focus:outline-none focus:border-blue-500"
                    placeholder="水平方向にリサイズ可能なテキストエリア"></textarea>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-2">resize：リサイズ可能</p>
          <textarea class="w-full p-3 border border-gray-300 rounded-lg resize h-24 focus:outline-none focus:border-blue-500"
                    placeholder="自由にリサイズ可能なテキストエリア"></textarea>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ 試してみよう

従来のCSSとTailwindの比較 従来の方法では esize: vertical のようなCSSプロパティを記述する必要がありますが、Tailwindでは esize-y のようなクラス名で直接宣言できます。

7. スクロール動作（scroll-*）

scroll-* クラスは、スクロール動作を制御します。

クラス CSS 値 説明
scroll-auto scroll-behavior: auto 自動（デフォルト）
scroll-smooth scroll-behavior: smooth スムーズスクロール
snap-start scroll-snap-align: start 開始位置にスナップ
snap-center scroll-snap-align: center 中央にスナップ
snap-end scroll-snap-align: end 終了位置にスナップ
snap-none scroll-snap-type: none スナップなし
snap-x scroll-snap-type: x mandatory 水平スナップ
snap-y scroll-snap-type: y mandatory 垂直スナップ

(1) サンプル

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 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">``スムーズスクロール`</h3>`
      `<div class="flex gap-4 mb-4">`
        `<a href="#section1" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">`セクション1へ移動`</a>`
        `<a href="#section2" class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600">`セクション2へ移動`</a>`
        `<a href="#section3" class="px-4 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600">`セクション3へ移動`</a>`
      `</div>`
      `<div class="h-48 overflow-y-auto scroll-smooth border rounded-lg">`
        `<div id="section1" class="p-4 bg-blue-50 h-48 flex items-center justify-center">`
          `<h4 class="text-xl font-bold text-blue-700">`セクション 1`</h4>`
        `</div>`
        `<div id="section2" class="p-4 bg-green-50 h-48 flex items-center justify-center">`
          `<h4 class="text-xl font-bold text-green-700">`セクション 2`</h4>`
        `</div>`
        `<div id="section3" class="p-4 bg-purple-50 h-48 flex items-center justify-center">`
          `<h4 class="text-xl font-bold text-purple-700">`セクション 3`</h4>`
        `</div>`
      `</div>`
    `</div>`

    <!-- スクロールスナップ -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``スクロールスナップ`</h3>`
      `<div class="flex overflow-x-auto snap-x snap-mandatory gap-4 pb-4">`
        `<div class="snap-center flex-shrink-0 w-64 h-40 bg-blue-100 rounded-lg flex items-center justify-center">`
          `<span class="text-blue-700 font-semibold">`カード 1`</span>`
        `</div>`
        `<div class="snap-center flex-shrink-0 w-64 h-40 bg-green-100 rounded-lg flex items-center justify-center">`
          `<span class="text-green-700 font-semibold">`カード 2`</span>`
        `</div>`
        `<div class="snap-center flex-shrink-0 w-64 h-40 bg-purple-100 rounded-lg flex items-center justify-center">`
          `<span class="text-purple-700 font-semibold">`カード 3`</span>`
        `</div>`
        `<div class="snap-center flex-shrink-0 w-64 h-40 bg-orange-100 rounded-lg flex items-center justify-center">`
          `<span class="text-orange-700 font-semibold">`カード 4`</span>`
        `</div>`
        `<div class="snap-center flex-shrink-0 w-64 h-40 bg-red-100 rounded-lg flex items-center justify-center">`
          `<span class="text-red-700 font-semibold">`カード 5`</span>`
        `</div>`
      `</div>`
    `</div>`

    <!-- スクロールバー非表示 -->
    ``<div class="bg-white rounded-lg shadow p-6">``
      ``<h3 class="font-semibold mb-4">``スクロールバー非表示`</h3>`
      `<div class="flex overflow-x-auto scrollbar-hide gap-4 pb-4">`
        `<div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center text-white">`
          スクロールバー非表示
        `</div>`
        `<div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center text-white">`
          scrollbar-hide を使用
        `</div>`
        `<div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center text-white">`
          水平スクロール可能
        `</div>`
        `<div class="flex-shrink-0 w-48 h-32 bg-gradient-to-br from-orange-400 to-orange-600 rounded-lg flex items-center justify-center text-white">`
          続けてスクロール
        `</div>`
      `</div>`
    `</div>`
  `</div>`
</body>
</html>
論理コード 69 行（40 行制限超過、参照専用）
💡 ポイント： <html> 要素に scroll-smooth を追加すると、ページ全体でスムーズスクロールが有効になります。snap-x snap-mandatory と snap-center を組み合わせるとカルーセル効果が作成できます。

❓ よくある質問

Q group-hover と hover の違いは何ですか？
A hover: は要素自身のホバー状態です。group-hover: は親要素（group クラスを持つ）がホバーされたときに子要素にスタイルを適用します。親子要素間の連動したホバー効果に最適です。
Q peer はどのように機能しますか？
A 要素に peer クラスを追加し、その後の兄弟要素に peer-focus: や peer-valid: などのプレフィックスを使用してスタイルを適用します。フローティングラベルやフォームバリデーションによく使用されます。
Q disabled:opacity-50 が動作しないのはなぜですか？
A disabled: プレフィックスが実際の disabled 属性と一緒に使用されていることを確認してください。Tailwindは .disabled:opacity-50:disabled セレクターを生成するため、要素に disabled 属性が必要です。
Q スクロールスナップを実装するにはどうすればよいですか？
A スクロールコンテナに snap-x snap-mandatory（水平）または snap-y snap-mandatory（垂直）を追加し、子要素に snap-center または snap-start を追加してください。

📖 まとめ

esize-* で要素のリサイズ、scroll-* でスクロール動作を制御

8. 📝 課題

  1. ⭐ hover:、 ocus:、ctive:、disabled: 状態プレフィックスを使用して、完全なインタラクティブ状態スタイリングを持つボタンコンポーネントを作成してください

  2. ⭐⭐ group と group-hover: を使用して、アイコン、テキスト、矢印が連動して変化するナビゲーションメニューを作成してください

  3. ⭐⭐⭐ peer と peer-focus: を使用してフローティングラベル効果を実装し、 ocus: と invalid: 状態を組み合わせてフォームバリデーションスタイリングを実装するフォームを作成してください

▶ サンプル

HTML 
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">
  <!-- TODO: 替换为实际用户头像图片 -->
  <img src="https://i.pravatar.cc/80" class="w-12 h-12 rounded-full" alt="Avatar">
  <div>
    <p class="font-semibold text-gray-900">ユーザー名</p>
    <p class="text-sm text-gray-500">プロフィール</p>
  </div>
</div>
▶ 試してみよう

これはTailwind CSSの基本的なカードコンポーネント例です。

📝 練習問題

  1. 基本（難易度⭐）：Tailwindのユーティリティクラスを使って、レスポンシブなカードレイアウトを作成してください。
  2. 中級（難易度⭐⭐）：ダークモード対応のナビゲーションバーを実装してください。
  3. 上級（難易度⭐⭐⭐）：完全なランディングページを作成し、モバイルとデスクトップで異なるレイアウトを実装してください。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%