:hover :focus :activeと:visited
一般的なCSS疑似クラスを使って、リンクやボタンのインタラクティブな状態をスタイル設定します。
「:hover :focus :activeと:visited」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
擬似クラスとは
擬似クラスは、要素の状態や他の要素との関係に基づいて要素を選択します。単一のコロン : で始まり、HTML に属性を追加する必要はありません。
:hover
:hover は、ユーザーのポインターが要素上にあるときに適用されます。最も一般的なインタラクティブ状態のセレクターです。
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus は、要素がフォーカスを受け取ったとき（キーボードの Tab キーやプログラムによるフォーカスによって）に適用されます。アクセシビリティに不可欠です。
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible は :focus の改良版です。フォーカスがマウスではなくキーボード経由で得られた場合にのみフォーカスリングを表示します。これにより、マウスクリック時にリングを表示せず、キーボードユーザーにはフォーカスインジケーターを提供できます。
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within は、子孫要素のいずれかにフォーカスがあるときに要素へ適用されます。フォームコンテナーや検索バーがアクティブなときのスタイル設定に便利です。
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active は、マウスクリックやタッチによって要素がアクティブ化されている間に適用されます。インタラクティブ要素に視覚的なフィードバックを提供できます。
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited は、ユーザーがすでに訪問したリンクにスタイルを適用します。プライバシー上の理由から、:visited でスタイルを設定できるプロパティは限られています（color、background-color、border-color、outline-color）。
<a href="#" class="demo-visited">Visited link</a>
リンク状態の順序（LVHA）
4つすべてのリンク状態にスタイルを設定する場合は、詳細度に関する問題を防ぐために LVHA の順序に従います：L（リンク）、V（訪問済み）、H（ホバー）、A（アクティブ）。
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
タッチデバイスでのホバー
タッチスクリーンには、マウスと同じ意味でのホバー状態はありません。タップ時に :hover が一時的にアクティブになることがあります。タッチ専用の操作には、:active または @media (hover: none) メディアクエリを使用してください。
状態の組み合わせ
擬似クラスをつなげて、複数の状態を同時にスタイル設定できます：
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
ホバー状態のトランジション
スムーズなホバー効果を作るには、:hover 状態ではなくベース状態にトランジションを設定します。これにより、両方向でトランジションが実行されます：
<button class="btn demo-hover">Hover transitions smoothly</button>
確認問題
マウスクリックではなく、キーボード操作時にのみフォーカススタイルを表示する擬似クラスはどれですか？
まとめ
:hover はポインターが要素上にあるとき、:focus は入力がフォーカスを受けたとき、:active はクリック中、:visited は訪問済みリンクに適用されます。キーボード操作時のみフォーカスリングを表示するには :focus-visible を使用してください。リンク状態には LVHA の順序を使用します。アクセシビリティのため、常に視認できるフォーカスインジケーターを用意してください。
よくある質問
「:hover :focus :activeと:visited」レッスンは無料ですか？
はい。「:hover :focus :activeと:visited」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「:hover :focus :activeと:visited」で何を学びますか？
一般的なCSS疑似クラスを使って、リンクやボタンのインタラクティブな状態をスタイル設定します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「:hover :focus :activeと:visited」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- :hover :focus :activeと:visited
- :nth-childと:nth-of-type
- :not()、:is()、:where()
- :checked、:disabledとフォーム状態の疑似クラス