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

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 で要素クラス名を操作する方法の詳細な説明

推薦する

Vueドロップダウンメニューのコンポーネント開発の詳細説明

この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...

XHTMLタグは適切に使用する必要があります

<br />123WORDPRESS.COM の以前のチュートリアルでは、Web ページ...

HTML の表の行と列を結合する問題の解決策の詳細な説明

私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...

MySQL 8.0.12 クイックインストールチュートリアル

MySQL 8.0.12 のインストールには 2 日かかり、さまざまな問題が発生しました。以下にまと...

WeChat アプレット uniapp は左スワイプによる削除効果を実現します (完全なコード)

WeChatアプレットuniappは左スワイプで削除効果を実現成果を達成する1. スワイプしてリス...

Nginx でファイル ホットリンク保護サービスを構築する方法を学ぶ例

序文多くのサイトが、ポイントやゴールドコインなど、情報のダウンロードに料金を請求していることは誰もが...

jQueryはテーブル行データのスクロール効果を実現します

この記事の例では、テーブル行データのスクロール効果を実現するためのjQueryの具体的なコードを参考...

iframe なしの div ネスト HTML

最近、宿題をしているときに、iframe を使用せずにページをネストする必要があったため、jquer...

JavaScript における call、apply、bind の実装原則の詳細な説明

目次序文電話使用法成し遂げるシンプルな実装バージョン:アップグレード版:適用する使用法成し遂げるバイ...

シンプルなウェブ計算機を実装するJavaScript

背景私は新しいプロジェクト チームに配属されたので、プロジェクトでは js を使用する必要があります...

アイデア展開Tomcatサービス実装プロセス図

まずプロジェクトの成果物を構成するスタートアップ項目の設定 Tomcatサービスを作成する開始したい...

HTML の 5 種類のスペースの意味

HTML には、幅の異なる 5 つのスペース エンティティが用意されています。非改行スペース ( )...

HTML ブロックレベルタグとインラインタグの違い

1. ブロックレベル要素: 独立して存在できる能力を指します。通常、ブロックレベル要素は改行によって...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

WeChatアプレットは画像コントロールを選択します

この記事の例では、WeChatアプレットで画像コントロールを選択するための具体的なコードを参考までに...