CSSのプロパティで幅や高さを指定する場合、その値に付ける単位には、pxや%など様々な種類があります。
今回は、CSSで指定するサイズの単位についてまとめたいと思います。
CSSでサイズを指定する場合、その値には、相対値と絶対値があります。
相対値は、基準になるサイズに対して相対的に決定するサイズです。
相対値で指定すると、ページを柔軟にレイアウトできます。
相対値の単位
| % | パーセンテージでサイズ決定 |
|---|---|
| em | フォントサイズの高さを１としてサイズ決定 |
| ex | 小文字「x」のフォントサイズの高さを１としてサイズ決定 （1ex = 0.5em） |
| rem | ルート（html要素）のフォントサイズの高さを１としてサイズ決定 |
| vw | viewport widthの略 ビューポートの横幅の１／１００を１としてサイズ決定 |
| vh | viewport heightの略 ビューポートの高さの１／１００を１としてサイズ決定 |
| vmin | viewport minimumの略 ビューポートの高さか幅の小さい方の１／１００を１としてサイズ決定 |
| vmax | viewport maxの略 ビューポートの高さか幅の大きい方の１／１００を１としてサイズ決定 |
| ch | 半角数字「0」の幅を１としてサイズ決定 |
| キーワード | フォントサイズの指定には以下のキーワードも使用可能 xx-small（60%相当）、x-small（75%相当）、small（88.8%相当）、medium（100%）、large（120%相当）、x-large（150%相当）、xx-large（200%相当） smaller や larger で上記を１段階ずつ拡大縮小することも可能 |
絶対値は、画面サイズ等に関係なく、固定的に決定するサイズです。
絶対値の単位は、px以外はDTPで使われる単位です。
用紙のサイズに合わせてレイアウトできるので、プリント用には絶対値が適しています。
絶対値の単位
| px | ディスプレイ上の１ピクセルを最小単位にした値 1px = 1インチの96分の1 |
|---|---|
| pt | 元々DTPで使われる単位 1ポイント = 72分の1インチ = 約1.33px |
| pc | 元々で使われる単位 1パイカ = 6分の1インチ = 12pt = 16px |
| in | 1インチ = 約2.54cm = 96px = 72pt = 6pc |
| mm | ミリメートル |
| cm | センチメートル |
emは、フォントサイズの高さを１とします。
そして、exは、小文字「x」の高さを１とすると言われていますが、実際はemの２分の１の高さを１としています。
em は、元々は大文字の「M」の高さを１としていて、それが名前の由来ともなっているようですが、実際は、書体の枠の高さを１としている印象です。
日本語（マルチバイト文字）やアルファベットのMは1emの高さに納まっていますが、アルファベットの g、p、q、yや、フランス語のような記号付きの文字は、はみ出ます。これは文字バランスを保つために必要なバラツキです。
フォントサイズ50pxの場合う、1em = 50pxになります。
同じフォントサイズで0.3emにすると、0.3em = 15pxです。
ex は em の２分の１なので、1ex = 0.5em と換算できます。
line-height: 1ex と line-height: 1.5em とは同じ結果となります。
exよりもemの方が広く使われているので、フォントとの関係でサイズを指定したい場合に、特に問題がなければemに統一して使った方が良いと思います。
サイズのイメージも持ちやすいです。
相対値は、使う機会が多いですが、単位によって何を基準にした相対値かが違うので、慣れるまでは注意が必要です。
相対値の単位の中で、使用頻度が特に高いのは、emと%です。
emと%について、次のようなものが、相対値を決定する際の基準となります。
| プロパティ | 相対値決定の基準となるもの |
|---|---|
| font-size （フォントサイズ） |
親要素のフォントサイズが基準（em、%、共通） |
| line-height （行の高さ） |
自分自身のフォントサイズが基準（em、%、共通） |
| margin 、padding 、 width 、height |
emは、自分自身のフォントサイズが基準 %は、親要素のボックスサイズが基準 |
margin 、padding 、width 、heightプロパティでの%の指定が要注意です。
例えば、0.3em = 30% の認識で「padding: 30%」と指定すると、実際は親のボックス幅に対しての30%なので、イメージと全然違う次のような表示となります。
ブルーが「padding: 0.3em」で指定したエリアです。
ピンクが「padding: 30%」で指定したエリアです。
ソースは次の通りです。
(CSS)
div#sample {
font-size:16px;
border:solid 1px #ccc;
padding:0;
margin:0;}
div#sample p#em {
background:#31A9EE;
margin:1em;
padding:0.3em;}
div#sample p#per {
background:#FF9696;
margin:1em;
padding:30%;}
(HTML)
<div id="sample">
フォントサイズは全て16pxです。
<p id="em">
ブルーが「padding: 0.3em」で指定したエリアです。
</p>
<p id="per">
ピンクが「padding: 30%」で指定したエリアです。
</p>
</div>
line-heightプロパティは、行の高さを指定します。
line-heightは、emや%など相対値で指定する方が良いです。
後でフォントサイズを変更する場合などに、line-heightが相対値で指定されていれば自動的に行の高さが調整されるので、絶対値で指定する場合に比べて作業の手間が軽減されます。
フォントサイズ50px、line-height（行の高さ）1.6emで指定した場合、次のような表示になります。
background:#FF9696
font-size: 50px
line-height: 1.6em
ソースは次の通りです。
<p style="font-size:50px; line-height:1.6em; background:#31A9EE; padding:0;">
<span style="background:#FF9696;">
background:#FF9696<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ずつ付いています。
相対値でよく使う em や % の、基準がフォントサイズの場合、そのフォントサイズとは、html要素のフォントサイズのことです。
レイアウトするときは body要素ばかりに目が行ってしまいますが、body要素とhead要素を囲んでいるhtml要素が基準（ルート）です。
html要素のPCブラウザでのデフォルトフォントサイズは、font-size : 16pxです。
どのPCブラウザでもこれがデフォルトです。
因みに、line-height : 24px（1.5em）もデフォルトです。
ですので、body要素に font-size:1em と相対値で指定すると、フォントサイズは16pxとなります。
そして、1em = 16px = 100% = 12pt = 1rem となります。
このremは、CSS3からの新しい単位で、ルートの emという意味です。
rem を使うと、親のフォントサイズはスルーして、ルートであるhtml要素のフォントサイズを基準にします。
body要素やその子孫たちがどんなフォントサイズを指定していても、remを使えば、その要素に、ルートを基準にした指定をすることができます。
（remは IE9 以降から対応しています。）
サイズの単位でよく使うのは、em、%、pxです。
通常のレイアウトは、たいてい em、%、px でこと足ります。
それぞれの性質を理解して、使い分けできると、スムーズにレイアウトが指定できます。
フォントサイズが変わると影響を受ける部分には、emが適しています。
フォントに関するサイズを絶対値で指定すると、後々混乱する可能性が高いです。
font-size や line-height（行の高さ）、ボックスの padding や marginなど、フォントサイズの変更によって調整が必要になりそうな場所は、emで相対指定するのがベストです。
ボックスのサイズ指定（特にwidth）をする際には、% をよく使います。
例えば、親要素に対して左右いっぱいにしたいボックスは width:100% で指定します。
レスポンシブレイアウト（ウィンドウサイズによってサイトの幅が可変する）でも、%はよく使います。
その他、フォントサイズも%を使った方が便利な場合があります。
emよりも%のほうが表示をイメージしやすいです。
フォントサイズ・ボックスサイズに関係なく、サイズを固定したい場所には、pxを使います。
borderの幅（border-width）を指定する場合には、pxをよく使います。
border-radius（ブロック要素の角丸）も、正円や楕円形の場合（50%）以外は px で指定することが多いです。
サイトのメインボックスの幅を px で固定する場合もあります。
デザイン上、サイズを固定したい部分も px で指定します。
但し、pxを使うと、PCで表示する場合はOKだったけど、スマートホンやタブレットで表示する場合は、画面サイズが違うので、調整が必要となります。
ですので、むやみに px を使うと後が大変です。
サイズ指定は、なるべく相対値（em や %）を使い、どうしても必要な場所だけ絶対値（px）を使う、という使い分けも大事です。
INTERNOUS,inc. All rights reserved.