Windows で画面のピクセルを測る方法

短い答え： Windows には画面定規がありません。DevTools はブラウザー内で、画像エディターは自分のキャンバス内で測るだけ——それ以外のものには画面ルーラーのような無料ツールを使いましょう：ゼロの端を合わせ、マーカーをドラッグし、距離をピクセルで読み、ウィンドウをゴーストのように測定対象の上に重ねます。

画面で測りたくなる場面

CSS を書くとき：そのサイドバーは 320 px か 300 px か？推測せずに測り、ブレークポイントを正しく設定。
アクセシビリティ：タッチ領域は少なくとも 44×44 px に——定規なら両方の寸法を数秒で確認できます。
デザインレビュー：モックアップの余白をライブページと、デザイナーが議論するピクセル単位で比較。
プレゼンと印刷：プロジェクターの解像度で画像が使える領域を確認。
結末のある好奇心：「このウィンドウは実際どれくらいの幅？」——それ用のスクリプトを書く前に。

方法 1：ブラウザーのツール（ブラウザー内のみ）

F12 → Inspect → 任意の要素にカーソルを合わせるとボックスモデルが見えます。DOM には完璧——動画プレーヤー、デスクトップアプリ、ビューアーの中のスクリーンショット、自分のウィンドウには役立ちません。

方法 2：画面ルーラー——どこでも何でも測れる

無料ダウンロード — ScreenRuler-Setup.exe

ゼロを合わせる。 測定を始める位置に、定規の左端（水平モード）または上端（垂直モード）を置きます。
マーカー線をドラッグして反対側へ。矢印キーで仕上げ——1 回で 1 px、Shift で ×10。「マーカーをリセット」でゼロに戻ります。
ゴーストにする：不透明度を 40 % にし、「常に最前面に表示」をオンにすると、半透明の定規が目的の要素の真上に来ます。大きな数値を読み取ります——≈ 482 px。

精度についての補足

表示スケーリングが 100 % のとき、定規の 1 単位は 1 画面ピクセル——CSS が話す px と同じです。Windows のスケーリングが高い場合、測定値を含め画面のすべてがスケーリングされたピクセルになります。スケーリングされていない数値が必要なら 100 % で比較してください。ブラウザーのズームは測る対象を変えてしまいます：100 % ズームで測りましょう。

よくある質問

斜めの距離は測れますか？

いいえ——外接する四角形を測ってください（水平モードで幅、垂直で高さ）：レイアウトシステムが使うのは結局それです。

どんなモニターやスケーリングでも動きますか？

ウィンドウはどのモニターにも移動でき、その画面のピクセルを測ります。スケーリングは上記のとおりです。

「スクリーンショット + エディター」との違いは？

速さと正確さ：撮影の手間もズームの誤差もなく、今この瞬間に描画されている生きた画面をそのまま測れます。