Deprecated: implode(): Passing glue string after array is deprecated. Swap the parameters in /home/hakoweb/www/z-tree.jp/wp-content/themes/cocoon-master/lib/seo.php on line 438

importantについて~なぜだめなのか~


Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 15

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 15

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 15

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 15

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 15

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 15

Notice: Trying to access array offset on value of type null in /home/hakoweb/www/z-tree.jp/wp-content/plugins/codepen-embedded-pen-shortcode/codepen.php on line 16

keitaです。以前、importantについて解説してきましたが、

なぜだめなのかについて説明いきたいと思います。

初心者に誤ったことを教えてはいけない。

ある方のTweetで「スクールで何かあったらimportantを使えばいいというのを聞いた」みたいな書き込みがありました。以前に私の記事にも書いたように普通にCSSを書いている段階ではimportantを書いてはいけない的なことを書きましたが、それを多用させることを誘発させている人がいるのは残念に思います。

ならなんでimportantは使ってはいけないんだよ!

こう思った方もいるはずです。以前の記事でちょっと端折って書いたのは反省していますし、CSSの原則も詳細に書かずにいたことについてはまずかったかなあと思います。

CSSの読まれる順から説明していきます。

CSSの読まれる順

CSSの読まれる順は

上から下へ読み込まれますというのは以前説明したとはと思いますが、

その他にこの原則があります。

  1. important
  2. インラインスタイル
  3. idセレクタ
  4. class セレクタ

この順番で読み込まれます。

インラインスタイルとは?

<div style="color:red">
あああ
</div>
あああ

HTMLに直接CSSを書く方法の事を言います。直接はあまり使用しません。

実際に書いてみる

これはあくまで検証なのでこの書き方は正しくはないことをご承知ください。

その1

例えばこのHTMLがあり

<div id="green" class="red blue">
あああああ
</div>

このCSSがあるとします。

.red{
color:red;
}

#green{
color:green;
}

.blue{
color:blue;
}

See the Pen ex01 by Saito Keita (@saito-keita) on CodePen.default

上から下に読まれるのになんで緑色?

このCSSの場合、idセレクタが一番優先されるので、上記の3と4しかないので3のidが優先されます。

その2

<div id="green" class="red blue">
あああああ
</div>

HTMLはさっきと同じ。

.red{
color:red;
}

#green.blue{
color:blue;
}

#green{
color:green;
}

See the Pen ex02 by Saito Keita (@saito-keita) on CodePen.default

後に書かれているのになんで、青が優先?

CSSのセレクタにクラスが含まれると、id.classのように指定をすると、そのクラスが優先されます。

ちょっと複雑にしてみましょう

文字に段落を付けてみます。pタグを使います。

<div id="green" class="red blue">
    <p>
    あああああ
    </p>
</div>
p{
color:yellow;
}
.red{
color:red;
}

#green.blue{
color:blue;
}

#green{
color:green;
}

See the Pen ex03 by Saito Keita (@saito-keita) on CodePen.default

今度は一番最初のpタグの黄色が適用されましたね。

なんで黄色?

これは、タイプセレクタといい、<div>や、<p>を直接CSSを当てるやり方です。

青にしたい場合どうすればいいの?

こう書きます。

p{
color:yellow;
}
.red{
color:red;
}
//修正
#green.blue p{
color:blue;
}

#green{
color:green;
}

See the Pen ex4 by Saito Keita (@saito-keita) on CodePen.default

青になりましたね。なぜこうなったかというと、#green.blue の子要素のpを青にしなさいよ。
という指定を入れたからです。こうした指定をした場合、直のタイプセレクタよりid,classを指定し、その子要素のタイプセレクタのCSSが優先されます。これを詳細度といい、
pより、#green.blue pの方が詳細度が高いので、そちらが優先されるわけです。

もっと進展して

HTMLがぐちゃくちゃになってしまったので、リセットして別の問題を出したいと思います。

以下のHTMLとCSSを書きます。

<div id="sample-ex" class="back-red">
   <div class="back-blue">
      <p>
       黄色!
      </p>
   </div>
</div>
#sample-ex.back-red{
  width:300px;
 margin:0 auto;
 padding:20px;
 background:red;
 color:blue;
}

.back-blue{
  background:blue;
  color:white;
  padding:20px;
}

.back-blue p{
  color:yellow;
}


See the Pen ex05 by Saito Keita (@saito-keita) on CodePen.default

子要素に指定ある .back-blue pがあるため、黄色が優先されます。

禁断のimportant

次にこんなちょっとカオスなコードを入れていきます。

#sample-ex.back-red{
  width:300px;
 margin:0 auto;
 padding:20px;
 background:red;
 color:blue;
}

.back-blue{
  background:blue;
  color:white !important;//ここに入れる
  padding:20px;
}

//ここを追加
#sample-ex.back-red p{
  color:black;
}

.back-blue p{
  color:yellow;
}

See the Pen ex08 by Saito Keita (@saito-keita) on CodePen.default

あれ?白じゃないの?

これがimportantの落とし穴です。いくら!importantを入れても、詳細度が高いセレクタが優先されるので、それをつぶそうとした結果、 !important だらけのコードが生まれるものと思われます。

CSSの原則を守ればimportantは必要ない

CSSのセレクタの書き方をちゃんと覚えれば、またその原則を覚えれば、importantは必要ありません。importantを使うと大きくなれば大きくなるほど後の修正に手間がかかってしまい、結果コードの破綻につながります。なのでしっかり守りましょう。私も気を付けます。

参考になるサイト

【CSS入門】CSSの上書きルールと詳細度のまとめ
どうも、やん(@yan_tzn)です。 今回は、CSSの上書きのルールと詳細度についてまとめてみました。 CS…
CSSの優先順位を理解しよう(!importantの使い方も)
「CSSの指示が効かない。どうして?」 「CSSが効かなかった。修正に時間がかかりすぎる。」 正しいCSSの設定が効かないことがよくありますし、「効かない」ことをどうにかしようとして、更に設定が複雑に

私よりも詳細に説明してあるので、ご覧になってはいかがでしょうか。

コメント

タイトルとURLをコピーしました