CSSのEM_html/css_WEB-ITnose

サイズ定義に px とパーセント % を使用することに加えて、em と rem も CSS のサイズ定義です。 em は相対的なサイズを表し、1em は HTML 要素のフォント サイズ定義に相当します。次の定義を見てください。コンテンツ< /p>

css は次のように定義されています:

article { font-size: 1.25em }

ほとんどのブラウザはフォントのデフォルト サイズとして 16 ピクセルを使用します。デフォルト値はもちろんカスタマイズ可能で、ここでのarticle要素のフォントサイズは16 * 1.25=20、つまりfont-size: 20px

を使用して表示されます

それでは、それがh1の場合はどうなるでしょうか？

h1 { font-size: 1.25em; }

ここでもベンチマークの1.25倍と定義されているので、やはり20pxでしょうか？いいえ、h1 は、既に 20px の font-size を持つarticle 内にネストされているため、1.25 倍は親要素のarticle のサイズ (font-size:25px) の 1.25 倍になります。 h1 が記事の外側にあり、本文の直接の子要素である場合、16px がデフォルトのサイズとなり、16*1.25 は 20px になります。

em は実際に動的サイズの定義を実現でき、各要素が独自の相対サイズを持つことができます。

上記の h1 のサイズは、ネストされた親要素のサイズに基づいています。これは複合と呼ばれます。あまり動的になるのを好まない場合は、rem を使用してルート要素のサイズの相対的な変更をすべて取得します。

rem はルート要素(html)のフォントサイズを表します。

h1 { font-size: 1.25rem; }

ここでのh1のサイズは20pxになります。

CSS の特異性