px・pt・rem・em をワンタッチで相互変換
remは「ルートフォントサイズ」、emは「親要素のフォントサイズ」を基準に換算します。1pt=1.3333px(96dpi)。
CSSやデザインで使う文字サイズの単位「px・pt・rem・em」を相互に換算するツールです。1つの値を入力すれば、残り3つの単位に変換した結果が一度に分かります。Webサイトの実装と印刷用の指定値をすり合わせたいときに便利です。
すべての単位はいったんpxに直してから、目的の単位へ変換します。
Q. remとemの違いは何ですか?
A. remは常にルート(html要素)のフォントサイズが基準なので値が安定します。emは親要素のフォントサイズが基準のため、入れ子になると親のサイズに掛け合わさって変化します。ページ全体で統一したいならrem、部品単位で相対指定したいならemが向いています。
Q. 1remは何pxですか?
A. ルートのフォントサイズ次第です。多くのブラウザの既定は16pxなので、その場合は1rem = 16pxです。htmlにfont-size:62.5%を指定して10px基準にすると、1rem = 10pxとなり計算が楽になります。
Q. pxとptはなぜ値がずれるのですか?
A. ptは印刷由来の単位で1/72インチ、CSSのpxは1/96インチを基準とするためです。この96対72の比率により、ptをpxに直すと数値が大きくなります(1pt ≒ 1.333px)。