Web制作で使う単位
Webサイトでは、CSSを使ってブロックの幅や高さを指定したり、文字のサイズを調整したりすることができます。
この際に適した様々な単位があります。
「相対単位」と「絶対単位」
CSSを使ってサイズを指定する際には「0」の場合を除き、必ず数値に単位を付加して使用します。
「相対単位」
これは、指定の対象となる要素自信を囲む「親要素」や、Webブラウザの環境に依存するものです。
HTMLではたいていの場合、要素の中に要素が入った入れ子状態でマークアップします。
例えば、「<header><h1>見出し</h1></header>」の場合、
h1要素から見ると、header要素が「親要素」になり、逆にheader要素から見たh1要素は「子要素」という関係です。
相対単位 | サイズ |
em（エム） | 1em=1文字分の長さ |
ex（エックスハイト） | 1ex=小文字の「x」の高さ |
px（ピクセル） | 1px=画面上の1ピクセル |
%（パーセント） | 親要素の長さに対して変化する 例）50%：親要素が100pxなら50px |
rem（レム） | ルート要素の文字サイズを「1」としたときの倍率 |
「絶対単位」
一般的に物差しで測ることができる単位をいいます。
ただこれは、印刷向けのCSSを作成する際、
紙の実測を想定してセンチメートルやミリメートルなどを使うときに利用され、
画面表示向けの単位としては、あまり使われません。
単位 | 換算 |
mm（ミリメートル） | 10mm=1cm |
cm（センチメートル） | 1cm=10mm |
in（インチ） | 1in=2.54cm |
pt（ポイント） | 72pt=1in |
pc（パイカ） | 1pc=12p |
Web制作で使う代表的な単位
Web制作でよく使う単位は、「px（ピクセル）」、「%（パーセント）」、「em（エム）」です。
ボックスの幅や余白、ボーダーなどの指定のように、確定した数値を使いたい場合は「px」を使用します。
例えば、コンテンツを分割して左右に並べる時には、横幅の指定が必要になるので、
隣り合うボックス間の計算がしやすい「px」が多く使われます。
また、レスポンシブWebデザインのように、多様なデバイスに応じてコンテンツ幅を変えたり、
リキッドレイアウトのようにウィンド幅に追随させるレイアウトでは、「em」や「%」が使われたりします。
文字に使う単位
見出しや段落などのメリハリは、CSSでの装飾のほかに文字サイズを変化させたりします。
文字サイズの調整には「px」、「em」、「%」さらに「キーワードでの指定」です。
「px」は相対単位なので、異なるWebブラウザでも、同じ文字サイズになるので使い勝手がいいです。
「em」と「%」は、親要素の文字サイズに対する相対的な大きさを指定します。
例えば、body要素の中に書き込むp要素に対して「150%」と指定した場合、
body要素の文字サイズの1.5倍になります。
「em」の場合は、親要素の文字サイズを基準にして「〇文字分」と相対的に表示します。
例えば、「1.5em」であれば、1.5倍と考えられるため、直感的なサイズの変更に使われます。
まとめ
- Webサイトでは相対指定の単位をよく使う
- pxは固定的なレイアウトや配置に使われる
- 文字サイズの指定にはemを使うと、直感的に調整しやすい
