「html 文字サイズ 単位」と検索してこの記事にたどり着いた方も多いと思います。
まず結論から説明すると、現在のWeb制作では文字サイズの指定はHTMLではなく、CSSの役割です。
HTMLは文章の構造を定義し、CSSはWebページの見た目やデザインを調整します。
| 役割 | 内容 |
|---|---|
| HTML | 見出し、段落、リストなど文章構造を作る |
| CSS | 文字サイズ、色、余白、レイアウトなどデザインを整える |
文字サイズを変更するときは、CSS の font-sizeプロパティ を使用します。
p {
font-size: 1rem;
}このように CSS で文字サイズを指定する際に重要になるのが、数値の後ろに付ける「単位」です。
CSS にはpx、rem、em、%、vw など、さまざまなサイズ単位があります。それぞれ基準となる値や適した用途が異なり、選択する単位によって表示の柔軟性やコードの管理しやすさが大きく変わります。
例えば、固定サイズの指定には px、サイト全体の文字サイズ管理には rem、画面幅に合わせた調整には vw など、目的に応じた単位の使い分けが重要です。
ここでは、CSS で利用される文字サイズ関連の単位を「一覧マップ」として整理し、px、rem、em、%、vw、vh をはじめとする全12種類の特徴と用途を網羅的に解説します。
各単位については、具体的な使用方法やコード例を詳しく解説した個別記事へのリンクも用意しています。必要な単位の記事を参照しながら、CSS のサイズ指定を体系的に理解できる構成です。
CSSサイズ単位 を学ぶためのリファレンスとして、実際の Web制作 に活用してください。
CSSサイズ単位の基本｜絶対単位と相対単位の違い
CSS でサイズを指定するときに使用する単位には、大きく分けて「絶対単位」と「相対単位」の2種類があります。
絶対単位は、指定した数値が一定のサイズとして扱われる単位です。
一方、相対単位は、親要素のサイズや画面サイズなど、基準となる値に応じて大きさが変化する単位です。
Webサイト はパソコン、タブレット、スマートフォンなど、さまざまな画面サイズで表示されます。
そのため、現在の Web制作 では用途に応じて絶対単位と相対単位を使い分けることが重要です。
絶対単位
px（ピクセル）
pxは、CSSで最も基本的なサイズ単位です。
1pxを基準とした固定サイズで指定できるため、表示サイズを細かく管理しやすいという特徴があります。
主な用途：
・枠線（border）の太さ
・アイコンサイズ
・ボタンの高さや細かな装飾
・サイズを固定したい要素
例：
.box {
width: 300px;
border: 1px solid #333;
}ただし、文字サイズをすべて px で固定すると、画面サイズやユーザー設定による調整が難しくなる場合があります。
そのため、文字サイズや余白など、柔軟な調整が必要な部分では相対単位がよく利用されます。
相対単位
相対単位は、何らかの基準となる値に対してサイズが決まる単位です。
例えば、親要素の文字サイズを基準にする em、HTML要素 の文字サイズを基準にする rem、画面幅を基準にする vw などがあります。
相対単位を利用すると、画面サイズやサイト全体の設定に合わせてサイズを変化させやすくなり、レスポンシブデザインや管理しやすい CSS設計 につながります。
代表的な相対単位には以下があります。
| 単位 | 基準 | 主な用途 |
|---|---|---|
| rem | ルート要素（html）のfont-size | 文字サイズ、余白、全体設計 |
| em | 親要素のfont-size | コンポーネント単位の調整 |
| % | 親要素などの基準値 | 幅、高さ、文字サイズ |
| vw | ビューポートの幅 | レスポンシブなサイズ調整 |
| vh | ビューポートの高さ | 画面全体のレイアウト |
| ch | 文字幅（0の幅） | 文章幅の制御 |
| lh | 行の高さ（line-height） | 文字と行間の設計 |
現在のWeb制作での使い分け｜なぜCSSサイズ単位を使い分けるのか
CSS には複数のサイズ単位がありますが、どれか1つの単位だけを使えばよいというものではありません。
なぜなら、Webページ はパソコンやタブレット、スマートフォンなど、画面サイズや表示環境が異なるさまざまなデバイスで閲覧されるためです。また、指定する対象によっても適した単位は異なります。
例えば、境界線やアイコンなど常に同じ大きさで表示したい要素には px が適しています。一方、文字サイズや余白は画面サイズやユーザーの設定に応じて柔軟に調整できる rem や em などの相対単位がよく利用されます。
このように、「固定したいもの」と「変化させたいもの」を目的に応じて使い分けることが、保守性やレスポンシブデザインに優れた Webサイト を作るポイントです。
CSSサイズ単位一覧マップ
CSS にはさまざまなサイズ単位が用意されており、それぞれ基準となる値や適した用途が異なります。
現在のWeb制作では、1つの単位だけを使うのではなく、目的に応じて複数の単位を使い分けることが一般的です。
以下の一覧表では、主要な CSS サイズ単位を「分類」「基準」「特徴」「主な用途」の4つの観点から整理しています。
| 単位 | 分類 | 基準 | 特徴 | 主な用途 |
|---|---|---|---|---|
| px | 固定単位 | CSSピクセル | 固定サイズを指定しやすい | 境界線、アイコン、固定サイズ |
| em | 相対単位 | 親要素のfont-size | 親要素のサイズに応じて変化する | コンポーネント設計 |
| rem | 相対単位 | html要素のfont-size | サイト全体でサイズを管理しやすい | 文字サイズ、余白 |
| % | 相対単位 | 親要素など | 親要素に対する割合で指定できる | 幅、高さ、文字サイズ |
| vw | ビューポート単位 | ビューポートの幅 | 画面幅に応じてサイズが変化する | レスポンシブデザイン |
| vh | ビューポート単位 | ビューポートの高さ | 画面の高さを基準に指定できる | ファーストビュー、全画面レイアウト |
| vmin | ビューポート単位 | vwとvhの小さい方 | 縦横比を考慮したサイズ指定ができる | レスポンシブUI |
| vmax | ビューポート単位 | vwとvhの大きい方 | 大きい方を基準にサイズを指定する | 特殊なレイアウト |
| ch | 文字単位 | 「0（ゼロ）」1文字分の幅 | 文章の横幅を調整しやすい | 本文の横幅 |
| ex | 文字単位 | 小文字「x」の高さ | 文字の高さを基準に指定する | 文字周辺の細かな調整 |
| lh | 行単位 | 要素のline-height | 行間を基準にサイズを指定する | 余白、文章レイアウト |
| rlh | 行単位 | ルート要素のline-height | サイト全体の行間を基準に指定する | デザインシステム |
各単位の詳しい使い方やコード例、使用するメリット・デメリットについては、それぞれの個別記事で詳しく解説しています。
【CSS文字サイズ単位の詳細解説記事】
・px：
CSSのpx（ピクセル）とは？文字サイズ指定と1pxの意味･HTMLとの違い･使いどころ･誤解を解説
・em：
CSSの単位emとは？意味･正しい使い方、フォントサイズを基準に余白や幅も変化する仕組みを解説
・rem：
CSSの単位remとは？意味、使い方、pxへの変換計算･レスポンシブまでわかりやすく解説
・%：
CSSの%（パーセント）指定とは？何を基準に計算する？使い方･メリット･注意点･使いどころを解説
初心者が最初に覚えるべき5つのCSSサイズ単位
CSSには多くのサイズ単位がありますが、初心者が最初からすべてを覚える必要はありません。
まずは、Web制作で利用頻度の高い次の5つの単位を理解することをおすすめします。
| 目的 | おすすめの単位 |
|---|---|
| 固定サイズを指定する | px |
| サイト全体の文字サイズや余白を管理する | rem |
| 親要素に合わせてサイズを変更する | em |
| 親要素に対する割合で指定する | % |
| 画面幅に応じてサイズを変更する | vw |
この5つの単位を理解すれば、文字サイズの指定だけでなく、余白や横幅の調整、レスポンシブデザインの基本まで対応できるようになります。
一方、vh、vmin、vmax、ch、ex、lh、rlhは、より高度なレイアウトやタイポグラフィを設計する際に活用される単位です。
利用頻度は比較的低いため、まずは基本となる5つの単位を理解したうえで学習すると、効率よく知識を身に付けられます。
用途別のおすすめ単位
CSS のサイズ単位は、使用する場所によって適したものが異なります。
例えば、文字サイズには rem、余白には rem や px、レイアウト幅には % や vw などがよく利用されます。
ここでは、Web制作 で頻繁に使用する5つの用途について、基本的な CSS の書き方とおすすめの単位を紹介します。
文字サイズ（font-size）
文字サイズを変更するときは、CSS の font-sizeプロパティ を使用します。
例えば、見出しと本文で異なる文字サイズを指定する場合は、以下のように記述します。
HTML
<p class="text-1rem">CSSで文字サイズを指定する例です。</p>CSS
.text-1rem {
font-size: 1rem;
}ブラウザでの表示
CSSで文字サイズを指定する例です。
この場合、通常のブラウザ設定では1remは約16pxとして表示されます。
文字を大きくしたい場合は、数値を変更します。
HTML
<p class="text-2rem">CSSで文字サイズを指定する例です。</p>CSS
.text-2rem {
font-size: 1rem;
}この場合、約32pxの文字サイズになります。
ブラウザでの表示
CSSで文字サイズを指定する例です。
rem は、サイト内の文字サイズを統一して管理しやすい単位です。
そのため、本文や説明文など、基本となる文字サイズの指定によく利用されます。
また、画面サイズに応じて文字サイズを変化させたい場合は、vw を使用できます。
vwは、画面の横幅（ビューポート幅）を基準にサイズを決める単位です。
例えば、以下のように指定します。
CSS
.text {
font-size: 5vw;
}5vw は「画面幅の5％」という意味になります。
例えば、画面幅が 1000px の場合、
1000px × 5% = 50px
となり、文字サイズは 約50px になります。
一方、画面幅が 400px の場合は、
400px × 5% = 20px
となり、文字サイズは 約20px になります。
このように vw を使用すると、画面幅に合わせて文字サイズを自動的に変化させることができます。
しかし、vw だけで文字サイズを指定すると、画面サイズによっては問題が発生します。
大きなディスプレイでは画面幅が広いため、文字サイズも比例して大きくなり、必要以上に大きな文字になる場合があります。
反対に、小さなスマートフォンでは文字サイズが小さくなりすぎ、文章が読みにくくなる場合があります。
そこで利用されるのが clamp() です。
clamp() は、CSS でサイズの最小値・基準値・最大値を指定できる関数です。
以下のように記述します。
.text {
font-size: clamp(1rem, 5vw, 3rem);
}この指定では、3つの値を設定しています。
| 値 | 役割 |
|---|---|
| 1rem | 文字サイズの最小値 |
| 5vw | 画面幅に応じて変化する基準値 |
| 3rem | 文字サイズの最大値 |
つまり、この場合は画面幅に応じて文字サイズが変化しますが、1rem より小さくならず、3rem より大きくなりません。
そのため、レスポンシブ対応の文字サイズでは、
・通常の文字サイズ指定 → rem
・画面幅に応じたサイズ変更 → vw
・サイズの上限・下限を設定 → clamp() + vw
という使い分けがよく利用されます。
vw や clamp() は、特に大きな見出しやファーストビューのタイトルなど、画面サイズに合わせて印象を変えたい部分で活用されます。
よくある質問
Q.remだけ使えばいい？
A.いいえ。
現在のWeb制作ではremを中心に使うケースが多いですが、すべての場面に適しているわけではありません。
・境界線 → px
・文字サイズ → rem
・レスポンシブ調整 → vw
など、用途によって使い分けます。
Q.pxは古い？
A.いいえ。
pxは現在でも広く利用されています。
特に、
・border
・アイコンサイズ
・1pxの線
など、固定したいサイズでは重要な単位です。
Q.emは使わない？
A.使います。
ただし、em は親要素の影響を受けるため、複雑な継承が発生する場合があります。
現在はサイト全体の管理では rem、コンポーネント内部では em という使い分けが多いです。
Q.スマホではどれがおすすめ？
A.スマホだから特定の単位だけを使うわけではありません。
一般的には、
・文字サイズ → rem
・横幅 → %
・レスポンシブ調整 → vwやclamp()
のように用途で選びます。
