CSSでページ全体に設定を適用する方法:html要素に指定-全称セレクタの問題点[スタイルシート]

2019 年 12 月 18 日2019 年 12 月 22 日

Contents

推奨する方法

html要素に適用する。

html {
	font-size: 14pt;
}

フォントサイズを指定する際の単位のひとつ「rem」は、html要素のフォントサイズを基準として指定する相対サイズのこと。

それが「1rem」の値になり、小数点以下も指定可能。

html {
	font-size: 14pt;
}

div {
	font-size: 0.8rem;
}

この例の場合、html要素の子になるdiv要素のフォントサイズは「11.2pt」と指定したのと同じになる。

このrem、あくまでhtml要素のフォントサイズが基準となっているだけで、marginなどのサイズ指定にも使うことができる。

html {
	font-size: 14pt;
}

div {
	margin: 1.2rem;
}

remとは異なり、emと%は親要素の該当プロパティのサイズを基準とした単位のこと。

フォントサイズが基準となっているわけではない。

指定サイズが親要素に依存するということは、HTML構造の親子関係（DOMツリーの入れ子状態）を把握していないと、実際にどのサイズになるのかわかりづらいという欠点がある。

div.parent {
	width: 500px;
	height: 250px;
}

div.child {
	width: 0.8em;
	height: 80%;
}

* {
	font-size: 14pt;
}

html要素に指定する場合に比べて低速になる。

ただし、現在ではブラウザのレンダリングエンジンが最適化されてきたことで、全称セレクタを使ってもたいして遅くはならないので、気にするほどのことでもないらしい。

HTML・CSSでは、基本的にHTMLのDOMツリーで親の要素に指定されたスタイルシートは、特に記述がなくても子など下位の要素へ自動的に引き継がれる。

例：

<div class="example">
	<div></div>
</div>

これを継承というが、実は全称セレクタの設定のほうが優先順位が高いため、そちらの設定が優先されてしまう。

例：

* {
	font-size: 14pt;
}

.example {
	font-size: 12pt;
}

この場合、子のdiv要素のフォントサイズは、親の指定における「12pt」ではなく、全称セレクタの「14pt」となる。

もちろん、それを初めから狙ってやるのならいいのだが、子孫の要素に継承させたい場合に厄介なことになる。

しかも、すべてのスタイル未指定の要素に全称セレクタの設定が適用されることが、特に問題になりやすい。

よって、これを使うのは「どうしてもすべての要素に適用したいとき」に限定するようにしよう。

Posted by takasho