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

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. line-height(行の高さ)は相対値がオススメ
    1. line-height の構造
    2. line-height の構造を理解してレイアウトする
  6. 基準になるのは html要素のフォントサイズ!
    1. rem はルート(html要素)に対しての em
  7. よく使う単位は「em」「%」「px」
    1. px, em, % の使い分け
  8. その他の単位(角度、時間、解像度、周波数)

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

サイズ指定のための「値」には、
相対値(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月時点)
キーワード 単位じゃないけど。フォントサイズの指定には以下のキーワードも使います
xx-small(60%相当)、x-small(75%相当)、small(88.8%相当)、medium(100%)、large(120%相当)、x-large(150%相当)、xx-large(200%相当)
smaller や larger で上記を 1段階ずつ拡大縮小できます。

一方の 絶対値 は、他の何にも影響されずに、固定的なサイズを決定します。
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」がらみの豆知識。
値が 小数点以下の場合「0」を省略してもOK です。
例えば「padding : 0.3em」なら「padding : .3em」と書いても結果は同じです。
(見えるかな?「.3」と、小数点を残していますよ)
このブログでは、わかりやすいように(私が。最近視力が...)0をつけて 0.3em などと書いていきます。
視力に自信のあるかたは、0無しのほうが編集しやすい場合は、省略して使ってみてね。
(もちろんムリに省略しなくても、0.3em でもエラーになりません。)

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 や、フランス語の記号付き文字は、ちょっとハミ出ていますね。これはバランスのため。(はみ出させないと、文字のベースラインがガタガタで読みにくいから。タイポグラフィの理論です。)

フォントサイズ50pxなら 1em = 50px になります。
ちなみに、0.3em なら 30% と同じ。フォントサイズ50pxなら 0.3em = 15px です。

ex は em の2分の1なので、1ex = 0.5em と換算できます。
line-height: 3ex も line-height: 1.5em も同じ結果です。
( line-height(行の高さ)については、下で詳しく説明します。)
なので、emに統一して使ったほうがわかりやすいので、私は ex はあまり使わないかな。
他の人が書いたCSSでも、exを使ったのは見たことがない気がします。あ、もちろんどのブラウザでもちゃんと使えますよ。

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

相対値はレイアウトの基本っていうか、とにかくよく使いますが、
単位によって「何を基準にした相対値か」が違うので、慣れるまでちょっと注意が必要です。

相対値の単位の中で、いちばんよく使う em と % について、
相対指定の基準になる相手を整理してみました。

プロパティ 相対値の「基準」になるモノ
font-size(フォントサイズ) emでも%でも親要素のフォントサイズが基準

もっと正確に言うと、親から継承している自分自身のフォントサイズが基準。
ただ、font-size を指定するってことは、親のフォントサイズから変えたい時だから、
親のフォントサイズに対しての相対値だと言った方がわかりやすいかなと思って。

line-height(行の高さ) emでも%でも自分自身のフォントサイズが基準

自分自身に font-size を指定してる場合は、そのサイズが基準。
font-size を指定していなければ、親のフォントサイズを継承したままの自分自身のフォントサイズってことで。
line-heightプロパティについては、すぐ下で詳しく説明します。

margin 、padding 、
width 、height
emなら自分自身のフォントサイズが基準
%だと親要素のボックスサイズが基準

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

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

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

<div id="sample1">
<p>フォントサイズ 16px。padding: 0.3em です。</p>
<p id="prcnt">フォントサイズは同じ。padding: 30% です。</p>
</div>
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 は、後日「ボックスモデル」で詳しくやりますが、
ざっとこんな構造。(width や height の範囲は box-sizing プロパティで変えることもできます。後日詳細)

line-height(行の高さ)は相対値がオススメ

line-heightプロパティは「行の高さ」を指定します。

line-height は、相対値(em や %)で指定するほうがラク。オススメです。
フォントサイズを後でちょっと変更したとき、line-height が相対値なら自動的に行の高さが調整されるので、ラクなんです。
line-heightを pxで指定してると、フォントサイズと共にこっちも直すから手間がかかります。
本文は1.8em(180%)とか、小さい文字は1.4em(140%)などと最初に決めておけばイイかんじ。

