【htmlコーディング】cssが効かない！？cssの優先順位を理解して正しくコーディングしよう！

今回は、cssの優先順位を解説します。
コーディングをしていると、どうしても重複して書いてしまうことがあり、気付いたら崩れてしまっていたということも多いです。
cssの優先順位を理解して正しくコーディングしよう！

cssの優先順位

cssの優先順位は、後から記述したスタイルが優先されます。
後からというのは、ひとつのcssファイルの下に記述されているスタイルということです。

例えば以下のようなcssの場合、

p {
    color: #000;
}
p {
    color: #fff;
}

pタグに効くスタイルは、下に記述されている「color: #fff」が優先されるので、pタグで囲まれているテキストは白字になります。

どのタグに何のスタイルを書いたか忘れる

実際、上記のコードのように、同じタグのスタイルを続けて書くことはありません。
ただコーディングをしていると、たくさんスタイルを記述するので、どのタグに何のスタイルを書いたか忘れてしまうことがあります。

コーディング中は、コーディングしている箇所だけをブラウザで確認しながら行うことが多いので、終わってから違うところが崩れてしまっていることがあります。

これも慣れてくると、自分なりのルールが決まってきて、タグではなくクラスにスタイルを書いたり、マージンは必ずbottomにつけるようにしたり等、無駄のない記述の仕方ができるようになります。

最初はどうしても無駄な記述や重複してしまうことが多いですが、しっかり原因の箇所を見つけて直しましょう。

強制的に優先させる魔法の記述

基本的にcssの優先順位は、下に記述されているスタイルを優先させますが、順番関係なく優先させる魔法の記述があります。

「!important」です。

以下のように書きます。

p {
    color: #000 !important;
}
p {
    color: #fff;
}

このように書くことで、順番関係なくpタグに囲まれているテキストは黒字になります。

「!important」の使い過ぎに注意

「!important」は便利ですが、使いすぎには注意が必要です。

「!important」をたくさん使いすぎると、新しくスタイルを書いても全く効かず、ほとんどのスタイルに「!important」を使わないと効かなくなってしまうという現象が起きてしまいます。

こうなると、違う人が触るときや、引き継ぐ時にとても大変です。

「!important」は、絶対に優先させたいスタイルや、どうしようもないときに使用し、なるべく本来の優先順位を頭に入れて記述するようにしましょう。

最後に

以上、cssの優先順位を解説しました。

htmlやcssは、他のプログラミング言語とは違い、処理の順番を気にせず書けて、覚えやすいメリットはあるのですが、膨大なコードになると、逆にどこに何が記述されているか分かりにくいというデメリットもあります。

スキルアップのためにも、日頃から他の人が見てもすぐわかるような記述をするようにしましょう。