毎日コーディングクイズシリーズ！今回はCSSの疑似クラスについて、実践的なクイズ形式で学習しましょう！
🎯 問題
Webサイトのナビゲーションメニューで、現在のページを表示中の項目を視覚的に区別し、マウスオーバー時に色を変更する機能を実装しています。以下のHTMLに対して、適切なCSSの疑似クラスを使用する必要があります。
<nav class="main-nav">
<ul>
<li><a href="/home">ホーム</a></li>
<li><a href="/about" class="current">会社概要</a></li>
<li><a href="/service">サービス</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
A.
B.
C.
D.
.main-nav a { color: black; } .main-nav a.current { color: blue; } .main-nav a:hover { color: red; }B.
.main-nav a { color: black; } .main-nav a:hover { color: red; } .main-nav a.current { color: blue; }C.
.main-nav a { color: black; } .main-nav a:hover { color: red; } .main-nav a.current:hover { color: blue; }D.
.main-nav a:hover { color: red; } .main-nav a { color: black; } .main-nav a.current { color: blue; }
答えを確認する
✅ 正解：C
正解
正解は C です！
解説
この問題のポイントは、**CSSの詳細度（Specificity）**と**疑似クラスの適用順序**を理解することです。現在のページを表示中の項目は、マウスオーバー時でも青色を維持する必要があります。
- 選択肢A: 正しい基本的な書き方ですが、現在のページ項目にマウスオーバーした時に赤色に変わってしまいます。
:hoverが後に書かれているため、詳細度が同じ場合は後から書かれたスタイルが適用されます。 - 選択肢B: 選択肢Aと同じ問題があります。
.currentが最後に書かれていても、:hover疑似クラスがアクティブな間はa:hoverのスタイルが適用されます。 - 選択肢C: **正解です！**
.current:hoverで現在のページ項目のマウスオーバー時のスタイルを明示的に指定することで、常に青色を維持できます。この書き方により、詳細度が高くなり、一般的な:hoverスタイルを上書きします。 - 選択肢D: 書く順序に問題があります。基本スタイルを先に定義してから、疑似クラスや特定のクラスを後に定義するのが一般的です。また、現在のページ項目のマウスオーバー時の動作が不明確です。
実際の開発では、ナビゲーションメニューの現在のページ表示は重要なUX要素です。ユーザーは常に自分が今どのページにいるかを把握できる必要があり、その視覚的な手がかりがマウスオーバーで消えてしまうのは好ましくありません。
/* 完全なCSS例 */
.main-nav a {
color: black;
text-decoration: none;
padding: 10px 15px;
display: block;
}
.main-nav a:hover {
color: red;
transition: color 0.3s ease;
}
.main-nav a.current {
color: blue;
font-weight: bold;
}
.main-nav a.current:hover {
color: blue; /* 現在のページは常に青色を維持 */
}この解決方法により、通常のリンクはマウスオーバー時に赤色に変わりますが、現在のページを示すリンクは常に青色を維持し、ユーザーにとって分かりやすいナビゲーションを提供できます。詳細度を理解して適切に疑似クラスを使い分けることが、実用的なWebサイト制作には必要不可欠です。
💡 ポイント
- 詳細度の計算：
a.current:hoverはa:hoverよりも詳細度が高いため、優先して適用されます - UXの観点： 現在のページ表示は常に一貫性を保ち、ユーザーの現在位置を明確に示す必要があります
- 保守性： 特定の状態に対する例外的なスタイルは明示的に記述することで、コードの意図が明確になります
- アクセシビリティ： 視覚的な手がかりは色だけでなく、フォントの太さなども組み合わせて使用することが推奨されます
