ほんっとにはじめてのHTML5とCSS3：【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）

【7-1】CSSのサイズの単位について（em, %, px, rem の使い分け）

最終更新日：2018年03月27日　（初回投稿日：2015年08月22日）

CSSのプロパティの値は、ざっと以下の4パターンに分けられます。

サイズを指定するもの（ margin: 2em 、border-width: 3px など単位を付けて）
色を指定するもの（background-color: #f2f5ff 、color: red など）
キーワードで指定するもの（ overflow: hidden 、position: absolute など）
角度、時間、解像度、周波数などを指定するもの（これも単位を付けて使います）

今回はこのうち「１」の サイズを指定する ときの単位について。
レイアウトの基本になるいろいろな単位を使い分けよう。

本日のINDEX

● 2018年3月、新たに【26-6】line-heightプロパティで行間（行の高さ）を指定しよう をアップしました。そこで、この記事の line-heightプロパティについての詳細は削除しました。
line-heightプロパティに関しては、上記の記事をご覧ください。

サイズ指定には相対値と絶対値があります

サイズ指定のための「値」には、
相対値（Relative type）と 絶対値（Absolute type）があります。

相対値 は、基準になるサイズに対して相対的にサイズ決定するもの。

サイズ指定の相対値の単位
%	パーセンテージでサイズ決定
em	フォントサイズの高さを1とする（後で図説します）
ex	小文字「x」のフォントサイズの高さを1とする（実際は、1ex = 0.5em）
rem	ルート（html要素）のフォントサイズの高さを1とする
vw	viewport width の略。1vw = ビューポートの幅の 1/100（100vwで横幅いっぱい）
vh	viewport height の略。1vh = ビューポートの高さの 1/100（100vhで高さ全部）
vmin	viewport minimum の略。1vmin = ビューポートの高さか幅の小さいほうの 1/100
vmax	viewport max の略。1vmax = ビューポートの高さか幅の大きいほうの 1/100
ch	半角数字「0」の幅を1とする（等幅フォントの幅が元。点字レイアウトに使うらしい）
gd	グリッドモジュールでの単位。今のところIE10~のみサポート（2015年8月時点）

一方の 絶対値 は、他の何にも影響されずに、固定的なサイズを決定します。
px 以外は DTPでも使われる単位です。

px は、昔はディスプレイのドット1個が 1px で、解像度によってサイズが変わるため「相対値」とされていました。
今の高解像度ディスプレイやプリンタは、ドットが複数集まって1pxなモノもありますし、px も親要素のサイズなどに影響されずに固定的なサイズを決定するため、今は「絶対値」と分類されるようです。

サイズ指定の絶対値の単位
px	ディスプレイ上の1ピクセルを最小単位にした値。1px = 1インチの96分の1
pt	ポイント。元々DTPで使われる単位。1ポイント = 72分の1インチ = 約1.33px
pc	パイカ。これも元々DTPでの単位。1パイカ = 6分の1インチ = 12pt = 16px
in	1インチ = 約2.54cm = 96px = 72pt = 6pc
mm	メートル法のミリメートル。
cm	センチ。1cm = 1mm

数値が「0」なら単位は省略OK

サイズを指定する時、値が「0」なら単位は省略してOK なんです。
「margin: 0」「padding: 0」といった具合で使えます。
0px とか 0em とか単位は不要。（別に単位を書いてもエラーにはなりませんけどね）

もうひとつ、「0」がらみの豆知識。
値が 小数点以下の場合「0」を省略してもOK です。
例えば「padding : 0.3em」なら「padding : .3em」と書いても結果は同じです。
（見えるかな？「.3」と、小数点を残していますよ）

em と ex の違いは高さ（1ex = 0.5em）

em はフォントサイズの高さを 1 とします。
（元々は大文字の「M」の高さを１とすると言われ、「M」の読み方が「em（エム）」なので、この単位名になったとか）
ex は小文字「x」の高さを１とすると言われていましたが、実際は「emの2分の1」です。
emとexの関係

