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種類あります：絶対的な単位および相対的な単位。

絶対的な長さ単位は固定されています。絶対的な長さで表現された長さは、そのサイズとして正確に表示されます。

スクリーン上で絶対的な長さ単位を使用することは推奨されません。なぜなら、スクリーンのサイズは非常に変動するからです。ただし、出力メディアが既知の場合は、それらを使用できます。例えば、印刷レイアウト（print layout）に使用します。

* ピクセル（px）は、視聴装置に対して相対的です。低dpiのデバイスでは、1pxはディスプレイの1つのデバイスピクセル（ポイント）です。プリンタや高解像度のスクリーンでは、1pxは複数のデバイスピクセルを意味します。

相対的な長さ単位は、他の長さ属性に対しての長さを定義しています。相対的な長さ単位は、異なるレンダリングメディア間でより良いスケーリングを表現します。

単位	説明	TIY
em	要素のフォントサイズ（font-size）に対して（2emは現在のフォントサイズの2倍を意味します）	試してみてください
ex	現在のフォントの x-height（ほとんど使用されません）	試してみてください
ch	「0」に対する幅	試してみてください
rem	ルート要素のフォントサイズ（font-size）に対して	試してみてください
vw	ビューポートの幅の1％	試してみてください
vh	ビューポートの高さの1％	試してみてください
vmin	ビューポートの小さいサイズに対する1％	試してみてください
vmax	ビューポートの大きいサイズに対する1％	試してみてください
%	親要素に対して	試してみてください

ヒント：em と rem 単位は、完璧な拡張可能なレイアウトを作成するために使用できます！

* ビューポート（Viewport）= ブラウザのウィンドウのサイズ。ビューポートの幅が50インチ以内の場合、1vw = 0.5cmです。

テーブルの数字は、その長さ単位を完全にサポートする最初のブラウザのバージョンを示しています。