Jan. 27th,2019
CSSの画素密度の単位
““<resolution>”値”とは？
“<resolution>”値は画素密度を表します。メディアクエリで出力デバイスの画素密度を条件とする“resolution”メディア・フィーチャーの値として使用できます。
“<resolution>”値は“<dimension>”値の一つで、正の実数(“<number>”値)とそれに続く単位で表されます。“0”の場合でも単位が必要です。
基準となる長さは物理的な長さではなく、CSSの長さの単位に関連付けられます。例えば“96dpi”はCSSで定義された“1in”あたりのドット数で、この時“1in”は物理的な1インチとは異なる場合もあります。
“<resolution>”値が使用できる場所では“calc()”関数などを用いた数学的表現が使用できます。
“画素密度”とは？
“画素密度(解像度とも)”とは画像などを表現する画面の画素の密度を表す単位です。画素密度が高ければ高いほど精細な画像を表現することができます。
画素密度は一定の幅(例えば1インチ)の中にある画素もしくはドットの数で表現します。
画素密度は主に以下の2つの単位で表されます。
- dpi(dot-per-inch)
- 画面やプリンター、スキャナーなどのドットの密度
- ppi(pixel-per-inch)
- 画面やビットマップ画像の画素(ピクセル)の密度
印刷の分野では“ppi”は出力される画像データの画素の密度、“dpi”は出力するプリンターが表現できるドットの密度を表し、通常は画像の1つの画素を多数のドットで表現するため“dpi”は“ppi”よりも大きくなります。
画面では“ppi”も“dpi”も同じような意味で使われます。画面の場合は“ドット”は画面の画素のことを指します。
画素密度の単位
“dpi”
概要
“dpi”はCSSで定義された“1in”あたりのドット数を表します。
“1in=2.54cm”なので“1dpi≒0.39dpcm”です。
サンプルコード
@media ( min-resolution: 72dpi ) {
.sample {
/* このスタイルは解像度72dpi以上で適用されます。 */
}
}
“dpcm”
概要
“dpcm”はCSSで定義された“1cm”あたりのドット数を表します。
“1cm=1/2.54in”なので“1dpcm”は“2.54dpi”です。
サンプルコード
@media ( min-resolution: 28dpcm ) {
.sample {
/* このスタイルは解像度28dpcm以上で適用されます。 */
}
}
“dppx”
概要
“dppx”はCSSで定義された“1px”あたりのドット数を表します。
CSSでは“1in=96px”なので“1dppx”は“96dpi”です。
サンプルコード
@media ( min-resolution: 1dppx ) {
.sample {
/* このスタイルは解像度1dppx以上で適用されます。 */
}
}
“x”
概要
“x”はCSSで定義された“1px”あたりのドット数を表します。
“1x”は“1dppx”と同じです。また、CSSでは“1in=96px”なので“1x”は“96dpi”です。
サンプルコード
@media ( min-resolution: 1x ) {
.sample {
/* このスタイルは解像度1x以上で適用されます。 */
}
}
