CSS :hover, :focus, :active - インタラクティブステート

インタラクティブステート擬似クラス

:hover、:focus、:active擬似クラスは、インタラクティブでアクセシブルなユーザーインターフェースを作成するための基本です。

LVFHAの順序

リンクをスタイリングする際、擬似クラスは正しく動作するために特定の順序で宣言する必要があります：

a:link    { color: blue; }
a:visited { color: purple; }
a:focus   { outline: 2px solid; }
a:hover   { color: darkblue; }
a:active  { color: red; }

:hover

ユーザーがカーソルを要素の上に置いたときに適用：

.btn:hover {
  background: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

モバイルの注意： タッチデバイスでの:hoverはタップでトリガーされ、ユーザーが他の場所をタップするまで持続します。重要なコンテンツを:hoverの背後に隠さないでください。

:focus

要素がフォーカスを受けたとき（クリック、タブ、またはプログラム的に）適用：

input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
  outline: none;
}

:focus-visible

:focusと同様ですが、ブラウザがフォーカスを表示すべきと判断した場合のみ適用（通常はキーボードナビゲーション）：

button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* マウスユーザーのデフォルトアウトラインを削除 */
button:focus:not(:focus-visible) {
  outline: none;
}

:active

アクティベーションの瞬間に適用（マウスボタン押下、キー押下）：

.btn:active {
  transform: scale(0.98);
  box-shadow: none;
}

アクセシビリティ

• 代替を提供せずにフォーカスインジケーターを削除しない
• :focus-visibleを使用してキーボードユーザーにのみアウトラインを表示
• ホバー状態に十分なカラーコントラストを確保
• タッチデバイス向けに非ホバーの代替手段を提供
• トランジション時間はレスポンシブ性のために短く（150-200ms）