2/2 CSSの1pxは液晶画面1ドットで表示されるとは限らない [ホームページ作成] All About

CSS3には、dppx(dots per 'px' unit)という単位もある

解像度を表すために使われる単位としては、「dpi」(＝dots per inch／1インチあたりに何ドットあるか)などをよく目にするでしょうか。CSS3では、解像度を示す単位の一つとして、「dppx」も定義されています。このdppxは「dots per 'px' unit」の意味で、「1ピクセルを何ドットで描くか」を示す単位です。

レスポンシブ・ウェブデザイン(CSSのMedia Queries)を使って、閲覧者の環境に応じてデザインを変更する際に、この単位「dppx」が使えます。例えば、「1pxが2ドット以上で描画される場合」にのみ特定のスタイルを適用したいなら、以下のようにCSSを記述できます。

@media (min-resolution: 2dppx) {
   ～～～ 高精細画面用のスタイル ～～～
}

(参考) W3C「CSS Values and Units Module Level 3」ページ内の「6.4. Resolutions: the <resolution> type and ‘dpi’, ‘dpcm’, ‘dppx’ units」項目。(英語ページ)

高精細ディスプレイで閲覧されている場合に限って、解像度の高い(＝原寸サイズの大きな)画像を表示したい際などに活用できるでしょう。

ただし、Safari(本稿執筆時点での最新版はVer.8)や、古いChrome・Android Browserなどでは「min/max-resolution」の記述方法はサポートされていません(※)。ただし、両ブラウザには同様の目的に使える「device-pixel-ratio」という記述方法が用意されているため、下記のように併記しておくと良いでしょう。

@media (min-resolution: 2dppx),
       (-webkit-min-device-pixel-ratio: 2) {
   ～～～ 高精細画面用のスタイル ～～～
}

※Chrome29以降、Android Browser4.4以降、Firefox16以降、Opera12.1以降で対応しています。IEはIE9以降で「min/max-resolution」の記述方法自体はサポートしているものの、今のところ(本稿執筆時点の最新版はIE11)では単位にdppxは使えません。

「CSSの1px」は「液晶画面の1ドット」とイコールとは限らない

今回は、「CSSで指定するピクセル数」と「画面の物理的なドット数」とは必ずしもイコールだとは限らない、CSSで指定した「1px」は液晶画面の「1ドット」で表示されるとは限らない、という点をご紹介致しました。なかなか紛らわしくてややこしいのですが、ウェブサイトを高精細ディスプレイにうまく対応させるためには、この点を把握しておく必要があります。お持ちのPC・スマートデバイスなどで表示を比較して、ぜひ確認してみて下さい。

高精細ディスプレイで閲覧されても良いように、最初から高い解像度の画像を掲載しておく方法もあります。しかし、その場合は、高精細ではないディスプレイで閲覧された場合に、通信量が無駄になってしまいます。高精細ディスプレイが使われている場合にのみ高い解像度の画像を表示させる方法などについては、またの機会に詳しく解説致します。

【関連記事】