line-height の構造

それはさておき、line-height の構造を見てみましょう。
下図は、フォントサイズ50px、line-height(行の高さ)1.6em で指定した場合です。
line-heightについて

<p style="font-size:50px; line-height:1.6em; background:#69f; padding:0;">
<span style="background:#cf0">
日本ごÈÇqpgyMx<br>
font-size: 50px;<br>
line-height: 1.6em
</span></p>

フォントサイズが50pxで、line-height が1.6em だと、line-height = 80px です。
line-height:160% と指定しても同じです。

で、上の図で注目して欲しいのは、line-height は文字の上と下に均等につくこと。
行間は 80 - 50 = 30px ですが、文字の上に15px、下に15pxずつ付くんですね。
CSSレイアウトで大事なことなので、覚えておこう。

line-height の構造を理解してレイアウトする

例えば、上の図のブロック(p要素)に「ボーダー」をつけた場合。
line-heightのクセを知ってpaddingを適正に使う
単にボーダーをつけただけだと、上下の空きより行間の空きのほうが大きくて変です。行の左側もつまっていますし。
そこで、p要素にpaddingを指定して整えます。
line-height が 1.6em なので、行間は 0.6em です。行の上に 0.3em 、下に 0.3em 空きがあるのね。
ですので padding は、上下は 0.3em、左右は 0.6em にして、行間(0.6em)と揃えれば、スッキリ。
line-height の構造を理解していれば、このように最適な指定ができますね。

ブロックレベルの要素の場合、
line-height が1以上だと、すでに行の上下にスペースがあるので、それを差し引いて padding を指定するのがレイアウトのコツです。

上記は、ブロックレベルでの話。
インラインの要素(<a> <b> <mark> <span> <ins> など)だと、また話は変わってきます。

これは span要素のサンプルです。インラインの要素の場合、上下の margin は効きませんので、line-height で行間の空きスペースを作ります。padding は各行の上下左右に付けられます。
<div id="sample2">
<span>これは span要素のサンプルです。(...略)</span>
</div>
div#sample2 {
	padding:1em;
    border:solid 1px #ccc;}
div#sample2 span {
	background:#cf0;
	padding:1em 0;
	line-height:5em;}

サンプルでは、span要素に背景色をつけて、padding を上下に 1em ずつ付けています。
line-height が 5em なので、テキストと padding の合計 3em を引いた 2em が 行の上下に 1em ずつ付いている。
インラインでは、line-height も padding も、テキストの上端と下端から同時発生するんですね。ブロックレベルとずいぶん違いますね。
(ブロックレベルの padding は、line-height の外側にできますから)

インラインでのレイアウトのコツは、
●height は使えない→ padding で高さを作る。背景色を指定したとき必要ですよね。
●margin の上下は使えない→ line-height で行間を離す。せっかく指定した背景色がくっつかないようにするには、line-height で調整します。
(インライン、ブロックレベルに関しては、「ボックスモデル」の回で詳しく説明します)

さて、もうお気づきだと思いますが、padding も「em」で指定したほうが、あとでフォントサイズを変更した時に自動的に変更されて便利です。pxで指定しないほうがイイ。
(%はさっきのサンプルのとおり、避けたほうが○)

基準になるのは html要素のフォントサイズ!

相対値でよく使う em や % の、基準がフォントサイズの場合、
そもそも一番最初に基準になるフォントサイズっていったいなんでしょう?

