CSSスタイルの優先度

スタイルの優先度

スタイル指定したものが、適応されない。共通スタイルのclass指定したものが適応されない。という場合、指定方法に誤りが無ければ、次に疑うのはスタイルの優先度です。

HTMLでマークアップされた各部品の見栄えを制御する為のスタイル指定は、指定した要素(HTMLタグ)に対しての指定が重複するプロパティだった場合、優先度の高い方の値を適応します。

例えば次の様な場合
 
class名「color1」は、文字の色を黒
class名「color2」は、文字の色を赤
 
と定義されていた場合、同じ要素に対しcolor1、color2　両方を設定した場合はどちらも、文字の色を指定しているので、ブラウザはどちらかを選ぶ事になります。
このどちらを選ぶか?をブラウザは優先度によって決めています。

セレクタ、プロパティ、値の関係

CSSにおける指定方法は、セレクタ、プロパティ、値という構成で定義されています。

上記の様に、指定する装飾(背景色など)の事をプロパティと言い、それに対しての指定(色など)を値と言います。このプロパティと値をまとめてセレクタと呼びます

スタイル適応の優先度ルール

上記の例の様に、その要素に対し同じ値の異なる同じプロパティが指定された場合の優先度は、ブラウザ共通の仕様により決まっています。

どのスタイルが適用されるかは点数方式で下記の計算式での点数が高いものが優先されます。

点数が同じなら、後から読み込まれた方のスタイルが適用

上記の様に、CSSのスタイル指定はセレクタの種類による優先度が決まっています。点数が同じ場合は、後から読み込まれた方のスタイルが適用されます。

従って、同一classの指定を上書きしたい場合は、既にある指定よりも後ろに記述する事で、その指定が適応されます。

当社制作サイトのCSSファイルの優先順位

当社で制作したウェブサイトの読込は次の順で読み込んでいます。

1. 共通スタイル common.css　★
2. lower.css　など、タイプ毎、ページ毎のCSSファイル　★
3. single.css

※ ★印のCSSファイルは、お客様サイドでの編集は極力避けてください。

つまり、「single.css」が一番最後に読み込まれる為、既に指定されているセレクタ(class名)に対しての指定を、このCSSファイルに再指定する事でスタイルが優先適応される事になります。

インラインスタイルでの指定について

優先度の適応ルールの通り、以下で説明する!importantを除いてHTMLタグに対しstyle=""で直接スタイル指定したものが優先されます。

インラインスタイルの指定方法

<p style="color:red;">つれづれなるままに</p>

但し、この方法を使う場合は色指定などPC版、スマートフォン版どちらに適応しても問題ないプロパティのみの指定にしてください。
幅の指定やマージン指定などしてしまうとPC版に合わせたらスマートフォン版で体裁崩れしてしまうなど、思わぬ不具合が発生してしまいます。

「single.css」では、PC版、スマートフォン版で指定を分ける事が出来ますので、その様な指定はsingle.cssに記述してください。

強制的にスタイルを適用する

他で指定したスタイルも最優先に適応する方法として「!important」という命令があります。

使い方は、値の後に「!important」を追加します。

!importantの指定方法

.sample_style{color:red !important;}