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

CSSの画素密度

記事Jan. 27th,2019
July 7th,2020
CSSの<resolution>値、画素密度について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

CSSの画素密度の単位

““<resolution>”値”とは?

<resolution>”値は画素密度を表します。メディアクエリで出力デバイスの画素密度を条件とするresolution”特性の値として使用できます。

<resolution>”値は正の実数(“<number>”値)とそれに続く単位で表されます。“0”の場合も単位は省略できません。

基準となる長さは物理的な長さではなく、CSSの長さの単位に関連付けられます。例えば“96dpi”はCSSで定義された1inあたりのドット数で、この時1inは物理的な1インチとは異なる場合もあります。

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

“画素密度”とは?

画素密度(解像度とも)”とは画像などを表現する画面の画素の密度を表す単位です。画素密度が高ければ高いほど精細な画像を表現することができます。

画素密度は一定の幅(例えば1インチ)の中にある画素もしくはドットの数で表現します。

画素密度
画素密度

画素密度は主に以下の2つの単位で表されます。

dpi(dot-per-inch)
画面やプリンター、スキャナーなどのドットの密度
ppi(pixel-per-inch)
画面やビットマップ画像の画素(ピクセル)の密度

印刷の分野では“ppi”は出力される画像データの画素の密度、“dpi”は出力するプリンターが表現できるドットの密度を表し、通常は画像の1つの画素を多数のドットで表現するため“dpi”は“ppi”よりも大きくなります。

画面では“ppi”も“dpi”も同じような意味で使われます。画面の場合は“ドット”は画面の画素のことを指します。

単位の一覧

単位 説明
dpi 1inあたりのドット数
dpcm 1cmあたりのドット数
dppxValues and Units Module Level 3 で追加 1pxあたりのドット数
xValues and Units Module Level 4 で追加 1pxあたりのドット数、dppxと同じ

画素密度の単位

dpi

概要

dpi”はCSSで定義された“1inあたりのドット数を表します。

1in=2.54cm”なので“1dpi0.39dpcm”です。

サンプルコード

@media ( min-resolution: 72dpi ) {
.sample {
/* このスタイルは解像度72dpi以上で適用されます。 */
}
}

dpcm

概要

dpcm”はCSSで定義された“1cmあたりのドット数を表します。

1cm=1/2.54in”なので“1dpcm”は“2.54dpi”です。

サンプルコード

@media ( min-resolution: 28dpcm ) {
.sample {
/* このスタイルは解像度28dpcm以上で適用されます。 */
}
}

dppxValues and Units Module Level 3 で追加

概要

dppx”はCSSで定義された“1pxあたりのドット数を表します。

CSSでは“1in=96px”なので“1dppx”は“96dpi”です。

サンプルコード

@media ( min-resolution: 1dppx ) {
.sample {
/* このスタイルは解像度1dppx以上で適用されます。 */
}
}

xValues and Units Module Level 4 で追加

概要

x”はCSSで定義された“1pxあたりのドット数を表します。

1x”は1dppxと同じです。また、CSSでは“1in=96px”なので“1x”は“96dpi”です。

サンプルコード

@media ( min-resolution: 1x ) {
.sample {
/* このスタイルは解像度1x以上で適用されます。 */
}
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク