このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

CSSの長さの単位

記事Jan. 8th,2019
July 7th,2020
CSSの<length>値、長さの単位について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSの長さの単位

““<length>”値”とは?

width”プロパティheight”プロパティfont-size”プロパティなど多くのプロパティの値として使用される、“<length>”値は距離の長さを表します。

<length>”値は実数(“<number>”値)とそれに続く単位で表されます。負の値をとることもできますが、プロパティによっては許容しない場合があります。長さが“0”の場合は単位が省略できます。

長さの単位には“相対長”と“絶対長”があります。

CSSの長さの単位はCSS2で定義されているほか、最新の仕様として“Values and Units Module Level 3(CR、勧告候補)”と“Values and Units Module Level 4(ED、編集者草案)”が策定されています。

相対長

相対長”は別の長さに依存する相対的な長さです。

CSSの相対長は特定の文字の大きさに依存する“フォント相対長”とビューポートの広さに依存する“ビューポート相対長”の2種類があります。

相対長はそれぞれの単位がそれぞれ異なる別の長さに依存するため単位間の大きさの関係性は一定ではありません。例えば、“1em”と“1rem”が等しい場合もありますし、等しくない場合もあります。大小関係も場合によって異なります。

相対長
相対長

また、emexchは同じ文書の中で同じ単位を使用していても長さを指定する要素によって長さが変わる場合があります。

絶対長

絶対長”は一つの基準の依存し、単位間の長さの比率は常に一定となる絶対的な長さです。

CSSの長さの単位では常に“2.54cm=25.4mm1in=72pt=6pc=96px”の関係が成り立ちます。

CSSの絶対長は以下のどちらかの基準に依存します。

物理的な長さの単位と一致
例えば、物理的な1インチとCSSの“1in”が一致。
“参照ピクセル”が“1px”と一致

物理的な長さの単位と一致する場合は実際に定規を当てれば対応する長さの単位と同じ長さになるということになります。例えば、CSSで指定した“1in”は定規を当てれば1インチの長さです。

参照ピクセルに依存する場合は物理的な長さの単位と一致する場合もありますが、しない場合もあります。参照ピクセルの定義については後述します。

物理的な長さの単位と参照ピクセルのどちらに依存するかはデバイスによって異なります。仕様書ではプリンタデバイスなどは物理的な長さの単位に、パソコン、スマートフォンなどのスクリーンデバイス、特別近い距離や遠い距離から見るようなデバイスは参照ピクセルに依存するべきとされています。

参照ピクセル

従来のデバイスでは“1px(ピクセル)”はその名前の通りディスプレイの画素(ピクセル)の1個分の長さを使って表現されていました。

Windowsをはじめとする従来の多くのソフトウェアやコンテンツが96dpiの画素密度で表示されることを想定して作られています。“1px”をディスプレイの画素1個で表現すれば“96px=1in”なので96dpiのディスプレイでは“1in”は物理的な1インチの長さと一致します。

しかし、画素の数が多いほど精細な画像を表現できるのでスマートフォンなどの最新のデバイスに搭載されたディスプレイは画素の一つ一つを小さくして、大きさが同じでも解像度を高めたものになっています。96dpiの2倍以上の200dpiや300dpiを超えるデバイスも珍しくありません。

画素密度2倍のイメージ
画素密度2倍のイメージ

ここで問題になるのが、これまで通り“1px”をディスプレイの画素1個で表現すると実際にディスプレイに表示される長さが、画素密度が2倍のディスプレイでは半分、画素密度が3倍のディスプレイでは3分の1の長さになってしまいます。そこで画素密度が大きく異なっても表示される大きさがある程度同じになるように“参照ピクセル”が定義されています。

参照ピクセル(reference pixel)”は96dpiのディスプレイをユーザーの腕の長さ(28インチ)の距離から見た時の画素1個の視角と定義されています。この定義に基づいた視角は約0.0213度です。96dpiでは1インチの長さに96個の画素があるのでこの時の“1px”は1/96インチとなります。

参照ピクセル
参照ピクセル

96dpiではないディスプレイでは“1px”はディスプレイの画素の数とは一致しないことになります。

また、ディスプレイからの距離によって参照ピクセルの長さは変わってきます。これは大きなディスプレイでは小さなディスプレイに比べて離れた位置から見ることを想定しているからです。近くで見る小さなディスプレイでも離れて見る大きなディスプレイでも参照ピクセルの長さが一定だったとすれば表示される内容が小さくて見えづらくなってしまいます。

距離と参照ピクセルの違い
距離と参照ピクセルの違い

視角をもとにした参照ピクセルとすることで同じ長さでも近くで見ることを想定した小さいディスプレイでは小さく、遠くから見ることを想定した大きなディスプレイは大きく表示され、実際のユーザーの視点からは同じような大きさで見えるようになります。

デバイスと参照ピクセルの見え方のイメージ
デバイスと参照ピクセルの見え方のイメージ

単位の一覧

相対長

単位 説明
フォント相対長
1em その要素の文字の大きさ
1ex その要素の“x”の文字の大きさ
1capValues and Units Module Level 4 で追加 その要素の英字の大文字の大きさ
1chValues and Units Module Level 3 で追加 その要素の“0”の文字の送り幅
1icValues and Units Module Level 4 で追加 その要素の“水”の文字の送り幅
1remValues and Units Module Level 3 で追加 ルート要素の文字の大きさ
1lhValues and Units Module Level 4 で追加 その要素の行の高さ
1rlhValues and Units Module Level 4 で追加 ルート要素の行の高さ
ビューポート相対長
1vwValues and Units Module Level 3 で追加 ビューポートの横幅の1%
1vhValues and Units Module Level 3 で追加 ビューポートの高さの1%
1viValues and Units Module Level 4 で追加 ルート要素のインライン軸方向のビューポートの長さの1%
1vbValues and Units Module Level 4 で追加 ルート要素のブロック軸方向のビューポートの長さの1%
1vminValues and Units Module Level 3 で追加 ビューポートの横幅の1%と高さの1%のうちの小さい方
1vmaxValues and Units Module Level 3 で追加 ビューポートの横幅の1%と高さの1%のうちの大きい方

絶対長

以下は物理的な長さの単位に依存する場合です。

説明
1cm 物理的な1センチメートルの長さ
1mm 物理的な1ミリメートルの長さ
1qValues and Units Module Level 3 で追加 物理的な1/4ミリメートルの長さ
1in 物理的な1インチの長さ
1pt 物理的な1/72インチの長さ
1pc 物理的な1/6インチの長さ
1px 物理的な1/96インチの長さ

以下は参照ピクセルに依存する場合です。

説明
1cm 1in”の2.54分の1の長さ
1mm 1cm”の10分の1の長さ
1qValues and Units Module Level 3 で追加 1mm”の4分の1の長さ
1in 96px”の長さ
1pt 1in”の72分の1の長さ
1pc 1in”の6分の1、“12pt”の長さ
1px 参照ピクセルの長さ

仕様書

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク