調べて分かる道具箱

画面ものさし

手元にある硬貨をえらんで、画面に置いてください

手元にある硬貨
この画面の 1mm
3.78 pxまだ合わせていません。96dpi の基準ピクセルによる仮の値です
基準ピクセルとの比
1.00 倍1.00 なら仕様（96dpi）どおり。0.50 なら、この画面の 1px は仕様の半分の大きさ

覚えるのは、この端末のブラウザの中だけです（どこにも送りません）。ブラウザによっては数日で消えます。

定規

まだ硬貨で合わせていないので、この定規は仮の長さです。上で丸を合わせると実寸になります。

定規を出せる幅がありません。

単位は cm（長い線）・5mm（中）・1mm（短い線）。画面の端まで1cm きざみで入るぶんだけを出しています。

やってみる

やってみる

1問目 / 全4問

1円玉の直径は何 mm ですか？

よくある質問

なぜ合わせないと実寸にならないのですか

CSS の 1px が長さではなく「見える角度」で決まっているからです。W3C の仕様（CSS Values 4）は、96dpi の画面を 28 インチ（約 71.1cm）離れて見たときの 1 粒の視角 0.0213 度を 1px と決めています。実物の長さはそこから決まらないので、スマホとテレビでは同じ 100px でも長さが違います。画面だけでは実寸を知りようがなく、実物を当てるしかありません。

なぜカードではなく硬貨なのですか

子どもが持っているからです。上位の定規サイトはクレジットカードや銀行カードの幅（85.60mm）で合わせる作りですが、小学生は1枚も持っていません。硬貨なら、ポケットの中の1円玉で合います。直径は財務省が公表している確定値なので、定規もカードの知識も要りません。

1円玉が無いときは、ほかの硬貨でもよいですか

はい。1円玉 20.0mm・5円玉 22.0mm・10円玉 23.5mm・50円玉 21.0mm・100円玉 22.6mm・500円玉 26.5mm のどれでも合わせられます。値はどれも財務省「通常貨幣一覧」の公表値です。大きい硬貨のほうが、合わせるときの誤差が小さくなります。

どれくらい正確ですか

丸を 1px きざみで合わせるので、誤差は 1px ぶん、ふつうのスマホで 0.1〜0.3mm ほどです。硬貨の縁を目で合わせる誤差のほうが大きいので、工作や宿題の目安には使えますが、精密な測定には使わないでください。合わせた値は画面に「1mm ＝ 何 px」として出しているので、確かめられます。

画面を拡大したら、定規はどうなりますか

ずれます。ブラウザの拡大は CSS ピクセルの大きさを変えるので、合わせたあとに拡大・縮小すると、丸も定規も一緒に伸び縮みします。拡大率を変えたら、もう一度硬貨で合わせてください。

「覚える」を押すと、何がどこに残りますか

選んだ硬貨と、合わせた丸の直径（px）の2つだけを、このブラウザの localStorage に書きます。どこにも送りません。ブラウザによっては数日で消えます（Safari は 7 日で消すことがあります）。「忘れる」で消せます。

500円玉は新しいのと古いので大きさが違いますか

直径は同じ 26.5mm です。財務省「通常貨幣一覧」では、令和3年からのバイカラー・クラッド貨幣、平成12年からのニッケル黄銅貨幣、昭和57年からの白銅貨幣が、どれも直径 26.5mm と書かれています（量目だけ 7.10g・7.00g・7.20g と違います）。どれを置いても合います。

画面の大きさ（devicePixelRatio）のページとは何が違うのですか

あちらは、ブラウザが答える数（CSS ピクセルと物理ピクセルの比）を読むページです。こちらは、その数では分からない「実物の長さ」を、実物を当てて決めるページです。ブラウザは 1px が何 mm かを知りません。だから聞くのではなく、測ります。

画面に1円玉を置いて、丸を縁に合わせてください。 それだけで、この画面の実寸の定規になります。カードは要りません。 1円玉は直径ちょうど 20.0mm（財務省の公表値）なので、それを物差しにします。

画面は、自分が何センチなのかを知らない

紙の定規は、目盛りそのものが長さです。画面はそうではありません。ブラウザが扱う 1px は、 画面の粒 1 つのことでも、決まった長さのことでもなく、「見える角度」で決められています。W3C の仕様（CSS Values and Units Module Level 4）は、これを参照ピクセル（reference pixel）と呼び、96dpi の画面を腕の長さ（28 インチ、約 71.1cm）だけ離れて見たときの 粒 1 つの視角、約 0.0213 度と定めています。

角度で決めているので、遠くから見るテレビの 1px は大きくてよく、手元で見るスマホの 1px は小さくてよい、ということになります。つまり同じ 100px でも、実物の長さは端末ごとに違うのが仕様どおりの姿です。 ブラウザに「1px は何 mm ですか」と聞いても、答えは持っていません。

だから、実物を当てるしかない

画面だけで実寸を出すことはできません。できるのは、長さの分かっている実物を画面に当てて、「この画面では 1mm が何 px か」を測ることだけです。上位の定規サイトがクレジットカードの幅で合わせているのは、この理由です。 カードの幅（85.60mm）は国際規格で決まっているので、物差しになります。

ただし子どもはカードを持っていません。持っているのは硬貨です。1円玉の直径は財務省の 公表値で 20.0mm ちょうど、量目も 1.00g ちょうどなので、 物差しにするのに都合がよい硬貨です。5枚ならべると 10cm、はかりに 10 枚のせると 10g になります。

硬貨の直径は、財務省が公表している

このページの値はすべて財務省「通常貨幣一覧」から取っています。現在発行されている6種類は、1円玉が 20.0mm、5円玉が 22.0mm、10円玉が 23.5mm、50円玉が 21.0mm、100円玉が 22.6mm、500円玉が 26.5mm です。 硬貨の絵は描いていません。通貨の意匠を勝手に複製しないためで、その直径の丸だけを出しています。

500円玉は令和3年から新しい貨幣（バイカラー・クラッド）に変わりましたが、直径は前の 26.5mm のままです。同じ一覧に、平成12年からのニッケル黄銅貨幣も昭和57年からの白銅貨幣も 26.5mm と書かれています。どの 500円玉を置いても合います。

「基準ピクセルとの比」は、この画面の粒の細かさを表している

合わせたあとに出る「基準ピクセルとの比」は、仕様どおり（96dpi・1mm ＝ 約 3.78px）と比べて、この画面の 1px が何倍の大きさかです。1.00 なら仕様どおり、0.50 なら 1px が半分の大きさ、つまり粒の細かい画面でブラウザが CSS ピクセルを小さく描いている、という読みになります。

粒の細かさそのものは、ブラウザが devicePixelRatio という数で答えてくれます。それを読む道具は画面の大きさとピクセル比にあります。あちらが「ブラウザに聞く」、 こちらが「実物で測る」で、役割を分けています。

出典