aタグの文字色が変わらない理由

開発

初学者からの質問

CSSで文字色を指定しているのに、
リンク（aタグ）の文字だけが青色のまま変わりません。

.blogtitle {
  color: #333;
}

.daypost {
  color: #333;
}

VS Code上では黒く見えていますが、
Netlifyにアップすると aタグのデフォルトの青色になります。

なぜでしょうか？

結論

aタグ自体にスタイルを指定していないからです。

何が起きているか

HTMLの構造は次のようになっています。

<div class="blogcontent">
  <a href="#">
    <div class="blog">
      <h3 class="blogtitle">記事タイトル</h3>
      <p class="daypost">2030.08.08</p>
    </div>
  </a>
</div>

この状態で、

  • h3（.blogtitle）
  • p（.daypost）

に color: #333; を指定すると、
中の文字は黒く見えます。

しかし、aタグ自体には何も指定していないため、
ブラウザのデフォルトスタイルが適用されたままになります。

aタグにはデフォルトスタイルがある

開発者ツールで確認すると、
次のようなスタイルが当たっています。

a:-webkit-any-link {
  color: -webkit-link;
}

これは CSS ファイルに書いていなくても、
ブラウザが自動で適用するスタイルです。

このスタイルは詳細度が高いため、

.blogtitle { color: #333; }
.daypost { color: #333; }

では上書きできません。

正しい指定方法

リンク全体の色を変えたい場合は、
aタグを直接指定します。

.blogcontent a {
  color: #333;
}

このように書くことで、

  • aタグ自体の色を指定できる
  • ブラウザのデフォルトスタイルを上書きできる

ようになります。

まとめ

  • aタグにはブラウザのデフォルトスタイルがある
  • 子要素に色を指定しても、aタグの色は変わらない
  • リンクの色を変えたい場合は、aタグを直接指定する
  • 開発者ツールで「どのスタイルが適用されているか」を確認する
記事一覧に戻る