CSS単位

CSSには長さを表すための異なる単位がいくつかあります。

CSSの長さを設定するいくつかのプロパティには、width、margin、padding、font-size、border-widthなどがあります。

長さは数字と単位で構成されます(例: 10px、2emなど)。

数字と単位の間にスペースを入れることはできません。長さの値が0の場合は、単位を省略できます。

一部のCSSプロパティでは、長さは負の値にできます。

長さの単位には、相対と絶対の2種類があります。


ブラウザサポート

以下の表の数字は、その長さ単位をサポートする最低バージョンのブラウザを示しています。

長さ単位 Chrome IE Firefox Safari Opera
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 をサポートしています。


相対長さ

相対長さ単位は、別の長さに対する長さのプロパティを指定します。相対長さは、異なるデバイスに対してより適しています。

 
単位 説明 オンライン例
em これは現在の要素に適用されているフォントサイズに対する相対的なサイズを表すため、相対長さ単位でもあります。一般的なブラウザのフォントサイズはデフォルトで16pxなので、2em == 32pxになります。 試してみる
ex 英文字の小文字「x」の高さに依存します。 試してみる
ch 数字「0」の幅
rem remはルートem(root em)の略です。remは非ルート要素に適用される場合、ルート要素のフォントサイズに対する相対値です。remがルート要素のフォントサイズに適用される場合、その初期フォントサイズに対して相対的です。試してみる
vw Viewport Width、ビューポートの幅、1vw=ビューポート幅の1% 試してみる
vh Viewport Height、ビューポートの高さ、1vh=ビューポート高さの1% 試してみる
vmin vwとvhのうち小さい方。 試してみる
vmax vwとvhのうち大きい方。 試してみる
%    

Note ヒント:remとemの違いは何でしょうか?違いは、remを使用して要素のフォントサイズを設定する場合、相対サイズではありますが、相対するのはHTMLのルート要素だけです。

絶対長さ

絶対長さ単位は固定値であり、実際の物理的なサイズを表します。絶対長さ単位は出力メディアに依存し、環境(ディスプレイ、解像度、OSなど)には依存しません。

単位 説明 オンライン例
cm センチメートル 試してみる
mm ミリメートル 試してみる
in インチ (1in = 96px = 2.54cm) 試してみる
px * ピクセル (1px = 1/96th of 1in) 試してみる
pt ポイント、約1/72インチ;(1pt = 1/72in) 試してみる
pc パイカ、約12pt、1/6インチ;(1pc = 12pt) 試してみる

ピクセルはおそらく「デバイスピクセル」として最もよく知られていますが、このピクセル長は、ディスプレイ上で見えるテキストのスクリーンピクセルとは関係ありません。pxは実際には角度で測定される単位です。

その他の拡張