em は、Mの高さというよりも、書体の枠の高さってイメージ。
日本語（マルチバイト文字）やアルファベットの「M」は 1em の高さに納まっていますが、
アルファベットの p, q, g, y や、フランス語の記号付き文字は、ちょっとハミ出ていますね。これはバランスのため。（はみ出させないと、文字のベースラインがガタガタで読みにくいから。タイポグラフィの理論です。）

ex は em の2分の1なので、1ex = 0.5em と換算できます。

相対値の「基準」になるモノは単位によって違う

相対値は プロパティ・単位によって 何を基準にした相対値か が違います。

よく使う em と % について、相対値の基準になる相手を整理してみました。

プロパティ	相対値の「基準」になるモノ
font-size	emでも%でも親要素のフォントサイズが基準もっと正確に言うと親要素から継承している自分自身の今のフォントサイズが基準（それを相対的のどれくらい変えたいか指定する）
margin 、padding 、 width 、height	emなら自分自身のフォントサイズが基準 %だと親要素のボックスサイズが基準

margin 、padding 、width 、height プロパティでの「%」の指定が要注意ポイント。
0.3em = 30% なんて「padding: 30%」などと指定すると、親のボックスの幅に対しての 30% だから、ガバッと空いてビックリするよw

フォントサイズ 16px。padding: 0.3em です。

フォントサイズは同じ。padding: 30% です。

HTMLはこちら。

<div id="sample1">
  <p>フォントサイズ 16px。padding: 0.3em です。</p>
  <p id="prcnt">フォントサイズは同じ。padding: 30% です。</p>
</div>

CSSはこちら。

div#sample1 {
	font-size:16px;  /*親要素のdivにフォントサイズを指定すれば、子も同じになります*/
    border:solid 1px #ccc;
    padding:0;
    margin:0;
    }
div#sample1 p {
	background:rgba(102, 153, 255, 0.5);
	border:solid 1px rgb(102, 153, 255);
	margin:1em;
	padding:0.3em;
    }
div#sample1 p#prcnt {
	padding:30%;
    }

margin 、padding 、width 、height はこんな構造です>

詳細は、【10】ボックスモデル（margin, padding, border を使いこなそう）で。

フォントサイズの基準は html要素

フォントサイズの場合、最初に基準になるのは <html>要素のフォントサイズ。
html要素は、head要素と body要素を囲むモノで、ルート要素と呼ばれます。
（ root = 起源・根源という意味）

html要素のPCブラウザでのデフォルトフォントサイズは、font-size : 16px 。
これ大事。覚えておこう。

body要素に font-size:1em と相対指定すれば、フォントサイズは16pxです。
このとき、1em = 16px = 100% = 12pt = 1rem になります。
（ rem についてはすぐ下に↓）

rem はルート（html要素）に対しての em

CSS3からの新しい単位 rem は、「ルートの em 」という意味です。

rem を使えば、親のフォントサイズなんかすっ飛ばして、ルートである <html>要素のフォントサイズを基準にします。
1rem = 16px を基準にできるので、継承している親のフォントサイズなど記にせず指定できて便利です。
「rem」は IE9 以降から対応しています。（参考│CSS Units : w3schools.com）

ちょっと実験。
↓ ブロック要素を入れ子にして、フォントサイズ 1rem を使ってみました。

白バックの部分は font-size : 14px

font-size : 2em

font-size:4em

font-size:1rem（ルートの16pxになりました）

font-size:16px（比較用）

ソースはこちら（入れ子にした div要素にインラインでCSSを書いてます）

