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

最終更新日:2018年02月13日  (初回投稿日:2015年08月22日)

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

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

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

本日のINDEX
  1. サイズ指定には 相対値と絶対値があります
    1. 相対値(Relative type)
    2. 絶対値(Absolute type)
  2. 数値が「0」なら単位は省略OK
  3. em と ex の違いは高さ(1ex = 0.5em)
  4. 相対値の「基準」になるモノは単位によって違う
  5. フォントサイズの基準は html要素
    1. rem はルート(html要素)に対しての em
  6. em, %, px の使い分け
    1. em を使うところ
    2. % を使うところ
    3. px を使うところ
  7. その他の単位(角度、時間、解像度、周波数)

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

サイズ指定のための「値」には、
相対値(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」の高さを1とすると言われ、「M」の読み方が「em(エム)」なので、この単位名になったとか)
ex は小文字「x」の高さを1とすると言われていましたが、実際は「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.5em; 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 ミリ秒。千分の1秒。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 を見てみましょう。
コレを使ったレスポンシブレイアウトのサンプルも作ってみます。

関連記事
この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.