今さら聞けなそうなptとかpx、画面サイズと解像度の話 | 乙街道
乙技を求めて クリエイティブな情報

【今さら聞けなそうなptとかpx、画面サイズと解像度の話】

20180827_00

「この図形の幅を20px、この見出しを20ptで出力・・・」
普段何気なく、そしてなんとなく使っているptやpx。
それはまるでイモリとヤモリのような・・・あらためまして、高橋倫佑です。
画像は某高級焼肉店の特選カルビ焼きです。う~ん。美味しかった・・・さて!

フォトショップやイラストレーター、ドリームウィーバーを使用していてもpxやptどちらか出てきたことはありませんか。
webにおけるフォントサイズのポイント指定とピクセル指定の違い、そして解像度とはなんなのでしょう。

  1. px(ピクセル)ってなに?
  2. pt(ポイント)ってなに?
  3. 画像解像度と画像サイズの関係
  4. さいごに

px(ピクセル)ってなに?

パソコンの画面ってどういう風な表示の形式をとっているかご存知ですか。
実は、あの鮮やかな液晶も、このどでかいディスプレイも、私たちのパソコンの画面は小さな点の集まりで出来ています。
1px(ピクセル)とはその小さな点のことです。
1px(ピクセル)はパソコンの画面に表示できる情報の最小単位です。その点が100個並べば100px。さらに500個並べれば500pxといった感じです。
同様に、100pxの幅の画像と100px指定の文字幅は同じ大きさになります。

繰り返しになりますが、私たちのパソコンの画面は1つ1つのピクセルで表示されています。
ですから、webサイトをコーディングする時にはピクセルを指定することで、余白や画像の幅、そしてフォントの大きさを思った通りの大きさに表現することが出来ます。

pt(ポイント)ってなに?

1pt(ポイント)は72分の1inch(インチ)という長さの単位です。
それは現実世界、画面上関係なく、例えばフォントの大きさを72ptと指定した文字は、パソコンの画面解像度に関わらず、画面にメジャーをあてて計測すると1inch(インチ)です。1インチといっても私たちにはなじみ深い数字じゃないかもしれません。
なじみ深い言葉だと1インチは2.54 センチメートルです。72ptを指定すると2.54センチメートルの幅になるということですね。

pt(ポイント)はどういった時に使うのか。
チラシやフライヤー、ジャケットや雑誌、パッケージなど、データを紙に出力するDTPの世界では、フォントサイズ指定はpt(ポイント)で作られます。

pt(ポイント)をWEBで使うとなにか不便なことがあるのでしょうか。
あります。それはモニタの画面解像度(dpi)の問題です。

Windowsは96dpi、Macは72dpiという出力解像度ですが、OSの基本設定はそうであっても、使用するモニタの解像度によって実際の画面解像度(dpi)が左右されるので、最終的なdpiはパソコンによってバラバラです。

dpiというのは1インチ内にドットがいくつ並ぶかという数値です。
dpiがPCによってバラバラという事は、フォントサイズを72ptと指定された文字が何ピクセルになるかはPCによってバラバラという事です。
これでは、文字も含めて狙ったレイアウトに収めるのは至難の業です。

画像解像度と画像サイズの関係

画像自体の「画像解像度(dpi)」、windowsの「出力解像度(dpi)」モニタの「画面解像度(dpi)」など、解像度(dpi)という言葉がたくさん出てきました。
どれも解像度(dpi)ではあるのですが、今一度、この解像度とは何を示しているのでしょうか。

画像解像度が72dpiの画像と144dpiの画像では数値の大きい144dpiの画像のほうが精度が高い画像となっています。
解像度の単位に使用されるdpiとは、先ほども書きましたが、1インチあたりのピクセル(ドット)数という意味があります。72dpiのピクセル画像というのは、画像を構成するピクセルひとつの大きさが1/72インチであり、144dpiの画像ではひとつのピクセルの大きさが1/144インチということです。そして288dpiならばひとつのピクセルの大きさが1/288。非常に細かく精度が高い画像となります。

