CSSユニット
CSSユニット
CSSには、長さを表すためのいくつかの異なる単位があります。
多くのCSSプロパティは、、、、など
width
の「長さ」の値を取ります。margin
padding
font-size
長さ10px
は、、
などの長さの単位が後に続く数値です2em
。
例
px(ピクセル)を使用して、さまざまな長さの値を設定します。
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
注:番号と単位の間に空白を表示することはできません。ただし、値がの場合
0
、単位は省略できます。
一部のCSSプロパティでは、負の長さが許可されます。
長さの単位には、絶対単位と相対単位の2種類があります。
絶対長さ
絶対長の単位は固定されており、これらのいずれかで表される長さは、正確にそのサイズとして表示されます。
画面サイズは大きく異なるため、絶対長単位を画面で使用することはお勧めしません。ただし、印刷レイアウトなど、出力メディアがわかっている場合は使用できます。
Unit | Description |
---|---|
cm | centimeters |
mm | millimeters |
in | inches (1in = 96px = 2.54cm) |
px * | pixels (1px = 1/96th of 1in) |
pt | points (1pt = 1/72 of 1in) |
pc | picas (1pc = 12 pt) |
*ピクセル(px)は、表示デバイスを基準にしています。低dpiデバイスの場合、1pxはディスプレイの1デバイスピクセル(ドット)です。プリンターと高解像度画面の場合、1pxは複数のデバイスピクセルを意味します。
相対的な長さ
相対長さの単位は、別の長さプロパティを基準にした長さを指定します。相対的な長さの単位は、異なるレンダリングメディア間でより適切にスケーリングされます。
Unit | Description | |
---|---|---|
em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
ex | Relative to the x-height of the current font (rarely used) | |
ch | Relative to width of the "0" (zero) | |
rem | Relative to font-size of the root element | |
vw | Relative to 1% of the width of the viewport* | |
vh | Relative to 1% of the height of the viewport* | |
vmin | Relative to 1% of viewport's* smaller dimension | |
vmax | Relative to 1% of viewport's* larger dimension | |
% | Relative to the parent element |
ヒント: emユニットとremユニットは、完全にスケーラブルなレイアウトを作成するのに実用的です。
*ビューポート=ブラウザのウィンドウサイズ。ビューポートの幅が50cmの場合、1vw = 0.5cmです。
ブラウザのサポート
表の数字は、長さの単位を完全にサポートする最初のブラウザバージョンを示しています。
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 | 12.0 | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |