Web制作 上谷亮太

【初心者向け!】CSSの変更がうまくいかないときは優先度がおかしいかも?

CSSを変更してもうまくいかないときはありませんか?

実は、それはCSSの優先度がおかしいのかもしれません。

CSSには優先順位がある

実は、CSSが適応される際に優先順位というのがあります。

何かと言うと、もしCSSが複数のclass名やpタグなどで指定されていると、一番優先度が高いものが適応されます。

仮に以下のようなCSSがあるとしましょう。

p{
color:orange;
font-size:20px;
}
p.text{
color:blue;
}

という感じに記述されていたら、最終的に

このときだと、

p.text{
color:orange;
font-size:20px;
}

最終的にこういう風にCSSが適応されます。優先度高いやつは低いやつを上書きします。

これがCSSの優先度というものです。今回はclass="text"の内容が優先されていますね。

CSSの優先度のルール

CSSの優先度にはちゃんとルールがあります。

なので、CSSの変更がうまくいかない時は、CSSの優先度が原因かもしれません。

ルールを全部書くと長くなるので、初心者向けにとりあえず抑えておけばいいものを記載します。

  • html中のstyle属性(<p style="font-weight:bold;">テキストテキスト</p>):1000点
  • ID(#id):100点
  • class(.class):10点
  • 要素名(pタグとかh1タグとか):1点

これを元に、さっきの上の例に点数をつけると

  • p:1点
  • p.text:11点

なので、p.textとpで重複しているやつは、p.textの内容が優先されたのです。

もう1つ例を出しておきましょう。

<p id="text" class="line-text">テキスト</p>

こんなhtmlがあるときに以下のCSS、

#text{
font-size:20px;
}
.line-text{
color: #000;
}
p{
color:orange;
font-size:24px;
}

こんなCSSがあると、上のhtmlにはどんなCSSが当たるかわかりますか?

答えはこうです。

font-size:20px;
color:#000;

点数をつけてみると

  • #text:100点
  • .line-text:10点
  • p:1点

そのため、最初にidのcssが優先されて、その後classのcolorが優先されます。

今回は、pタグのcssがidとclassですでに指定されていたため、なにも反映されていないのです。

慣れるまではちょっと頭を使いますが、とりあえず、id>class>タグ名の順にcssが反映されると覚えておけば大丈夫です。

と覚えておけば大丈夫です。

優先順位が同じなら下に書いた方が優先される

なお、1つだけ注意が必要な、初心者がやりがちのことがあります。

以下の場合です。

.text{
font-size:20px;
}
.text{
font-size:24px;
}

この時はどちらが適応されるかわかりますか?

答えは、下のcss(font-size:24px)です。

優先順位が同じ時は、下に書いた方が優先されます。

cssを外部ファイルで読み込んでいるなら、より下の方で読み込んでいるcssファイルのものが優先されます。

これもよくやりがちなので、合わせて覚えておくといいでしょう。

【裏技】どうしても適応させたいのなら「!important」

なお、どうしてもcssを適応させたいなら、!importantを使いましょう。

p{
color:#000;
}
これを使えば優先度で負けていてもこっちが優先してcss適応されます。他にも!importantを使っているものがあれば、それは優先度対決に。

まとめ:CSSがおかしいときは優先度も疑ってみる

CSSが効かない原因はキャッシュがクリアされていないなど様々な原因が考えられますが、優先度の場合もあるので、一度優先順位を調べてみてもいいでしょう。

なお、実際にWordPressの子テーマのCSSが効かない状態を原因を探しつつ解決した記事があるので、CSSで困っている人はぜひ読んでみてください。

2018.01.22

wordpressでcssを編集したのに効かない問題の対処と原因と特定する術

最近、友人にWeb制作を教えたりしてるんですが、 こんな質問がきました。 答えは結構簡単だったんですが、本人は自分でめちゃくちゃ調べたらしく、それでもわからないから僕に聞いたみたいです...

Chromeのキャッシュを確実に消す方法はこちら

2019.03.27

html/css/jsの変更が反映されない時はブラウザキャッシュを消してみよう

htmlやcssなどでサイトを制作や微調整しているときに、たまに変更が反映されないことがあります。 理由はキャッシュなのですが、キャッシュを消してもなぜかうまく動かない時もあり、反映されない原因...