【初心者向け！】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で困っている人はぜひ読んでみてください。
Chromeのキャッシュを確実に消す方法はこちら
【読み放題】kindleアンリミテッドで実は技術書が読める
Amazonに、読み放題のkindleアンリミテッドがあるのですが、実は技術書もあります。
技術書は、3,000円とかが当たり前の値段だったりして結構高いのでkindleアンリミテッドで技術書を読むのも結構アリだなと思ってます。
kindleアンリミテッドは月額980円するのですが、全部無料で読むことができるため、本を買うよりお得。
月に1冊技術書を読むのなら、確実に得するので、本で勉強するのが好きな人は、kindleアンリミテッドに入るのがおすすめです。
初回は30日の無料体験ができて微妙ならすぐに解約できるので、一度登録してみるのはアリなんじゃないかと。