🎵
TailwindCSSについて自分なりのチートシートを作る。#1 疑似クラス編
初めに
TailwindCSSを使うときに、思うように動かせなかったりすることが多いなと個人的に感じていて、なので一度全体的にまとめておこうと思いこの記事を書いています。
以下のサイトで動作確認済みです。もし、誤りを確認した場合はご指摘いただけますと幸いです。
本記事では疑似クラスについてまとめようと思います。
✨初心者向け 疑似クラスってなーに？
疑似クラスは、特定の状況にあるHTML要素にだけスタイルを適用するためのものです。
例えば、「マウスが乗ったときだけ変化させたい」「先頭の要素だけ特別な見た目にしたい」といったときに使います。つまり、UI をリッチにするためのテクニックです！
1. hover, focus, active
| 疑似クラス | プレフィックス例 | 説明 | 主な用途例 |
|---|---|---|---|
hover |
hover: |
マウスカーソルが要素上にあるとき。 | ボタンやリンクの色、背景、影の変化。カードコンポーネントの浮上効果。 |
focus |
focus: |
要素がフォーカスされているとき (例: Tabキーで選択された要素、クリックされた入力フィールド)。 | 入力フィールドやボタンの枠線、背景、影の強調。アクセシビリティ向上。 |
active |
active: |
要素がアクティブになっているとき (例: マウスボタンが押されているボタン)。 | ボタンがクリックされた瞬間のわずかな色の変化や押し込み感の表現。 |
hover 具体例
<button class="rounded bg-blue-400 px-4 py-2 text-white hover:bg-blue-600">ホバーしてみて!<button>
実行例
ホバー前
ホバー時
focus 具体例
<input type="text" placeholder="ここに書いてね" class="rounded border border-gray-300 p-2 focus:border-blue-500" />
実行例
active 具体例
<button class="rounded bg-green-500 px-4 py-2 text-white active:bg-green-700">押してみて!</button>
実行例
2. group-hover, group-focus, peer-hover, peer-focus
より複雑なコンポーネントやレイアウトで、要素間の連携を表現する際に非常に便利です。
| 疑似クラス | プレフィックス例 | 説明 | 主な用途例 |
|---|---|---|---|
group-hover |
group-hover: |
親要素にgroupクラスが適用されている場合、その親要素がホバーされたときに子要素にスタイルを適用。 |
カード全体をホバーしたときに、内部のテキストやアイコンの色を変える。ナビゲーションメニューで親項目をホバーしたときに子項目が変化する。 |
group-focus |
group-focus: |
親要素にgroupクラスが適用されている場合、その親要素がフォーカスされたときに子要素にスタイルを適用。 |
フォームグループ（例: ラベルと入力欄のセット）がフォーカスされたときに、ラベルの色を変える。 |
peer-hover |
peer-hover: |
同じ親を持つ peerクラスを持つ要素がホバーされたときに、別の隣接要素にスタイルを適用。 |
チェックボックスをホバーしたときに、隣接するラベルの色を変える。入力エラー時にアイコンを表示。 |
peer-focus |
peer-focus: |
同じ親を持つ peerクラスを持つ要素がフォーカスされたときに、別の隣接要素にスタイルを適用。 |
入力フィールドがフォーカスされたときに、隣接するラベルの色を変える。 |
group-hover 具体例
<div class="group rounded border bg-white p-4 hover:bg-gray-50">
<p class="text-gray-700 group-hover:text-blue-600">この文字の色が変化する</p>
</div>
実行例
ホバー前
ホバー時
group-focus 具体例
<div class="group rounded border border-gray-300 p-2 focus-within:border-blue-500">
<p class="text-gray-700 group-focus-within:text-blue-600">入力欄</p>
<input type="text" class="ml-2 outline-none" />
</div>
実行例
ホバー前
ホバー時
peer-hover 具体例
<div class="flex items-center">
<input type="checkbox" id="agree" class="peer">
<label for="agree" class="ml-2 text-gray-700 peer-hover:text-green-600">同意します</label>
</div>
実行例
チェックしない時
チェックしてかつホバー時
peer-focus 具体例
<div class="flex items-center space-x-2">
<input type="text" placeholder="ユーザー名" class="peer rounded border border-gray-300 p-2" />
<span class="hidden text-sm text-gray-500 peer-focus:inline">入力中...</span>
</div>
実行例
入力前
入力時
3. checked, disabled, valid, invalidなど
フォームの入力状態やアクセシビリティを向上させるために重要です。
| 疑似クラス | プレフィックス例 | 説明 | 主な用途例 |
|---|---|---|---|
checked |
checked: |
チェックボックスやラジオボタンがチェックされているとき。 | カスタムチェックボックスやトグルスイッチのスタイリング。 |
disabled |
disabled: |
要素が無効になっているとき (HTMLのdisabled属性)。 |
無効なボタンや入力フィールドの見た目の表現（グレーアウトなど）。 |
valid |
valid: |
フォーム要素がバリデーションルールを満たしているとき。 | 入力フィールドの入力値が正しい場合に緑色のボーダーを表示。 |
invalid |
invalid: |
フォーム要素がバリデーションルールを満たしていないとき。 | 入力フィールドの入力値が不正な場合に赤色のボーダーやエラーメッセージを表示。 |
required |
required: |
required属性が設定されているフォーム要素。 |
必須入力フィールドのラベルにアスタリスクを追加したり、背景色を変えたりする。 |
placeholder-shown |
placeholder-shown: |
placeholder属性が表示されているとき。 |
プレースホルダーが表示されている間だけテキストの色やスタイルを変える。 |
checked 具体例
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox h-5 w-5 rounded text-blue-600 checked:border-transparent checked:bg-blue-600" />
<span class="ml-2 text-gray-700">チェックしてね</span>
</label>
実行例
チェック前
チェック時
disabled 具体例
<button class="cursor-not-allowed rounded bg-gray-400 px-4 py-2 font-bold text-white disabled:opacity-50" disabled>送信 (使えないよ)</button>
実行例
valid 具体例
<input type="email" placeholder="メールアドレスを入れてね" required class="w-64 rounded border border-gray-300 p-2 valid:border-green-500" />
実行例
入力時
正しい形式で入力されたとき
invalid 具体例
<input type="email" placeholder="メールアドレスを入れてね" required class="w-64 rounded border border-gray-300 p-2 invalid:border-red-500 invalid:text-red-600" />
実行例
required 具体例
<div class="flex flex-col space-y-1">
<label for="name" class="after:ml-1 after:text-red-500 after:content-['*']"> 名前 </label>
<input id="name" type="text" placeholder="必ず入力してください" required class="rounded border border-black p-2 required:bg-yellow-50" />
</div>
実行例
placeholder-shown 具体例
<input type="text" placeholder="お名前を入力してください" class="w-64 rounded border border-gray-300 p-2 placeholder-shown:text-gray-400 placeholder-shown:italic" />
実行例
4. first, last, odd, even
リストやテーブルなど、繰り返し表示される要素のスタイリングに役立ちます。
| 疑似クラス | プレフィックス例 | 説明 | 主な用途例 |
|---|---|---|---|
first |
first: |
親要素内の最初の子要素。 | リストの最初の項目に特別なマージンやボーダーを適用。 |
last |
last: |
親要素内の最後の子要素。 | リストの最後の項目からボーダーを削除したり、特別なスタイルを適用。 |
odd |
odd: |
親要素内の奇数番目の子要素。 | テーブルの行やリストアイテムにゼブラストライプ（交互の背景色）を適用。 |
even |
even: |
親要素内の偶数番目の子要素。 |
oddと組み合わせてゼブラストライプを実装。 |
first 具体例
<ul>
<li class="first:font-bold">りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
実行例
りんご
バナナ
オレンジ
last 具体例
<ul>
<li>タスクA</li>
<li>タスクB</li>
<li class="last:text-red-500">タスクC</li>
</ul>
実行例
odd 具体例
<ul>
<li class="odd:bg-gray-50 p-2">アイテム1</li>
<li class="odd:bg-gray-50 p-2">アイテム2</li>
<li class="odd:bg-gray-50 p-2">アイテム3</li>
<li class="odd:bg-gray-50 p-2">アイテム4</li>
</ul>
実行例
even 具体例
<ul>
<li class="even:bg-blue-50 p-2">商品A</li>
<li class="even:bg-blue-50 p-2">商品B</li>
<li class="even:bg-blue-50 p-2">商品C</li>
<li class="even:bg-blue-50 p-2">商品D</li>
</ul>
実行例
Discussion