CSSのプロパティで幅や高さを指定する場合、その値に付ける単位には、pxや%など様々な種類があります。
今回は、CSSで指定するサイズの単位についてまとめたいと思います。
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
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.
