Help us understand the problem. What is going on with this article?

【CSS】aタグのフォントカラーが変わらない謎【初心に返ろう】

More than 1 year has passed since last update.

Q. 深く考えたことないけどなんでフォントカラーを全体に指定してもaタグの中は変わらないの?

なんかもう経験として知ってたからスルーしまくってたこの疑問。
あえて切り込んで調べてみることにしました!
暇だからじゃないよ。

A. 各ブラウザ(IE、Google Chrome…)でaタグにあらかじめフォントカラーを設定してあるから。

なんと。そんな単純なことだったのか。
なんかがっかりした。
確かにIEのリンクといえば青文字にアンダーライン!とかあるもんねぇ。

ちなみに私はCSSを書くときに最初に

CSS(はじめのほうに記述)
a{
   color:red;
   text-decoration:none;
}

とかなんとか書いてaタグ全体に反映されるようにします。
んで、イレギュラーで違う見た目にしたいときはクラスとかで細かく分けてた・・・んだけど、なにやら便利そうな記事を発見しました。

発見した記事 CSS tips - a タグの色が変わらないときは color: inherit を指定しよう | phiary

color: inherit;

inherit の意味は、親要素のプロパティの値を継承すること。
つまり color: inherit; は親要素のカラーを継承するって意味になる。

例えば、ヘッダーの色を共通で赤くしたいとします。しかも特殊な赤。
いつもの私はこうしてました。

See the Pen aタグの便利な使い方 by かぺ (@kapeking) on CodePen.

まず全体反映用に nav に文字色指定し、a にも同じ色を指定します。

css(上記から抜粋)
nav{ color:#ff0e29; }
nav a{ color:#ff0e29; }

でもこれ、ちょっと2度手間感あるしスマートじゃない。
そこで inherit を使うと・・・

css(いい感じの記述例)
nav{ color:#ff0e29; }
nav a{ color:inherit; }

これでも結果は全く同じ!navで指定したカラーを継承します。
これなら後からリンク色変えても問題ないですね。

今度から私も color: inherit; をガンガン使っていこうと思います!

kape
出身は九州の温泉県。基本的に自分が気になったことをメモとして記事に残します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした