必見の記事

”WebページをRetina対応させるテクニック~基礎知識編” を @IT に寄稿しました

2013.08.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

そんな訳で、@IT で不定期連載中の jQuery x HTML5 x CSS3 をまじめに勉強 シリーズですが、第四回目を寄稿しました。

この連載は当ブログにおいてもシリーズ化している「HTML5 x CSS3 x jQueryをまじめに勉強してみる」の出張版という位置づけですが、解説文やサンプルコードを新たに書き起こすなど、増補改訂版として発信しております。

第四回目は、iPhone や Macbook Pro 等の製品に搭載されている Retina ディスプレイをはじめとした高精細ディスプレイで Web ページを最適に表示させるための知識について解説しています。

Retinaディスプレイとは、AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称である。「Retina」とは英語で「網膜」を意味する。

Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから960×640ピクセルに、つまり4倍になっている。

1インチあたりの画素数(ppi)で示すと、初代のiPhoneからiPhone 3Gまでは163ppiだったのに対して、iPhone 4のRetinaディスプレイでは326ppiになっている。ppiは1インチ幅の中に敷き詰められている画素(ピクセル)の数を示す単位であり、ppiが163から326に倍増していることは、すなわち平方インチにして4倍の密度となっていることを意味する。Retinaディスプレイの画素1個の幅は78マイクロメートルであるといい、ほぼ肉眼では画素を認識できない水準になっている。

(参考: IT用語辞典バイナリ)

ちなみに今回は初めて @IT 用に新たに書き下ろしたモノでもあります。

寄稿記事はこちら

jQuery×HTML5×CSS3を真面目に勉強(4): WebページをRetina対応させるテクニック~基礎知識編