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

推薦する

カルーセル効果を作成するためのjs

カルーセルはフロントエンド開発において比較的重要なポイントだと思います。ネイティブjsの知識ポイント...

JavaScript の基礎におけるデータ型の詳細な説明

目次1. データ型1.1 なぜデータ型が必要なのか? 1.2 変数のデータ型1.3 データ型の分類2...

WeChatアプレットがシンプルな計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

Windows 環境での MySQL 8.0 のインストール、設定、アンインストール

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.17-wi...

CSS3は光る境界線効果を実現します

操作効果: html <!-- この要素は表示されません。DOM は JavaScript に...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

MySQL 外部キー制約の例の説明

MySQL の外部キー制約は、2 つのテーブル間のリンクを確立するために使用されます。 1 つのテー...

MySQL 5.7 JSON 型の使用の詳細

JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ていますが、...

Linux システムの busybox に mkfs.vfat コマンドを移植する

オーディオおよびビデオ ファイルを保存するためのディスク寿命を延ばすには、ディスクをフォーマットする...

MySQL データベースの鉄則 (要約)

適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...

Gitlab-ci を使用してリモート マシンに継続的にデプロイする方法 (詳細なチュートリアル)

簡単に言うと、今日は Gitlab-CI を使用してリモート サーバーに自動的にデプロイする方法につ...

はじめに: HTML の基本的なタグと属性の簡単な紹介

HTML はタグと属性で構成されており、これらを組み合わせてブラウザにページの表示方法を指示します。...

MySQL での replace と replace into の使い方の説明

MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...

Win10+Ubuntu 20.04 LTS デュアル システム インストール (UEFI + GPT) (画像とテキスト、複数の画像には注意)

Win10 のインストール (すでにインストールされている場合はスキップしてください) win10...

JSフロントエンドモジュール化のいくつかの仕様についての簡単な説明

目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...