長さ単位の基本
スタイルシートでは様々なサイズ指定の単位が用意されています。 それらを大まかに分類すると、相対単位と絶対単位に分けられます。 2つの違いと各種単位について学びましょう。
相対単位と絶対単位
相対単位(px,%など)はピクセル数や要素の幅などの基準サイズに対して相対的な長さになります。誤解を恐れずに言えば、画面サイズが変われば長さが変わる単位です。
対して絶対単位(mm,cmなど)は実際の長さで表示されます。PCの大画面で見てもスマートフォン画面で見ても、絶対単位で指定すればその大きさで表示されます。
単位 | 読み方 | 説明 | 相対/絶対 |
---|---|---|---|
px | ピクセル | ディスプレイの解像度に依存する | 相対単位 |
% | パーセント | 要素や幅などに依存する | |
em | em | フォントの高さを1とする | |
cm | センチメートル | 絶対単位 | |
mm | ミリメートル | ||
in | インチ | 1インチ = 25.4mm |
通常のサイト製作では相対単位を使用します。もっと言えば大抵ピクセル(px)を単位として使用します。ピクセルは画面の解像度を基準とするサイズなので、環境が違えば少々のサイズずれは起こります。しかし画面の解像度からサイトのサイズを調整してくれるので、想定外のレイアウトになる事はほぼありません。
特に近年はPC、タブレット、スマートフォンなどクライアント側の環境も様々なので、基本的に相対サイズを使いましょう。 ただし絶対単位の出番がない訳ではないです。例えば設計書や印刷物などは絶対単位の方が向いている点が多くあります。状況に合わせて最適なサイズを採用しましょう。
CSSでのサイズ指定
サイズはこのように指定します。
{font-size : サイズ;}
小数点以下のみの場合、0を省略することができます。 下の2つの指定は同じ内容です。
{font-size : 0.5em;}
p{font-size : .5em;}