px(ピクセル)とはディスプレイの細かな点のこと
Web制作の場面でよく使われる単位「px(ピクセル)」
よく聞くけれど、それはいったい何?何センチなの?といった疑問のある方も多いのではないでしょうか。
今回は「px(ピクセル)」についてお話しようと思います。
Web制作でデザインやHTML・CSSコーディングを行う時にとても重要な要素です。
1pxとは小さなドットの事
パソコンや液晶はどうやって表示しているのか知っていますか?
実は小さな点の集合でできているんです。
電気屋さんで見かける大きなテレビや、綺麗な液晶なども拡大してみると小さな点を使って色を出しているんです。
その小さな点一つを「1px」と呼び、それが10個並べば10px、100個並べば100pxになります。
ちなみに最小単位は「1px」になるので、0.5pxや1.5pxなど、小数点以下の細かな値は存在しません。
ここがメートル法と異なる部分ですね。小数点以下を持たず、「0か1か」みたいな部分がいかにもデジタル!という感じがします。
20px幅の画像と20px指定の文字サイズの横幅、20pxの余白幅は全て同じ大きさになります。
ワープロソフトを使っていると、画像や余白はmm、文字はptなど、単位がコロコロと変わりますが、Web制作の場合は基本的に全てpx表記になるので、「mmは何ptかな?」とか、「ptは何mmかな?」と迷う事はありません。
ホームページ制作では、このpx(ピクセル)を使って文字の大きさや画像の横幅、余白などをデザインしていきます。
pxの大きさは画面によって変わる
「px(ピクセル)という概念についてはわかったけれど、それじゃあ一体何cmなの?」と疑問があると思います。
結論から言うと、パソコンの設定やモニタの規格によって変わるので、1pxは何cmです!と明記することはとても難しい問題です。
パソコンや液晶画面は小さな点の集合であるという事を前にお話しましたね。
電気屋さんでよく「HD」とか「フルHD」、最近だと「4K」なんて言葉をよく見かけませんか?
あれは画面を表示させる点を、どのくらい配置しているのかを表しているんです。
HDであれば1280×720、フルHDは1920×1080、4Kは3840×2160ですね。
この点の密度を「解像度」といい、簡単に説明すると「きめの細やかさ」を表しています。
同じサイズの画面でも、解像度が高いほど細かい表示が可能になるので綺麗に表示できるわけです。
ちなみに2KとフルHDは同じ解像度になります。
例えば横幅50cmの箱に色の付いた点を1280個置くのと、3840個置くのでは密度が全然異なりますよね。
どちらも箱の横幅は50cmなのに、中にある点(px)の数が変われば1pxの横幅も当然変わります。
ですので明確に「1pxは何cmです」とは言えないんです。
「なら、最初からcmで表示させればいいのに」なんて言葉が聞こえてきそうですが、それも難しい問題です。
それはパソコンの画面表示は小さな点の集まり、pxで作られているからです。
pxからcmの変換ができないなら、その逆も変換することが難しいのです。
まとめ
・px(ピクセル)とはディスプレイの細かな点のこと
・pxには小数点以下の細かな値は存在しない
・1pxの大きさは表示させる画面の仕様によって変化する