知らないと損をする?CSSの基本5つ

(1)CSSの『後出し優先』 (2)!important


(1)CSSでは、同じセレクタで複数の設定を記述した場合、プロパティが重複しないもの、またはプロパティも値も重複した場合はそのまま統合され、プロパティが重複して値が違う場合は『下に書いた方』が適用されます。CSSファイルに p{color:#000000;font-weight:bold;text-align:center;} p{color:#ff0000;text-align:center;} と記載した場合、pは{color:#ff0000;font-weight:bold;text-align:center;}となるのです。なお、複数の外部CSSファイルに同セレクタで複数の設定をした場合も、より下にある外部CSSリンク内の記述が優先されます。 (2)原則は『後出し優先』のCSSですが、この『!important』を使った記述は最優先で適用されます。 p{color:#000000 !important;font-weight:bold;} p{color:#ff0000;} この場合のpは{color:#000000 !important;font-weight:bold;}となりますね。




idとclassの指定テクニック3種


(3)ひとつのタグにはひとつのclass…とは限りません。classは複数設定できます。<p class=""class01 class02""></p>のようにclass名の間にスペースを入れて複数記述すると、.class01と.class02の両方がpに適用されます。 (4)idとclassは同時に指定できます。<p id=""id01"" class=""class01""></p>このように記載すればOKです。idとclassでプロパティが重複して値が異なる場合は、idの値が優先されます。これはタグ内でidの方が先に記述されていても、idの方が優先です。 (5)複数のidやclassが設定された場合にのみスタイルを適用することができます。下記のcssはひとつのタグに.class01と.class02が両方指定されている場合のみ適用されます。 .class01.class02{color:#0000ff;} 5つともCSSデザインでは多用されますので、ぜひ覚えておいてください。