ホーム(記事一覧)へ

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

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

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

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

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

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

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

divテキスト

pテキストspanpテキスト

divテキスト
<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を指定しましょう。

divテキスト

pテキストspanpテキスト

divテキスト
<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が効かない/文字色が変わらない原因と修正方法でした。

関連記事