<div style="font-size:14px; padding:1em; border:solid 1px #ccc; margin:1em 0">
  <div>白バックの部分は font-size : 14px</div>

  <div style="font-size:2em; line-height:1.5; background:#c4efff; padding:0.5em">
    <div>font-size : 2em</div>
    <div style="font-size:2em; padding:0.6em; border:solid 1px #666; margin:1rem 0">
    font-size:4em</div>
    <div style="font-size:1rem; padding:0.6em; border:solid 1px #666; margin:1rem 0">
    font-size:1rem（ルートの16pxになりました）</div>
    <div style="font-size:16px; padding:0.6em; border:solid 1px #666; margin:1rem 0 0">
    font-size:16px（比較用）</div>
  </div>
</div>

em, %, px の使い分け

emはフォントサイズを基準にする相対値を指定します。
%は、ボックスサイズを基準に相対指定したいところに。
pxは何にも影響されずにガッチリとサイズを決めたい所に使います。

em を使うところ

フォントサイズが変わると影響を受ける部分には em を使います。

font-size は em で。
PCブラウザのデフォルトの16pxを基準に、まず<body>のフォントサイズを em で決めます。
これが本文の文字サイズになる。これをもとに、見出しは大きく、コラムは小さくなどと、文字の大きさのバランスを em で設計していきます。
ボックスの padding や margin も、フォントサイズの変更によって調整が必要になるので em で相対指定すれば後がラク。フォントサイズを変更したら自動変更してくれるから。

% を使うところ

ボックスのサイズ指定（特に width）でよく使います。

例えば、親要素に対して左右いっぱいにしたいボックスは width:100% で指定。
レスポンシブレイアウト（ウィンドウサイズによってサイトの幅が可変する）でも%はよく使います。

px を使うところ

フォントサイズ・ボックスサイズに関係なく、サイズを固定したいところに。

border の幅（border-width）。こればっかりは px で指定しますよね。
border-radius（ブロック要素の角丸）も、正円や楕円形の場合（50%）以外は px で指定するのが一般的。
サイトのメインボックスの幅を px で固定する場合もあります。
この場合、PC・タブレット・スマホ用のビューは「メディアクエリ」で切り替えます。

px を使うと、スマホやタブレットなど画面サイズが違う時に調整が必要になる場合が多い。なので、むやみに px を使うと後が大変になります。
というわけで、
なるべく相対値（em や %）を使い、どうしても必要な所は絶対値（px）を使う、という使い分けが大事です。

その他の単位（角度、時間、解像度、周波数）

CSSにはサイズ指定のほかに「角度、時間、解像度、周波数」などのための単位もあります。頻繁には使いませんが、知識としてメモっておきます。

角度の単位（参考：angle - CSS \| MDN） transformプロパティなどの「回転」で使います
deg	度。1周は 360deg
grad	グラード。1周は 400grad
rad	ラジアン。1周は 2π。参考→[69-2] canvasに基本的な図形を描こう
turn	ターン。1周は 1turn。何周したかをカウントする

時間の単位（参考：time - CSS \| MDN） transitionプロパティ、animationプロパティで「時間（秒数）」を指定します
s	秒。1s = 1秒
ms	ミリ秒。千分の１秒。1000ms = 1s

解像度の単位（参考：resolution - CSS \| MDN）メディアクエリで、解像度によるCSSの切り替え条件で使います
dpi	dots per inch（ドットパーインチ）。1インチあたりのドット数。通常のディスプレイは 72dpi または 96dpi。1dpi = 2.54dpcm
dpcm	dots per centimeter。1センチメートルあたりのドット数。 1dpcm = 0.39dpi
dppx	dots per pixel。1ピクセルあたりのドット数。 1dppx は 96dpi

周波数の単位（参考：frequencys - CSS \| MDN）声の高さなどの指定に。CSS3で導入。
Hz	ヘルツ単位の周波数
kHz	キロヘルツ単位の周波数

次回予告

次回は、単位についての続きです。
CSS3の新しい単位 vw, vh, vmin, vimax を見てみましょう。
コレを使ったレスポンシブレイアウトのサンプルも作ってみます。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2018-03-27（Tue）│
投稿日：2015-08-22（Sat）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