Web制作において、CSSで指定する「幅」や「高さ」が、実際の画面上でどう表示されるか疑問に思ったことはありませんか？
このページでは、CSSのピクセル値とパソコンの物理的な座標との関係を、実際の測定結果を交えてわかりやすく解説します。
DPR（Device Pixel Ratio）やディスプレイの拡大率が、どのように表示に影響するのかを理解することで、より正確なレイアウト設計が可能になります。
初心者でも実践できるPythonコードも紹介しているので、ぜひ一緒に学んでみましょう！
パソコンのピクセルとは？
CSSで指定する「ピクセル（px）」と、パソコンの物理的なピクセルは必ずしも一致しません。Web制作を行う前に、CSSのピクセルと実際の画面上のピクセルの関係を理解しておくことが重要です。誤解を避けるためにも、まずは自分の環境でのピクセルの挙動を確認しましょう。
パソコン上の座標の確認方法
実際の座標は、Pythonライブラリ「PyAutoGui」を使って取得できます。次項の画像は、右下にカーソルを持っていたときの画像です。座標表示のコードは以下参照してください。
注意）以下のパソコンのディスプレイ解像度設定で「拡大/縮小」で設定を変えた場合、Pyautoguiを立ち上げ直さないと正確な座標を測定できません。
パソコンの解像度設定
パソコンの解像度設定を確認します。
画面を右クリック→ディスプレイ設定
Pythonを使った解像度確認方法
import pyautogui
print(pyautogui.size()) # 画面解像度
Size(width=1920, height=1080)この値は、私のモニタAOPEN ゲーミングモニター 22ML2Qbix 21.5型ワイド の以下の仕様でもあります。
ディスプレイ最大解像度 1920 x 1080 ピクセル
CSS座標と実際の座標を比較（DPRの算出）
500×120と1000×240のboxを書いて、実際の座標を測定してみた。
私の場合「拡大/縮小」125%に設定しているので、Pyautoguiで測定した座標は125%大きい。
DPRとは、1つのCSSピクセル（ウェブデザインの単位）が、画面上のいくつの物理的なピクセル（ドット）に対応するかを示す値です。
500×120のbox
<style>body{margin:0}.box{width:500px;height:120px;background:#93c5fd}</style>
<div class="box">幅500px縦120px</div>
右下の画面上の座標 785,350
1000×240のbox
<style>body{margin:0}.box{width:1000px;height:240px;background:#e8fd93}</style>
<div class="box">幅1000px縦240px</div>
右下の画面上の座標 1566,531
実X座標（boxの右下端） = CSS幅 × DPR
785 = 500 × DPR → DPR ≈ 1.57
1566 = 1000 × DPR → DPR ≈ 1.57
DPRは同じになる。
目標座標 = 500pxにしたい場合、以下に変えればいい。
CSS幅 = 500 ÷ 1.57 ≈ 318px
<style>body{margin:0;}.box{width:318px;height:120px;background:#93c5fd;}</style>縦方向のPyautoguiで測定した座標は、ブラウザのタグ、アドレスバー、お気に入りバーなどが加算されています。CSSのy座標の0は、ブラウザの表示領域なので、その分（実測値162）を引く必要があります。
実Y座標（boxの右下端） = CSS幅 × DPR
350-162 = 120 × DPR → DPR ≈ 1.57
531-162 = 240 × DPR → DPR ≈ 1.54カーソルの位置による測定誤差などがあるので正確には求められないがDPRは1.57。
ディスプレイ解像度設定の「拡大/縮小」を125%→100%に変えるとDPRは1.25です。（=1.57/1.25）
ということでCSSの設定値とパソコンのピクセル座標にはDPR倍の関係があります。
ただ、CSSの数字による設定値は、そのまま実行されることは少なく、他のCSSの設定項目の影響で、縮小拡大されるので、かなり複雑になることは頭に入れておいた方がいいと思います。
HTML・CSS「配置と大きさ」入門
以上を踏まえて、こちらを参考にしていただければと思います。
本書の内容の総合サンプルです。
https://django6.kikuichige.com/zenn/sougou.html
まとめ
CSSで指定するサイズと、実際の画面上のサイズにはDPRによる倍率の違いがあります。さらに、CSSの設定値は他のスタイルやブラウザのUIの影響も受けるため、表示結果は単純ではありません。正確なレイアウトを目指すには、DPRや環境設定を考慮した設計が不可欠です。
この記事を書いたイチゲを応援する（質問でもokです）
Vプリカでのお支払いがおすすめです。
