【CSS】colorが効かない/文字色が変わらない原因と修正方法

CSSのcolorは文字の色を変えることができます。

「なのに文字の色が変わらない!?なぜ!?」

CSS colorが効かない/文字色が変わらない原因と修正方法を解説します。

aタグの文字色が変わらなくて困っている方はこちらも参照してください。

【原因1】「＊」アスタリスクでcolorを指定している

「＊」アスタリスクはすべてのタグに対してCSSを指定することができるセレクタです。

これにCSSを指定すると下記のようなことが起こることがあります。

<style>
*{
    color: red;
}
p{
    color: blue
}
</style>
<div class="example">divテキスト<p>pテキスト<span>span</span>pテキスト</p>divテキスト</div>

上記は「＊」アスタリスクでcolorを赤に指定しています。

pタグの部分だけcolorを青にしたいとします。

しかしその中にspanなどの別タグがあります。

spanは普段は親のCSSを引き継ぐため、pと同じ青色になるハズなのですが、「＊」アスタリスクの指定に従って赤色になってしまいます。

【修正方法】全体のcolorはbodyに指定する

colorは子要素に引き継がれていきます。

この性質を利用して一番上のhtmlタグである「body」にcolorを指定しましょう。

<style>
body{
    color: red;
}
p{
    color: blue
}
</style>
<div class="example2">divテキスト<p>pテキスト<span>span</span>pテキスト</p>divテキスト</div>

colorに限らず、font-sizeやfont-familyなど子に引き継ぐCSSはbodyに指定しましょう。

「＊」アスタリスクを使うとかえってメンドウなことになります。

なお、bodyにcolorを指定しても「input,textarea,select」は引き継いでくれないため、これらも一緒に指定しましょう。

【原因2】疑似クラス、指定順に負けている

疑似クラスを利用しているときはCSSの優先順位に要注意です。

<style>
.example3 a:link{
    color: blue;
}
a.example4{
    color: red;
}
</style>
<div class="example3"><a href="#" class="example4">リンク</a></div>

同じCSSが別のセレクタで指定されたとき優先順位によって効くCSS、効かないCSSが決められます。

htmlタグは1点、クラスは10点、IDは100点、といったように加算して点数が高いセレクタが優先されます。

セレクタの優先順位についてはこちら↓

上記の場合「a.example4」はクラスが1つ、htmlタグが1つで11点、「.example3 a:link」もクラスが1つ、htmlタグが1つで11点、同点に見えます。

しかし「:link」は「疑似クラス」と呼ばれるもので、通常のクラス同様10点で計算されます。

疑似クラスは下記記事でご確認ください。

よって「.example3 a:link」はクラスが2つ、htmlタグが1つで21点となりこちらが優先されるのです。

また、同点になったときは後述されたセレクタが優先されます。

【修正方法】点数を増やす、同点なら後述する

「.example3 a.example4」のようにセレクタを指定すると、クラスが2つ、htmlタグが1つで21点となります。

同点の場合は後述されたセレクタが優先されるのでCSSが効くようになります。

【原因3】fontのcolor属性はCSSに負ける

fontタグのcolor属性で赤を指定していますが、CSSではcolorで青が指定されています。

<style>
.example5{
    color: blue;
}
</style>
<font color="red" class="example5">テキスト</font>

CSSはhtml属性より優先順位が高くなるためCSSで指定したcolorが効きます。

【修正方法】styleで指定する

<style>
.example6{
    color: blue;
}
</style>
<span style="color:red" class="example6">テキスト</span>

まず、fontタグや一部のhtml属性はhtml5では非推奨になっているので使うのをやめましょう。

fontタグはspanタグします。

html属性はCSSでの指定にします。htmlタグに直接指定したいときはstyleを使います。

CSSで指定すると他のCSSに打ち勝つことができます。ただし優先順位には気を付けましょう。

【原因4】ケアレスミス

上記でもない場合はcolorの問題ではなくCSSに関して単純なミスをしているかもしれません。

下記記事でCSSが効かないとき注意する点を解説していますのでご覧ください。

【まとめ】colorが効かない原因

1. 「＊」アスタリスクでcolorを指定している
   →全体のcolorはbodyに指定する
2. 疑似クラス、指定順に負けている
   →点数を増やす、同点なら後述する
3. fontのcolor属性はCSSに負ける
   →styleで指定する

以上、CSS colorが効かない/文字色が変わらない原因と修正方法でした。