Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@kape

【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; をガンガン使っていこうと思います!

11
Help us understand the problem. What is going on with this article?
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
kape
出身は九州の温泉県。基本的に自分が気になったことをメモとして記事に残します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?