それは仕様です。

それは仕様です。

「それは仕様です。」は雑記ブログです! 主にIT関連・考えたこと・勉強したことをここに残しています。 「Re:ゼロから言語の再勉強中。」

それは仕様です。

【第一回】CSSの上書きルールと詳細度についてまとめてみた!【Re:ゼロから始めるCSS入門】

f:id:yantzn:20170502002937j:plain

どうも、やん(@yan_tzn)です。

CSSの勉強をイチから…いいえゼロから始めたいと思います!!

f:id:yantzn:20170502212632j:plain

今回のRe:ゼロから始めるCSS入門、第一回はCSSの上書きのルールや詳細度についてまとめてみました。

CSSの基本的な書式

CSSの基本的な書式は、次のとおりです。

f:id:yantzn:20170502040731p:plain

CSSの適用される順序

後から書いた方が優先される

CSSは、一度設定されたプロパティの値をあとから出てきた、プロパティで上書きされる特徴があります。

See the Pen GmmeoV by yantzn (@yantzn) on CodePen.

上記のように、デフォルト青文字color:#005bef;font-size:30pxにしていますが

後から記述した赤文字color:#f44242font-size:14pxが適用されます。

このように後から記述したCSSがデフォルトで記述していたCSSより強くなります。

CSSの強さは、『セレクタの書き方』と『書かれる順番』に依存します。

あまりにも強すぎる『!important』

CSSのプロパティに、『!important』と追加すると、指定されたプロパティは『最強』になり、上書きすることが出来なくなります。

See the Pen ybbwwj by yantzn (@yantzn) on CodePen.

先ほどは、後から記述した赤文字color:#f44242font-size:14pxが適用されていましたが、 『!important』を追加したことで上書き出来なくなりました。

『!important』はあまりにも強いCSSになるため使う際は注意する必要があります。

CSSの強さを決定する「詳細度」

CSSの強さ・弱さは使用されているセレクタによって決まります。

See the Pen WjORLj by yantzn (@yantzn) on CodePen.

上記のようなCSSが書かれている場合、先に記述している宣言ブロックのスタイルの方がクラス名を指定していることで強いため青色color:#005befで上書きされなくなります。

宣言ブロックに書かれているスタイルの強さは、使われている『セレクタ』の点数で決まります。

その点数を『詳細度』と呼び、点数が高いほど、点数の低いスタイルのプロパティを上書きします。

詳細度の計算方法

CSSで使うセレクタは、『単純セレクタ』というものを組み合わせて記述します。

上のCSSだと、p.testが『単純セレクタ』にあたります。

この単純セレクタには、それぞれ詳細度の点数がついています。

組み合わせた単純セレクタの点数の合計値が、そのセレクターの『詳細度』になります。

全体セレクタ(*):0点
* {
 color:#f44242;/*赤色*/
}
タイプセレクタ、擬似要素:1点
/*タイプセレクタ*/
p{
  color:#005bef;/*青色*/
  font-size:30px;
}

/*擬似要素*/
li:before{
  content:'';
  height:0;
  width:0;
}

/*擬似要素*/
ul li:after {
  clear: both
}
クラスセレクタ、属性セレクタ、擬似クラス:10点
/*クラスセレクタ*/
p.test{
  color:#f44242;
  font-size:20px;
}

/*属性セレクタ*/
input[type="submit"] {
  background: #4687bd;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
}

/*擬似クラス*/
a:hover {
  color: #3dbbb4;
  text-decoration: underline;
}
idセレクタ:100点
/*idセレクタ*/
#header {
  width: 100%;
  height: 60px;
  padding:0 0 0 0;
  background: #fff;
  border-bottom: 1px none;
}
HTMLのstyle属性:1000点
<!-- HTMLのstyle属性-->
<p style="color:#f44242;">それは仕様です。</p>

上記のように単純セクレタの点数は、決まっています。


下記CSSの詳細度を計算してみましょう。

p.test{
  color:#f44242;/*赤色*/
  font-size:20px;
}

pのタイプセレクタで1点、.testのクラスセレクタで10点になり、詳細度は「11点」となります。

「単純セレクタの点数を合計する」という考え方で問題ないはずなので、簡単ですね!

CSSを上書きするケースは非常に多い。そのためメンテナンス性の高いCSSを書くためにもセレクタの詳細度は極力低くし、上書きしやすい状態にしておくのがポイントです。また、詳細度の低いスタイルから先に、詳細度が高いスタイルを後に書くようにするとメンテナンスしやすくなります。

まとめ

いかがだったでしょうか。

僕自身、CSSの上書きルールは何となくわかっているつもりでしたが、

「あれー?CSS反映されないなー」とかいう場面が多々ありました。

この詳細度を全然理解していなかったのでが原因です。

今回、詳細度を理解できたので、メンテナンス性の高いCSSを書けるように意識していこうと思います。

この『Re:ゼロから始めるCSS入門』シリーズ続けていきますので、どうぞよろしくお願いします!

最後まで読んで頂き、ありがとうございます!

Twitterフォロー・読者登録募集中です!