CSSピクセルとは何なのか?

昨今、グーグルのアルゴリズムにモバイル対応の項目が追加されることが、サイト運営者の間で話題にあがることが多いかもしれません。

モバイル対応といいましても、ガラケーなどのフィーチャーホンではなく、主にスマートフォンやタブレット端末に関する最適化になりますが、大まかにいえば、iosに対応することが要求されているのだろうと思われます。

もちろん、スマホ=アイホンというわけではなく、ほかにもアンドロイド携帯などもありますが、ユーザー数の割合からみてもiPhoneに対応するのが最低限、必要とされているのでしょう。

わたしの場合でいいますと、現在はiPhone5を使っておりますので、この画面では最適化するようにレスポンシブウェブデザインでモバイル対応してはおりますが、この解像度という概念がいろいろ複雑で未だに理解できない面があります。

iPhone6 Plusは少し大き目の解像度になりますし、タブレット端末にもiPad とかminiとか、いろいろ存在するわけです。ppiとかdpiとか、pxとかインチとか、いろいろな単位が出てきて頭を悩ますことになります。

このなかで、1インチは2.54センチメートルになりますので、実数での幅が出てきますが、ピクセルなどは、密度的な意味合いになるため、デバイスによって実数が異なるため、正確な大きさは出てきません。

そのあたりで複雑化してしまっている傾向がありますが、公式サイトによると、iPhone 5sで外装度が1,136 x 640ピクセルとなっているようです。

けれども、iPhone 3G の場合の解像度が480×320ピクセルとなっており、同じような大きさなのに、1世代前のと比較するとピクセル幅に倍以上の違いもあるわけです。

これを単純に考えれば、iPhone 3G で表示した320pxのものが、iPhone 5sでは640pxと倍の大きさで表示されることになってしまいます。

けれども、実際にはそうはなりません。

これは密度が上がったという意味でのデバイス側の解像度になりますので、ウェブデザインにおけるpxとはまた違う意味があるわけです。これを区別するために、csspxなどと呼ばれておりますが、このあたりがごちゃごちゃになってしまい、レスポンシブウェブデザインが複雑化している傾向にあると思います。

サイト運営者が使うスタイルシートのピクセルは多少、意味合いが違うという点は抑えておくべきポイントになるかと思います。