19/4/30学習記録『パンくずリスト作成とCSSボックスモデル』
ジーコ
未経験からのWeb独学戦記
19/5/1学習記録① CSSレイアウト、上書きの原則
ジーコ
記事内に商品プロモーションを含む場合があります
CSSの上書き原則とは。3つの考え方がある。
１．継承：親要素に設定したプロパティの値の一部は、子孫要素にも適用される。
２．詳細度：より多くの要素に適用されるスタイルは、特定の要素だけに適用されるスタイルで上書きされる。
３．後出し：先に出てきたスタイルは、あとからでてきたスタイルで上書される。
※２と３を合わせて、「カスケード」と呼ばれている。
１．継承
ある要素(親とする)に指定されたプロパティの値が、その子孫要素にも適用されること。
<body>
<h1>header</h1>
<p>text</p>
</body>body {
font-family: sans-serif;
}
bodyに指定したfont-familyは、その子要素である<h1>と<p>にも適用される。
ただし、全てのプロパティが継承されるわけではない。
継承されるプロパティ
- フォント関係のプロパティ(サイズ、色、種類など)
継承されないプロパティ
- 背景画像や背景色など、背景関係のプロパティ
- ボックスモデル（paddingやmargin、borderなど）関係のプロパティ
- その他にも、多くのプロパティが子孫要素には継承されない。
継承されないプロパティが多いので、フォント関係は継承すると覚えておけば良さそうだ。
２．詳細度
セレクタによって異なる「点数」で、優先順位が決定する。
点数が高いスタイルが、点数の低いスタイルを上書きする。
セレクタごとに点数は決められており、加算した合計点で優先順位が決まる。
セレクタ別詳細度と、その計算
| セレクタ | 例 | 点数（詳細度） |
|---|---|---|
| タグのstyle属性 | <div style=”color: blue;”> | 1000 |
| id | #id | 100 |
| class、属性、疑似クラス | .class、[type=”text”]、:active | 10 |
| タイプ、疑似要素 | div、after | 1 |
| 全称セレクタ | *（アスタリスク） | 0 |
加算式のため、例えば 「div .container p」というセレクタの場合、「1点＋10点＋1点」で詳細度が12点となる。
先に「div .container」で適用していたものと同じプロパティを新たに指定したら、上書きされるという流れだ。
詳細度が高いとはいえ、「id」や「タグのstyle属性」は基本的に使わないほうが良い。
特に「タグのstyle属性」の場合、HTMLに記述するので管理が難しくなる。
「タグのstyle属性」よりも優先される「!important」
プロパティの最後に !important と記述すると、セレクタの詳細度に関係なく、必ず適用となる。デザイン変更、サイト更新時に困ることになるので、原則使用しない。
３．後出し優先
詳細度が同じセレクタが２回以上でてきた場合、後からでてきたスタイルが優先される。
<div class="content">hogehoge</div>上記HTMLに対するCSSを例に上げてみよう。
.content {
color: red;
}
~~~
.content {
color: blue;
}上記CSSでは、同じ「.content」クラスに対して同じ「color」プロパティが指定されている。
この場合、後からでてきたスタイルが優先されるため、ウェブページに表示されるのは、 hogehoge ではなく hogehoge となる。
ABOUT ME
