CSS には、長さを表すための幾つかの異なった単位があります。
幅、マージン、パディング、フォントサイズ、ボーダー幅等のような、多くの CSS プロパティは「長さ」を持っています。
長さは、10px、2em のように、数字の後に長さの単位を続けます。
数値と単位の間に空白を入れることはできません。値が 0 である場合には、単位を省略することができます。
一部の CSS プロパティには、マイナスの長さが許されるものがあります。
長さの単位には、相対と絶対の2種類があります。
表中の数字は、長さの単位を完全にサポートした最初のブラウザのバージョンを示しています。
| Length Unit | |||||
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | 未サポート | 19.0 | 未サポート | 20.0 |
注: Internet Explorer 9 は、非標準の名称 vm により vmin をサポートしています。
相対的な長さの単位は、他の length プロパティに相対的な長さで指定します。 相対的な長さの単位は、いろいろな表示メディア（例えば画面）での拡大・縮小に優れています。
| Unit | 説明 |
|---|---|
| em | 要素に対する相対的なフォントサイズ（2emは、現在のフォントの2倍の大きさを意味します） Try it |
| ex | 現在のフォントの x-height に相対的なサイズ（ほとんど使用されません） Try it |
| ch | "0"（ゼロ）の幅に相対的なサイズ |
| rem | ルート要素のフォントサイズに相対的なサイズ |
| vw | ビューポート* の幅の 1% に相対的なサイズ Try it |
| vh | ビューポート* の高さの 1% に相対的なサイズ Try it |
| vmin | ビューポート* の小さなサイズの 1% に相対的なサイズ Try it |
| vmax | ビューポート* の大きなサイズの 1% に相対的なサイズ Try it |
| % |
チップ: 単位 em と rem は、完全にスケーラブルなレイアウトを作成する時に実用的です！
* ビューポート = ブラウザ・ウィンドウ・サイズ。ビューポートの幅が 50cm の場合、1vw = 0.5cm です。
絶対的な長さの単位は固定され、これらのいずれかで表された長さは正確にそのサイズで表示されます。
絶対的な長さの単位は、画面サイズがいろいろに変化するため、画面に使用することはお勧めできません。 印刷用のレイアウトのように、出力媒体が分かっている場合は使用することができます。
| Unit | 説明 |
|---|---|
| cm | センチメートル Try it |
| mm | ミリメートル Try it |
| in | インチ (1in = 96px = 2.54cm) Try it |
| px * | ピクセル (1px = 1/96th of 1in) Try it |
| pt | ポイント (1pt = 1/72 of 1in) Try it |
| pc | パイカ (1pc = 12 pt) Try it |
* ピクセル（PX）は、表示用デバイスを基準にしています。 低解像度デバイスの場合、1px はディスプレイの 1 デバイスピクセル（ドット）です。 プリンタや高解像度のスクリーンの場合、1px は、複数のデバイスピクセルです。