px rem 変換|px・rem・pt・em・mm
最終更新:
px
remはこのサイズを基準に測ります。ここではemと%もこのサイズが基準ですが、CSSでは親要素に従うため、親要素がフォントサイズを変えていない場合に限ってremと一致します。
計算式
1 px = 0.0625 remすべての変換結果
px 1
rem 0.0625
em 0.0625
% 6.25
pt 0.75
pc 0.0625
in 0.0104167
cm 0.0264583
mm 0.264583
早見表:ピクセル → rem(ルートem)
| 値 (px) | 結果 (rem) |
|---|---|
| 1 px | 0.0625 rem |
| 8 px | 0.5 rem |
| 10 px | 0.625 rem |
| 12 px | 0.75 rem |
| 14 px | 0.875 rem |
| 16 px | 1 rem |
| 18 px | 1.125 rem |
| 20 px | 1.25 rem |
| 24 px | 1.5 rem |
| 32 px | 2 rem |
| 48 px | 3 rem |
| 64 px | 4 rem |
px、rem、ptについて
CSSでは1インチが96 pxと定められているため、1/72インチである1 ptは1.333 px、1 mmは3.78 pxです。remとemは相対単位です。1 remはルート要素のフォントサイズで、訪問者が変更しない限り主要なブラウザはどれも16 pxなので、24 pxは1.5 remです。スタイルシートがルートのフォントサイズを別の値にしている場合は、入力欄の上にある基準に入力してください。emは親要素のフォントサイズに従うため、親要素がそれを変えていない場合に限ってremと同じになります。
よく使う文字と要素のサイズ
基準が標準の 16 px の場合の値です。CSSでは 1 インチが 96 px と定められているため、pt と mm の列は基準を変えても変わりません。基準によって変わるのは rem の列だけです。
| サイズ | rem | pt | mm |
|---|---|---|---|
| 10 pt の文字(脚注) | 0.8333 | 10 | 3.528 |
| ブラウザの標準の文字サイズ | 1 | 12 | 4.233 |
| ワープロの 12 pt の文字 | 1 | 12 | 4.233 |
| h2 見出しの標準サイズ | 1.5 | 18 | 6.35 |
| WCAG 2.2(2.5.8)での最小ターゲットサイズ | 1.5 | 18 | 6.35 |
| h1 見出しの標準サイズ | 2 | 24 | 8.467 |
| 1センチメートル | 2.362 | 28.35 | 10 |
| 1インチ | 6 | 72 | 25.4 |
ポイントとピクセルの歴史
活字の大きさは、画面が登場するずっと前からポイントで測られていました。活字を鋳造する業者には、きれいに揃う活字を作るための共通の単位が必要だったからです。コンピューターの時代になって、ポイントは1/72インチに落ち着きました。
- ピエール=シモン・フルニエは、活字の大きさをタイポグラフィックポイントで測った表を刊行しました。その目盛りはインチを12ラインに、各ラインを6ポイントに分けています。
- 米国活字鋳造業者協会が、活字のボディの大きさにポイント制を採用しました。この制度ではノンパレルが6ポイント、パイカが12ポイントです。
- AdobeがPostScriptを発表しました。ページ上の長さの単位は1/72インチで、Adobeの言葉を借りれば、印刷で使われるポイントとほぼ同じです。
- CSS 2.1がW3C勧告になりました。1インチを96 pxかつ72 ptと定めているため、1 pxは0.75 ptです。また、ピクセルは腕を伸ばした距離から見た96 dpiの画面の1ドットを基準としています。
出典: