液晶画面1ドットで表示されるとは限らないCSSで指定した「1px」は、必ずしも液晶画面の「1ドット」とイコールではありません。スマートデバイスなどで使われる高精細ディスプレイでは、「太さ1px」の線が、液晶画面の2ドット以上の幅で表示されることもあります。unit)という単位もあります。ウェブページを高精細ディスプレイに対応させるための基礎を解説。文宏ホームページ作成ガイド太さ1pxの線は、液晶画面の1ドットの幅で描かれる......とは限らない!?外枠は太さ1pxの画像ウェブ上で「太さ1px」の線を引くよう装飾すると、たいていは液晶画面上でも「1ドットの太さ」で線が引かれます。右図を一般的なPC用液晶画面で表示した場合のように。液晶画面のサイズが横幅1,024ドットであり、その領域の端から端までをすべて描画に利用可能であれば、最大で横幅1,024pxの画像が切れることなく・潰れることもなく表示できる......と考えて問題ありませんでした。※もちろん、閲覧者が自ら拡大縮小率を変更すれば、表示可能なサイズも変化します。ところが、iPhoneをはじめとするスマートフォンに「Retinaディスプレイ」などの高精細ディスプレイが搭載されるようになると、話はそう単純ではなくなりました。高精細ディスプレイでは、1pxが複数のドットで描かれることもある液晶画面の物理的なドット数(左)と、ブラウザ上で描画されるピクセル数(右)は、同じとは限らない例えば、iPhone4~5の端末だと、物理的な液晶画面の横幅は640px(ドットが横方向に640個)です。width)は320pxに設定されています。「320px分の内容」を「640個のドット」で描くことになります。したがって、CSSで「太さ1pxの線」を引くと、実際には液晶画面の「2ドットの幅」で線が引かれます。※上記は(例えばHTMLのmeta要素でviewportの値に「initial-scale=1」を指定するなどして)、ズーム倍率が1に設定された状態で描画した場合の話です。定規画像もし高精細ディスプレイを搭載した端末をお持ちなら、以下のサンプルページを表示させてみて下さい。このページには、右図のように縦横に5pxごとに線を引いた定規画像が掲載されています。touch(第5世代)のブラウザSafariで表示させてみた例です。横幅は640ドットあるはずなのに、背景の定規画像は、横方向に320pxまでしか表示されていないことが分かります(※下記の画像は、クリックすると拡大ページに移動します。そこでさらに画像をクリックすると原寸で表示されます)。(※QRコードは、先のサンプルページのURLです)つまり、この端末では、「横320×縦460px」分の画像が、縦横2倍に拡大されて(=1pxを縦横に2倍した計4ドットで描画して)「横640×縦920ドット」で表示されているわけです。Ratio(デバイス・ピクセル・レート)」とも呼ばれ、端末によって2倍だったり3倍だったり様々です。2倍だった場合は、右図のように「1px」が「液晶4ドット」で表示されます。今後はもっと倍率の高い(=高精細な)ディスプレイも出てくるかも知れません。※現在の一般的なPC用ディスプレイではこの倍率が「1倍」なので、CSSの1pxは液晶画面でも1ドットです(閲覧者が画面の表示倍率を変更しない限りは)。横幅300pxの画像は、実際には横幅600ドットで(倍率2倍で)表示?上記のように「1pxを(縦横2ドットずつの)計4ドット」で描画する端末の場合、横幅300pxの画像を表示させると、実際には液晶画面の横幅600ドットを使って描画されます。大きめの画像を、(直接は加工せずに)CSSで表示サイズを縮めて掲載この場合、実際の横幅が600pxの画像を、(直接画像を加工はせずに)CSSを使って半分に縮小して横幅300pxとして表示させると、端末の液晶をフルに活用した(高精細な)表示ができるようになります。表示面積が同じでも、解像度が2倍あれば、(高精細画面で閲覧したときに)細かく綺麗に見える高精細ディスプレイを搭載した端末をお持ちなら、下記のサンプルページも表示させてみて下さい。このページには右図のように、同じ写真が2枚ずつ並んでいます。写真の内容は同じですが、解像度(原寸サイズ)は異なっており、同じ表示面積になるようCSSを指定して掲載しています。「解像度の異なる画像の表示テスト」サンプルページのQRコードどちらも表示サイズは横300px・縦200pxで同じですが、高精細ディスプレイで両者の画像を比較すると、綺麗さ(高精細さ)に差があることが分かります。→「解像度の異なる画像の表示テスト」サンプルページ(右図は、このページのURLを含んだQRコード)一般的なPC用ディスプレイなど、「1px」を液晶画面の「1ドット」で表示させる環境では、ブラウザの設定で表示拡大率を200%にしてみると、(倍率2倍の)高精細ディスプレイでの表示の差を見ることができます。下図は、そのようにして2倍に拡大してみた場合の一例です。(左)横600pxの画像をCSSで半分(横300px)に縮小した状態を、高精細ディスプレイで閲覧した場合のイメージ(右)横300pxに縮小加工した画像を、そのまま横300pxの面積で表示した状態を、高精細ディスプレイで閲覧した場合のイメージこのように、大きめの画像をアップロードしておき、CSSを使って表示面積を調整(縮小)する方法で掲載しておくと、高精細ディスプレイで閲覧された場合にも、そのディスプレイの高精細さを有効に活用した表示ができます。1pxを何ドットで描画するのか?=「dppx」これまでにご紹介したように、「ウェブ(CSS)での1px」は、「液晶ディスプレイの1ドット」とイコールだとは限りません。unit)という単位も定義されています。詳しくは、次のページでご紹介致します。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。