Webサイトのスタイルを整える際、多くの人が一度は「なぜ <a> タグだけ色が変わらないの？」という疑問にぶつかります。実際に <div> に color: red; を指定しても、<a> タグの文字色は青いままです。今回は、その理由とCSSの継承・優先順位の仕組みについて、初心者でもわかりやすく解説します。
<a> タグの色が親要素から継承されない理由
- ブラウザの「ユーザーエージェントスタイル」が原因
- CSSの優先順位と継承の基本
ブラウザの「ユーザーエージェントスタイル」が原因
<a> タグの色が青いのは、ブラウザ側がデフォルトで以下のようなスタイルを設定しているからです。
a {
color: blue;
text-decoration: underline;
}
a:visited {
color: purple;
}
つまり、開発者が何もスタイルを設定していない場合でも、ブラウザ自身が <a> に色を直接指定しているのです。
CSSの優先順位と継承の基本
CSSには以下のような優先順位のルールがあります。
| 優先度 | 内容 |
|---|---|
| 高 | 開発者が直接セレクタで指定したスタイル（a { color: red; } など） |
| 中 | 開発者が親要素で指定し、子要素が継承するスタイル（div { color: red; } → 子へ） |
| 低 | ブラウザのユーザーエージェントスタイル |
しかし、直接指定は継承よりも強く適用されるという重要なルールがあります。
したがって、div { color: red; } と指定しても、a に color: blue; がすでに直接指定されているため、赤ではなく青が適用されるのです。
<p> は赤くなるのに <a> だけ青いのはなぜ？
以下のHTMLとCSSを見てみましょう。
<div>
<a href="#">google</a>
<p>yahoo</p>
</div>
div {
color: red;
}
結果：
<p>は赤 → 親のcolor: red;を継承している<a>は青 → ブラウザがcolor: blue;を直接指定している
解決策：<a> に color: inherit; を指定しよう
親の色を反映させたい場合、明示的に以下のように指定します。
a {
color: inherit;
}
これにより、親要素の color を <a> が正しく引き継ぐようになります。
応用：ホバー時の色も親から統一したいとき
さらに応用して、ホバー時に <li> 全体の背景色や文字色を変更する場合は、以下のように書きます。
li:hover {
background: #fa8072;
color: #fff;
}
li:hover a {
color: inherit;
}
または、より確実に <a> 側を直接指定する形もアリです。
li:hover a {
color: #fff;
}
DevTools でスタイルの継承関係を確認する方法
Chromeなどの開発者ツールで <a> 要素を選択し、「Computed（計算後）」タブを開くと、現在適用されているスタイルと、どのスタイルが勝ったのかを確認できます。
継承されなかった理由を視覚的に確認できるのでおすすめです。
まとめ
| 問題 | 解決法 |
|---|---|
<a> の色が親から継承されない | a { color: inherit; } を指定する |
li:hover 時に色が変わらない | li:hover a { color: ○○; } を追加 |
| UIを統一したい | a を display: block にする |
<a> タグが青いままなのは「あなたのミス」ではなく、ブラウザの仕様によるものです。だからこそ、継承のルールと優先順位を知っておくことで、スタイルの思い通りの制御ができるようになります。
