blanc note.をガッツリカスタマイズ【制作者向け】WordPressのstyle.cssに書いたCSSが反映されない? CSSの優先順位のお話

例えばstyle.css(外部CSS)の中に、同じ要素に対するスタイルの指定がある場合、より下(後ろ)のスタイルが優先になります。それだけでなく、より細かくセレクタ(要素)を指定したスタイルが優先です。

さらに、外部CSSより<head>内に書かれたCSSが優先。<head>中でも下に書かれているCSSが優先に。 うわぁー! ややっこしい!!

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

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

全体を通して

外部CSSと<head>内<style>〜</style>での、文法は

セレクタ(要素){ プロパティ:値; }

要素に直書きする場合は、 style=”プロパティ:値;” となります。直書きすることで要素を指定しているため、セレクタの指定は必要ありません。

後ろに書いたCSSが優先

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

例:
20行目 img.ex { border : none; }
40行目 img.ex { border: 1px solid #999999; }

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

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

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

img.ex { border:3px solid #efefef; }
.entry img.ex { border:3px dotted #000; }
#contents .entry img.ex { border:10px solid #fafafa; }

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

#contents .entry img.ex {
border:10px solid #fafafa;
}

が優先されます。

ID=”contents”の中にある、class=”entry”の中の<img src=”画像のパス” class=”ex” alt=”画像の説明”>に、薄いグレーの10ピクセルの枠線をつけます。 という指定です。

例えばclass=”entry”の外にある<img src=”画像のパス” class=”ex” alt=”画像の説明”>には、一番上のCSSが適応されます。

C.外部CSS(優先度低)

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

<link rel="stylesheet" href="http://CSSまでのパス/style.css">

メンテナンスのことを考えると外部CSSを使うのが好ましいのですが、外部CSSは一番優先順位が低いです。

WordPressでは、プラグインが独自CSSを<head>〜</head>の間に挿入することがあり、外部CSSでスタイルを当てようとしても、効かないことが……。

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

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

<style type="text/css">
img.ex {
margin-bottom:1em;
}
</style>

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

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

<img class="ex" src="画像のパス" alt="ALT" style="margin-bottom:3em;">

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

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

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

img.ex {
margin-bottom:4em !important;
}

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

優先順位のまとめ

優先!important;
優先度高要素に直書き
優先度中<style>〜</style>
優先度低外部CSSで指定

の順で優先されます。 CSSの優先順位の関係を理解した上でカスタマイズをすると、style.cssの内容が反映されない〜〜と、つまづく回数が減るとおもいます。

ちょっとややっこしいですが、試しているうちにわかってくるはずです。 というわけで、カスタマイズするためのcssを書き込む際は、style.cssの一番したにコピペするのが確実。

もし効かなかったら、セレクタを細かく指定してみてください。 それでは楽しいブログライフを♪

blanc note.をガッツリカスタマイズ【制作者向け】一覧へ