カスタマイズをしていると、よく遭遇するのが「思ったように反映されない」トラブル。
CSSトラブルは、WordPress初心者の方はもちろん、有識者の方でも陥りがちなエラーのようです。
この章では
※「他の記述が優先されている」エラーを解決するためには、まずセレクタとは何なのかを理解する必要があります。
ですがこの章にまとめると内容が混濁してしまうので、先に下記のリンク記事を読んでいただくと分かりやすいかと思います。
記述の優先とは
記述の優先＝CSSの優先順位のこと
CSSの優先順位＝詳細度という
色んな場所に、色んな方法で記述されてるCSS。
それだけに、CSSに競合が起きて、どのスタイルを反映させたら良いのかブラウザが混乱しないようにするために、あるルールに従って反映させる優先順位が決められています。
①セレクタの指定方法
②記述した場所と読み込む順番
①セレクタの指定方法とは【4例】
重要 ←この見出しの文字色を赤に変えたい
・「重要」の文字色を赤にするためのCSSを記述
* {color:red;}
*(アスタリスク)は、すべての要素に対してスタイルを指定するユニバーサルセレクタです。
個別に指定したいものが無い場合は、この記述でまとめることができます。
なので本来ならこの記述で、指定通り″重要″と赤文字で表示されるのですが、他にも下記のような複数の記述がある場合、スタイルの競合が起きて正しく反映されなくなってしまいます。
h2 {color:blue;}
h2という見出し要素タグで、見出しの文字色を青色に指定してる記述がある
.midashi{color:green;}
.midashiというクラス名で、見出しの文字色を緑色に指定してる記述がある
#title{color:black;}
#titleというid名で、見出しの文字色を黒色に指定してる記述がある
するとどうなるかと言うと…
これが、思ったように反映されない原因ナンバー1です。
※ちなみに上の3つの優先順位は、黒 ＞ 緑 ＞ 青 ＞ 赤で、赤が1番弱くなります。
目次へ戻る詳細度は点数で決まる
詳細度は点数制で評価され、セレクタの書き方によって変わる
詳細度の点数の高いものが優先順位も高い
類似したCSSが複数ある場合、より詳しく記述してあるセレクタほど優先度が高くなります。
とは言え、詳しい記述だから優先するという単純な仕組みではなく、セレクタに割り振られている「点数」によって優先度を決めていると理解するのが正しいです。
詳しい記述になるほど点数も高くなるため、結果としてはより詳しく記述してあるセレクタほど優先度が高いという捉え方で間違ってない気もするのですが(笑)
では、「点数制で評価される」とはどういうことなのか。
分かりやすく砕いていきましょう。
よく使うセレクタ4種での比較
| セレクタ名 | 記述 | 点数 |
| id | #titleなど[#]を用いた記述 | 0.1.0.0 |
| クラス | .midashiなど[.]を用いた記述 | 0.0.1.0 |
| タイプ(要素) | [h1][p][div][span][table]など | 0.0.0.1 |
| ユニバーサル | * すべての要素に適用 | 0.0.0.0 |
[.]で区切られている4つの数字。
これがセレクタに割り振られている点数です。
左側の数字が大きいものほど評価が高くなる＝優先度が高くなります。
上の表で言うと、下にいくほど評価が低くなり、そしてこの点数は、より詳しい記述をするごとに加算されていきます。
p.midashi{color:green;}
p.midashi＝タイプ(要素)＋クラス
| タイプセレクタの点数 | クラスセレクタの点数 |
| 0.0.0.1 | 0.0.1.0 |
| p.midashiの評価点数 | |
| 0.0.1.1 | |
p#midashi{color:red;}
p#midashi＝タイプ(要素)＋id
| タイプセレクタの点数 | idセレクタの点数 |
| 0.0.0.1 | 0.1.0.0 |
| p#midashiの評価点数 | |
| 0.1.0.1 | |
といった感じです。
このふたつで比較すると、左側からの数字が大きい記述例②[p#midashi]の方が優先されます。
…と、点数のことが何となく把握できても毎回計算するのは面倒ですよね。
慣れるまでは、自分が算出した点数で合ってるのか自信も持てません。
そんな時は、Specificity Calculatorを使って点数を計算してもらいましょう。
では、まったく同じ評価点数の記述がある場合はどうなるのでしょうか。
同じ評価の記述がある場合の優先順位【1】
ここで、記述した場所と読み込む順番が関係してきます。
より分かりやすいよう、記述した場所、読み込む順番のふたつに分けて書いていきますね。
記述した場所とは
同じスタイル指定が複数あった場合、CSSの基本として、後から書かれたものが優先されます。
「上書きの原理」です。
CSSの記述の順番を変えるだけで済むので、最も簡単に変更ができます。
h2 {color:red;}
h2 {color:blue;}
上記のように同じセレクタ(または同じ点数の記述)が複数ある場合、後に書いてる方が優先されるので、見出しの文字色は青になります。
これを赤に修正したい場合は、下記のようにふたつの記述の順番を変えるだけで解決します。
h2 {color:blue;}
h2 {color:red;}
もし「上書きの原理」が原因だったら、わざわざ打ち変えなくてもコピペで入れ替えることができるので簡単ですね。
ただし、点数に違いがある場合は点数の高い方が優先されるので、記述の場所は無効になります。
同じ評価の記述がある場合の優先順位【2】
次は読み込む順番についてです。
まず、CSSの記述場所は3箇所あります。
①index.html[ページのhead内]
②インライン[記事上で直接指定など]
③外部CSS[style.css]
この3箇所の内、どれから先に読み込まれ、どれが最優先されるのかということです。
最も優先されるのは②のインライン記述です。
※インライン記述については後述で解説してるので、ここでは割愛します。
では残りの①と③、どちらが優先されるのでしょうか。
答えは「後から読み込まれた方」です。
え？ですよね。どっちが後から読み込まれるねん！って話ですよ。
実はこの読み込む順番、ちょっと曲者なんです。
基本は先にindex.htmlが読み込まれ、外部CSSが後に読み込まれるため、外部CSSに記述されたものが優先されると認識してOKです。
ですがメンテナンスや構造設計の関係から、外部CSSより後にindex.htmlを記述するのが一般的なため、このふたつの読み込み順が変わることがあるらしいのです。
実際私がこの手のエラー対応をしたわけではありませんし、この読み込み順の謎についての詳しい情報も見かけたことが無いので、これ以上の詳細を掲載できないのが辛いところですが…。
使用テーマやスキンが更新された時にデザイン崩れが起きたり、CSSを編集する時は必ず子テーマをいじるよう推奨されてるのは、もしかするとこういった理由からなのかな？なんて、勝手ながら推測したりしてます。
いずれにせよ私にはどうにもできない部分であることは間違いないので、CSSが反映されない原因がもしここにあった場合は、諦めるしかないと思ってます。
では最後に、ここまで書いてきた方法を覆す「さらに強い記述法」を解説していきます。
目次へ戻るさらに強い記述
上記で解説してきた記述方法よりも、さらに強い優先度をもつ記述法があります。
①インラインスタイルシート形式
②!important(インポータント)
のふたつです。
このふたつの記述法は断トツで点数が高く、記述した場所や読み込む順番の効果がありません。
点数判定の方が重視されるルール上、上書きの原理や読み込む順番が通用しないのです。
※インラインスタイル同士を判定する場合は、より詳しく記述されてる方を優先、または上書きの原理が適応されます
上記で解説してきた方法で「CSSが反映されない」エラーを解決できない場合、数あるCSSの中に、このさらに強い記述のどちらかが書かれていると考えて良いでしょう。
使用してるテーマの「親テーマのCSS」に記述されていたり、導入してるプラグインに記述されてる場合は致命的なリスクを伴うので、変更する際はくれぐれも慎重に。
現状の私にはまだ出来ませんが、慣れてきてより複雑な凝ったカスタマイズをしたくなった時は必要になってくる記述法なので、頭の片隅にでも覚えておいてくださいね。
ではここから、インラインスタイルとインポータントに分けて解説していきます。
インラインスタイルとは
①インラインスタイルシート形式
とは、cssかhtmlのどちらかに記述して指定するもので、点数は[1.0.0.0]になります。
・cssに記述＝指定した要素を持つすべてのタグに反映
・htmlに直接記述＝その部分だけ反映
<html>
<head>
<style type="text/css">
a {color:red;}
</style>
</head>
<body>
<a href="#">参考記事はこちら</a>
</body>
</html>これは「文書内のすべてのリンク(a)を赤文字にする」という記述で、
<style type="text/css">
a {color:red;}
</style>の部分がインラインスタイル形式になります。
<div style="color:blue">この文字は青色に</div>こちらは、ページ上で直接指定した文字のみ青色になります。
<p>p段落の中の<strong>一部の文章をstrongタグ(太字)で囲み</strong>、デザインを変える</p>p段落の中の一部の文章をstrongタグ(太字)で囲み、デザインを変える
ビジュアルエディターで記事を書き、強調させたい文字がある時にエディター機能を使って色やサイズを変えると、コードエディター(またはHTML編集)で見た時に＜＞で閉じてある記述が載ってますよね。
あれが最も分かりやすいインラインスタイルです。
そういった、ページ上で直接文字色や文字サイズを変えるなどのカスタマイズする場合がこの「段落(p)の中の文字デザインを変える記述」に当てはまるので、html上でのインラインスタイルは、初心者の私達が1番馴染みのある記述かなと思います。
※エディターの表示はバージョンによって違い、ビジュアル編集・テキスト編集とも言います
もしcssとhtmlに同じ要素を指定してるインラインスタイルがある場合は、「記述した場所」による優先順位が適応され、htmlに直接記述しているインラインの方が優先されます。
ページ上で直接カスタマイズした部分に反映されないエラーがまず出ないのは、インラインスタイルが強い記述だからですね。
CSSで指定してあるどの記述よりも優先されていることが分かります。
インポータントとは
②!important
とは、{color:red!important;}のように、元々ある記述に!importantを足すだけの方法です。
!importantは記述優先度が最も高いため、①のインラインスタイルを打ち消せるのはこの記述法しかありません。
ですが最強であるがゆえに他の記述にも影響を与える場合があるので、!importantの複数使用は推奨されていません。
「最優先の記述」がいくつもあったら、一体どれを最優先させたいねんっ！とブラウザが混乱してエラーを起こすのも当然ですよね。
!importantの使用は、本当に優先させたいスタイルがある場合の最終手段と認識していただければOKです。
まとめ
・「他の記述が優先される」とは
①セレクタの指定方法で優先順位が変わる
②優先順位(詳細度)は点数制
③記述した場所や読み込む順番にも優先順位がある
④-①②③のルールを無視する強い記述がある
・CSSが反映されない原因「他の記述が優先されている」場合の解決法
①より詳しい記述(点数の高いセレクタ)に書き変える
②記述してある場所(順番)を入れ替えてみる
③-①②でダメな場合のみ!importantを使う
この章で解説した方法を試してもCSSが反映されない時は、ブラウザの検証機能(デベロッパーツール)を使って、どの指定が有効になってるのか確認してみましょう。
この手のエラーはややこしくて投げ出したくなりますが、有識者の方でも頭を悩ませるエラーでもあるようなので、難しくて当然か…くらいにゆったり構えつつ頑張りましょうね！
目次へ戻る
それではまた♪
-see you-
コメント