簡単に言うと、「dpiが高い=精度が高い=1ピクセルの大きさが小さくなっている」と、印刷時に小さなツブツブで印刷できるので輪郭がギザギザになってしまったり、モザイクタイルのようにならないわけですね。反対に画像解像度が低いと大きなツブツブで印刷しなければならないので輪郭の処理が荒くなってしまうわけですね!

なるほど、webの画像を印刷すると、ボヤーッとしてしまうのは画像解像度が低いからですね!

以下をご覧ください。
同じ「あ」という文字でそれぞれ300px×300pxの中に300dpiと72dpiで表現されたものの比較です。

ツブツブが小さい、きめの細かい、300dpiの勝ちですね。

乙街道 twitter

【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】 エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。 非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山! youtu.be/rrUPDBgqHiM

test ツイッターメディア - 【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】
エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。

非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山!
https://t.co/Mo1wvyvEa6 https://t.co/41yEddUGp6

【4月はずーっと #モンスト 月間】ログインオーブがいつもの10倍!オーブが毎日10個、最大200個もらえる!さらに、みんなでマルチをしてもオーブがもらえる!オーブを使っていくと限定キャラ確定のガチャも引けちゃう!?この春もみんなで一緒にモンスト♪ #ズットモ xfl.ag/3qr5CDu

続・グフカスリハビリ配信🤗 Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。 クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。 下格取り回しやすくなった。 でも敵も強くなった❗️ …心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。

test ツイッターメディア - 続・グフカスリハビリ配信🤗
Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。
クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。
下格取り回しやすくなった。

でも敵も強くなった❗️

…心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。 https://t.co/rpL8S5knPf

こないだは嫁氏の誕生日でした🎉 しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝 夜はディジョンのバースデーケーキでお祝い🍰 プレゼントは欲しがってたSwitch🎮 誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍

test ツイッターメディア - こないだは嫁氏の誕生日でした🎉
しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝
夜はディジョンのバースデーケーキでお祝い🍰
プレゼントは欲しがってたSwitch🎮
誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍 https://t.co/5G6URuogF7
希光デザイン事務所
乙街道の管理人はホームページとか作る仕事をしています。
制作依頼やご相談もお気軽にどうぞ。

【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】 エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。 非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山! youtu.be/rrUPDBgqHiM

test ツイッターメディア - 【クロブ】グフカスタム横格始動実用コンボ考察【EXVS2XB】
エクバ2と比較し上方修正をもらった横格、その実用コンボをピックアップしました。

非覚醒時、オバヒからでも303ダメ、高火力・拘束324、4秒で273良効率コン、カット耐性コン、297攻め継など魅力的なコンボが沢山!
https://t.co/Mo1wvyvEa6 https://t.co/41yEddUGp6

【4月はずーっと #モンスト 月間】ログインオーブがいつもの10倍!オーブが毎日10個、最大200個もらえる!さらに、みんなでマルチをしてもオーブがもらえる!オーブを使っていくと限定キャラ確定のガチャも引けちゃう!?この春もみんなで一緒にモンスト♪ #ズットモ xfl.ag/3qr5CDu

続・グフカスリハビリ配信🤗 Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。 クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。 下格取り回しやすくなった。 でも敵も強くなった❗️ …心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。

test ツイッターメディア - 続・グフカスリハビリ配信🤗
Nサブ強くなった。メイン少し強くなった。格闘前派生ついた。
クラッカー炎上をサブで上書き出来るようになったのとても嬉しい。
下格取り回しやすくなった。

でも敵も強くなった❗️

…心なしかグリグリがスカることが多くなった気がする。デスコン失敗になるの嫌だなぁ。 https://t.co/rpL8S5knPf

こないだは嫁氏の誕生日でした🎉 しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝 夜はディジョンのバースデーケーキでお祝い🍰 プレゼントは欲しがってたSwitch🎮 誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍

test ツイッターメディア - こないだは嫁氏の誕生日でした🎉
しばらく行けてなかった千葉港のOcean Tableでランチ🍖🍨🍝
夜はディジョンのバースデーケーキでお祝い🍰
プレゼントは欲しがってたSwitch🎮
誕生日っていいね😊お祝いする側もたくさんあやからせてもらいました😍 https://t.co/5G6URuogF7