CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

px(ピクセル)

ピクセルという言葉は皆さんもよくご存知だと思います。次に、この単位に関するちょっとした豆知識をご紹介します。

ピクセルは、画像と要素という単語で構成されています。ピクセルは絶対的な自然長の単位ではありません。たとえば、同じ 1 ピクセルのサイズの「自然長」は、デバイスによって異なります。画像を拡大すると、画像が小さな正方形で構成されていることがわかります。各小さな正方形は 1 ピクセルです。ズームが大きくなるほど、1 ピクセルの自然長が長くなります。したがって、同じ自然長の画像に含まれるピクセルが多いほど、画像は鮮明になります。

それら

現在のオブジェクト内のテキストのフォントサイズに対する相対値です。1em=100% というパーセンテージ単位としても理解できます。では、CSS スタイルで em がどのような効果をもたらすかを見てみましょう。

現在の子要素にフォントサイズが設定されていない場合 (ブラウザーのデフォルトのフォントサイズは 16 ピクセル)、子要素がフォントサイズを設定します。 font-size:1em;の場合、子要素のフォントサイズは親要素の 100% x 16 ピクセル = 16 ピクセルになります。 font-size:1.5em;の場合、子要素のフォントサイズは 24 ピクセルになります。

p{
    フォントサイズ:1.5em;
}
div{
    フォントサイズ:1.5em;
}
<div>
    <p>
        フォントサイズ</p>
</div>

ここでの「フォントサイズ」は1.5 x 1.5 x 16 = 36pxです

親要素のフォントサイズは子要素に継承されますが、継承される値は em 値ではなく px 値です。どのように理解すればよいでしょうか?

body{2em}

<本文>
    <div>
        <p></p>
    </div>
</本文>

そして、bodyのサブ要素divとpは両方とも32pxです（重なりません）

レム

こちらもemと同様にフォントサイズに対するパーセンテージですが、参照対象が異なります。remの参照対象は親要素ではないため、親要素がどのように変化しても、現在remに設定されている要素のフォントサイズは反応しません。

rem はルート要素 (つまり html) を基準とします。html ドキュメントを作成する場合、head と body の両方が <html></html> タグで囲まれます。

CSSスタイルではHTMLのフォントサイズを変更することもできます

html{
    フォントサイズ:10px;
}
div{
    フォントサイズ:2rem;
}

この時点で、div のフォントサイズは 20 px です。

CSS スタイルで行の高さに数字を直接書き込む

これはfont-sizeとしては間違っているため、応答しません。

ただし、上記の単位設定以外にも、 line-height単位を設定せずに直接記述することもできます。

line-height では、em も現在のフォントサイズに対する比率であり、px の固定値を継承します。子要素は em の値を継承しません。

ただし、 line-height:2;は継承できます。子要素がこれを継承すると、line-height の値は現在のフォントサイズの 2 倍になります。

要約する

CSS でよく使われるフォントサイズの単位と行の高さに関するこの記事はこれで終わりです。CSS のフォントサイズと行の高さに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CentOS 上の Docker に Jupyter をインストールしてポートを開く方法

>>: html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明