px・rem・em・pt変換(CSSの単位)
CSSのピクセル(px)・rem・em・ポイント(pt)を相互に変換します。基準のフォントサイズも変更できます。
px・rem・em・pt変換について
CSSで、大きさや余白を指定する単位には、px(ピクセル)・rem・em・pt(ポイント)・vw(画面幅の割合)などがあります。デザインカンプの値を、CSSの単位に直したいときに、相互に変換できます。
remは、ルート要素(html)のフォントサイズを基準にした相対単位で、ブラウザの標準は16pxです。基準のフォントサイズを変更して、計算することもできます。ユーザーの文字サイズ設定に対応するため、remやemを使うと、アクセシビリティの面でも有利です。
こんなときに使えます
- デザインのpxの値を、remに直す
- ptで指定された印刷物の大きさを、pxで確認する
- vwを使った、画面幅に応じたサイズの目安を知る
使うときのポイント
- 1rem = 16px(ブラウザの標準設定の場合)
- emは、親要素のフォントサイズを基準にする
計算例
入力欄の初期値のまま計算すると、次の結果になります。条件は、数値が24、変換前の単位がpx、基準のフォントサイズ(1rem = ?px)が16px、画面の幅(vwの変換用)が1280pxです。数値を変えると、この結果もそれに合わせて変わります。
| px | 24 |
|---|---|
| rem / em | 1.5 |
| pt | 18 |
| vw(画面幅1280px) | 1.875 |
| 基準サイズに対する% | 150% |
使い方
- 数値と変換前の単位を選びます。
- 基準のフォントサイズ(通常は16px)を入力します。
- 各単位での値が表示されます。
計算方法・仕組み
1rem はルート要素のフォントサイズ(多くのブラウザの初期値は16px)です。1pt = 96/72 px(約1.333px)です。
知っておきたい基礎知識
CSSの長さの単位には、絶対的なpx(ピクセル)と、相対的なremやemがあります。remは、ルート要素(html)の、文字サイズを基準にした単位で、多くのブラウザの初期値は16pxなので、1remは16pxです。remを使うと、ユーザーがブラウザの文字サイズを変えたときに、レイアウト全体が、それに合わせて、拡大・縮小されます。
emは、その要素の、親要素の文字サイズを基準にする単位で、入れ子になると、倍率が、重なって、計算が複雑になりがちです。ptは、印刷で使う単位で、1pt = 約1.333pxです。アクセシビリティの面では、文字サイズに、remを使うと、拡大して読みたい人にも、やさしいデザインになります。
間違えやすいポイント
- emは、入れ子になると、倍率が重なって、意図しない大きさになる
- remの基準は、htmlの文字サイズ。変更すると、すべてのremの値に、影響する
- ptとpxは、同じ見た目の大きさとは限らない
よくある質問
- 16pxは、何remですか?
- 基準が16pxの場合、1remです。24pxなら、1.5remです。
- 基準のフォントサイズを変えるには?
- 基準のフォントサイズの欄に、値を入力すると、その値を基準に、変換します。