customizeWordPressのstyle.cssに書いたCSSが反映されない? CSSの優先順位のお話

blanc note.のカスタマイズ

CSSは、よりHTML内の該当要素に近い位置に書かれたCSSが優先される仕様。
スタイルを記述した位置によっては、他の位置に書いてあるスタイルに打ち消されてしまうことがあります。
CSS優先度は、ざっくり説明するとこんなイメージ。
css-layer
例えばstyle.css(外部CSS)の中に、同じ要素に対するスタイルの指定がある場合、より下(後ろ)のスタイルが優先になります。それだけでなく、より細かくセレクタ(要素)を指定したスタイルが優先です。
さらに、外部CSSより<head>内に書かれたCSSが優先。<head>中でも下に書かれているCSSが優先に。
うわぁー! ややっこしい!!

優先度低 優先度中 優先度高
外部css HTML内に<style>〜</style>で記述 要素に直書き

CSSを書く3つの方法と優先順位について、具体的に説明させていただきますと……。

全体を通して

外部CSSと<head>内<style>〜</style>での、文法は
セレクタ(要素){ プロパティ:値; }
要素に直書きする場合は、
style=”プロパティ:値;”
となります。直書きすることで要素を指定しているため、セレクタの指定は必要ありません。

後ろに書いたCSSが優先

同じセレクタ(要素)に対するスタイルが複数あった場合は、後ろに書いたCSSが優先になります。

20行目では、画像.exの枠線はナシと指定してますが、後ろに書いたCSSが優先になるため「40行目では1ピクセルのやや濃いめのグレーの枠を付けて!」という指定がイキになります。

セレクタを細かく指定したCSSが優先

同じimg.exにスタイルを設定したい場合でも、

という3つの指定があったら、

が優先されます。
ID=”contents”の中にある、class=”entry”の中の<img src=”画像のパス” class=”ex” alt=”画像の説明”>に、薄いグレーの10ピクセルの枠線をつけます。
という指定です。
例えばclass=”entry”の外にある<img src=”画像のパス” class=”ex” alt=”画像の説明”>には、一番上のCSSが適応されます。

C.外部CSS(優先度低)

外部CSSは<head>〜</head>の間に、linkタグを使ってスタイルシートを読み込む方法です。

メンテナンスのことを考えると外部CSSを使うのが好ましいのですが、外部CSSは一番優先順位が低いです。
WordPressでは、プラグインが独自CSSを<head>〜</head>の間に挿入することがあり、外部CSSでスタイルを当てようとしても、効かないことが……。

B.<style>〜</style>で記述した例(優先度中)

<head>〜</head>の間に書かれたCSSは、外部CSSよりも優先されます。

A.要素に直書きしたCSS(優先度高)

紹介した記述方法の中では、要素に直書きした場合が一番優先度が高くなります。

変えたい要素に対するcssが、HTMLに<style>〜</style>で記述されていたり、要素に直書きされていたりすると、外部CSSにスタイルを書いても打ち消されてしまいます。
では、直書きされていた場合はどうしようもないのかというと……ちゃんと解決法があります。

S.!importantのついたCSS(最優先)

すべてを打ち破る必殺技、!importantにおまかせあれ。
外部CSSに記述されたcssだとしても、!importantがついている要素が最優先されます。
外部CSSの中にある最優先したいスタイルに!importantをつけると…

!important;のついているプロパティが優先されます。

優先順位のまとめ

css-layer02
最優先:!important;
優先度高:要素に直書き
優先度中:<style>〜</style>
優先度低:外部CSSで指定
の順で優先されます。
CSSの優先順位の関係を理解した上でカスタマイズをすると、style.cssの内容が反映されない〜〜と、つまづく回数が減るとおもいます。
ちょっとややっこしいですが、試しているうちにわかってくるはずです。
というわけで、カスタマイズするためのcssを書き込む際は、style.cssの一番したにコピペするのが確実。
もし効かなかったら、セレクタを細かく指定してみてください。
それでは楽しいブログライフを♪

UX/UI Designer luelue

イラストレーター→デザイナー→Webデザイナー→Webディレクターとして働く小学一年生のママ。
出産前に描いた「仕事と子育てとの両立」についての見通しが甘く、出産してはじめて、今までのようには働けないのだと気づきました。
好きな仕事だからこそ諦めることが悔しくて、以来、今の自分にできる最善な働き方を求め行動しています。
どんな立場であれ、女性は人生のステージが変わるたびに「生き方が180度ひっくり返ってしまう」と感じた経験から、人生の転機に少数精鋭で働くことを選んだ女性オーナー様を、起業とは切っても切れない 「自分メディアづくり」で応援しています。

コメントは受け付けていません。

ブログ一覧へ戻る