基準となるのは、<html>要素のフォントサイズ です。
html要素は、head要素と body要素を囲むモノなので、レイアウトするときは body要素ばっかり気になって html要素のことは忘れがちですが、
html要素が基準(ルート( root = 起源・根源)なんですって。

html要素のPCブラウザでのデフォルトフォントサイズは、font-size : 16px
どのPCブラウザでもこれがデフォルト。これ大事。覚えておこう。
(そしてちなみに line-height : 24px(1.5em)もデフォです。)

ということで、
body要素に font-size:1em と相対指定すれば、フォントサイズは16pxです。

このとき、1em = 16px = 100% = 12pt = 1rem になります。
( rem についてはすぐ下に↓)

rem はルート(html要素)に対しての em

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

rem を使えば、親のフォントサイズなんかすっ飛ばして、ルートである <html>要素のフォントサイズを基準にします。
<body>やその子孫たちに、どんなにフォントサイズを指定していても、
ある要素に、ルートを基準にした指定をしたければ、この「rem」で一発解決です。
「rem」は IE9 以降から対応しています。(参考サイト│CSS Units : w3schools.com

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

font-size : 指定無し(bodyを継承 → 本ブログは font-size: small なので 14px くらい)
↓この水色バックの部分は、font-size: 2em を指定しています。

font-size : 2em

font-size:4em

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

font-size:16px(比較用)

<div style="padding:1em; border:solid 1px #ccc;">
<p>font-size : 指定無し(bodyを継承 → 本ブログは font-size: small なので 14px くらい)<br>
↓この水色バックの部分は、font-size:2em を指定しています。</p>

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

よく使う単位は「em」「%」「px」

サイズの単位でよく使うのは、「em」「%」「px」くらいです。
他のたくさんのサイズ指定の単位は、それぞれが必要な場合に臨機応変に使うだけ。
普段のレイアウトは、たいてい em、%、px を使えばコトが足ります。
それぞれの「相対・絶対」の性質を理解して、自分なりに使い分けよう。

em, %, px の使い分け

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

以下は、私が普段やっている使い分けです。

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

フォントがらみは px などの絶対値で指定すると、かえって自分でも ややこしくなるよ。
要は「本文の文字の大きさ」 vs 「見出しなどの文字の大きさ」 vs 「行の高さ」「バランス」だから。
スマホやタブレットでの表示のためにも、フォントがらみは相対値で指定するほうが無難です。

  • font-size や line-height(行の高さ)は em で。
    PCブラウザのデフォルトの16pxを基準に、まず<body>のフォントサイズを em で決めます。
    これが本文の文字サイズになる。これをもとに、見出しはでっかく、コラムの本文は小さくなどと、文字の大きさのバランスを em で設計していきます。(%でも同じだけどね)
    line-height も emで指定。(これも%でも同じだけどね)
  • ボックスの padding や margin も、フォントサイズの変更によって調整が必要になりそうな padding や margin は em で相対指定すれば後がラク。フォントサイズを変更したら自動変更してくれるから。(でも間違っても%は使いません。さっきのサンプルのようになるからw)

% を使うところ
ボックスのサイズ指定(特に width)でよく使います。

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

そのほか、私はフォントサイズにもよく%を使います。font-size:120% とか。
これ、font-size:1.2em でも同じなのですが、% のほうがスケール感が直感的なので。
でもなぜか line-height は em ですることが多いですw。ま、自分がわかりやすけりゃイイんです。

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

  • 一番使うのは border の幅(border-width)。こればっかりは px で指定しますよね。
  • border-radius(ブロック要素の角丸)も、正円や楕円形の場合(50%)以外は px で指定。
  • サイトのメインボックスの幅を px で固定する場合もあります。
    この場合、PC・タブレット・スマホ用のビューは「メディアクエリ」で切り替えます。(これは後日詳細)
  • デザイン上 サイズを固定したい部分も px で指定。
    グローバルナビや、<h1> <h2> を、背景画像と一緒に作り込むような場合などは、ガッチリ pxで固定します。
    この場合も「メディアクエリ」で切り替えが必要ですね。

px を使うと、PCビューの時はイイけど、スマホやタブレットの時には、画面サイズが違うので、どうしてもメディアクエリなどでの調整が必要です。なので、むやみに px を使うと後が大変です。
(最初っから PCビュー以外は必要ない場合は、気にしなくていいけど)
というわけで、
なるべく相対値(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
05 | 2017/06 | 07
- - - - 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 29 30 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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