CSS の規則は重なる
CSS（カスケーディング・スタイル・シート）は、Web ページの見た目を決める言葉です。同じ要素に規則が2つ当たったとき、どちらが勝つかには、決まった順序があります。
学園祭の企画ページの色を例に、その順序を読めるようになります。
このレッスンのゴール
メモ
セレクタの強さを比べて、どの CSS の規則が勝つかを予想できる。
重要な言葉
| ことば | いみ | れい |
|---|---|---|
| セレクタ | どの要素に当てるかを書く部分 | .note |
| 宣言 | 1つの設定。プロパティと値の組 | color: red |
| 詳細度 | セレクタの強さを表す数 | |
| カスケード | 規則が重なったとき、勝者を決める仕組み | |
| 継承 | 親の設定を、子の要素が受け継ぐこと |
学生が入力するセルは、このプレビューでは空白です。
規則はセレクタと宣言でできている
CSS の規則は、セレクタと、波括弧の中の宣言でできています。セレクタは、どの要素に当てるかです。宣言は、color: red のように、プロパティと値を並べたものです。
要素名、. で始まるクラス名、# で始まる id を、セレクタに使えます。
例: 2つの規則を書く
<h2>学園祭の企画</h2>
<p>展示と模擬店があります。</p>
<p class="note">雨の日は体育館で行います。</p>
詳細度が高い規則が勝つ
同じ要素に規則が2つ当たると、詳細度が高いほうが勝ちます。詳細度は、セレクタに含まれる id、クラス、要素名の数で決まります。
id が一番強く、クラス、要素名の順に弱くなります。この教材では、id を100、クラスを10、要素名を1として足します。
例: 詳細度の数え方
| セレクタ | id | クラス | 要素名 | 強さ |
|---|---|---|---|---|
| p | 0 | 0 | 1 | 1 |
| .note | 0 | 1 | 0 | 10 |
| p.note | 0 | 1 | 1 | 11 |
| #intro | 1 | 0 | 0 | 100 |
| body.dark | 0 | 1 | 1 | 11 |
学生が入力するセルは、このプレビューでは空白です。
同じ強さなら、あとの規則が勝つ
詳細度が同じときは、スタイルシートの中で、あとに書いた規則が勝ちます。これがカスケードの名前の由来です。
!important は、この順序を壊します。直しにくくなるので、できるだけ使いません。
練習: 勝つ色を予想する
<p class="note">雨の日は体育館です。</p>
<p class="note" id="alert">中止の場合は連絡します。</p>
よくある間違い
注意
規則を下に書けば、必ず勝つと思う人がいます。強さを決めるのはまずセレクタで、書く順序は、強さが同じときだけ効きます。あとに書いた p は、先に書いた .note に勝てません。
親の設定は子が受け継ぐ
color や font-family のような文字の設定は、子の要素に受け継がれます。これが継承です。
border や margin のような枠の設定は、受け継がれません。子の要素に直接当たる規則があれば、受け継いだ値より、そちらが勝ちます。
ラボの CSS を数える
ラボのページには、style.css があります。スクリプトが、規則の数と宣言の数を数えます。
出る言葉は英語です。rules は規則の数、declarations は宣言の数、most used は一番多く使われたプロパティです。
規則と宣言を数える
docker exec jupyter python3 steps/css.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。