24 pxをremに換算
- 値
- 24
- 変換元
- ピクセル（px）
- 変換先
- rem（ルートのフォントサイズ）
- ルートのフォントサイズ（rem用）
- 16 px
- 変換後の値
- 1.5 rem
- CSS表記
- 1.5rem
- ピクセルで表す
- 24 px
照合元：計算例の検算： CSS Values 3 §6.1: 1rem = ルートのフォントサイズ (16 px ブラウザーの既定値); 24 / 16 = 1.5
CSS 単位換算（px から rem、em、pt）
ルート要素と親要素のフォントサイズ、および DPI を使って px を rem、em、pt、パイカ、インチ、mm に換算します。CSS では 1 in = 96 px = 72 pt と定義されています。
変換後の値
rem
変換後の値: 1.5 rem
- CSS表記
- 1.5rem
- ピクセルで表す
- 24px
ルートのフォントサイズが16 px、1インチあたり96ピクセルの場合、24pxは1.5remです。
ピクセル数とフォントサイズの比較
24pxを各単位で表示
| 単位 | 値 | 定義 |
|---|---|---|
| ピクセル（px） | 24px | 1 px |
| ポイント（pt） | 18pt | 1 pt = 1/72 in |
| パイカ（pc） | 1.5pc | 1 pc = 12 pt = 1/6 in |
| インチ (in) | 0.25in | 1 in = DPI px |
| センチメートル (cm) | 0.635cm | 1 cm = 1/2.54 in |
| ミリメートル (mm) | 6.35mm | 1 mm = 1/25.4 in |
| 四分の一ミリメートル（Q） | 25.4Q | 1 Q = 0.25 mm |
| em（親要素のフォントサイズ） | 1.5em | 1 em = parent font size |
| rem（ルートのフォントサイズ） | 1.5rem | 1 rem = root font size |
| 親要素のフォントサイズに対する割合（%） | 150% | 100% = parent font size |
計算方法 S
pxあたりのピクセル数
1 px
ピクセル単位の値
remあたりのピクセル数で割る
1 rem = root font size
CSS 単位換算（px から rem、em、pt）について
CSSの長さはピクセルを介して換算します。絶対単位は1 in = 2.54 cm = 96 px = 72 pt = 6 pcで、1 Qは四分の一ミリメートルです。フォント相対単位はページに依存し、1 remはルートのフォントサイズ、font-sizeに使う1 em（または100%）は親のフォントサイズです。まずpxに直し、換算先単位あたりのpx数で割ります。
フロントエンド開発ではデザインのpxをremに直し、利用者のブラウザーのフォント設定に合わせます。既定のルート16 pxなら24 pxは1.5 remです。印刷ではPPI欄を使い、300 DPIで10 mmのロゴには約118ピクセルが必要です。 文字の追従には、ルートのフォントサイズが読み手の設定を尊重している必要があります。
CSSのインチは、画面で実測するインチと一致するとは限りません。CSSでは一インチあたり96 pxで、基準ピクセルの視角は約0.0213°です。実装は絶対単位を物理測定値またはピクセルに対応付けられ、機器の対応付け、視距離、印刷の拡大縮小によって定規との一致が変わります。
式のxₛとxₜは換算元・換算先の値、pₛとpₜは各単位あたりのピクセル数です。入力したフォントサイズとピクセル密度を使って係数を求めます。
フォントの基準を指定して換算する
値と単位に加え、rem用のルートフォントサイズ、emと%用の親フォントサイズを指定します。ルートが 16 px なら 24 px = 1.5 rem、ルートが 20 px なら 24 px = 1.2 rem。同じpx値でも基準が変わればremの数値は変わります。
| 値 | 元の単位 | 換算先 | 計算の条件 | 換算値 |
|---|---|---|---|---|
| 24 | px | rem | ルート 16 px | 1.5 |
| 24 | px | rem | ルート 20 px | 1.2 |
| 12 | pt | px | 96 ピクセル/in | 16 |
| 1 | pc | pt | 96 ピクセル/in | 12 |
| 100 | % | em | 親フォント 16 px | 1 |
| 10 | mm | px | 300 ピクセル/in | 118.110236 |
CSSピクセルと物理ピクセルを区別する
CSSの絶対長さは 1 in = 96 px = 72 pt です。このツールで密度を96以外に変えるモードは、その密度の物理ピクセル数を数えるものです。例えば 10 mm × 300 ÷ 25.4 ≈ 118.110236 px は物理ピクセルの計算で、ブラウザーのCSS比率を変更するものではありません。
emと%にはプロパティの文脈がある
この計算のemと%はfont-sizeを指定する際の親フォントサイズを基準にします。CSSのあらゆるプロパティで%が同じ基準を使うわけではなく、emも使用場所によって現在の要素を参照します。ズームや画面の機器ピクセル比だけから実測の長さを決めないでください。W3C CSS Values and Unitsで定義を確認できます。
計算例
12 ptをpxに換算
- 値
- 12
- 変換元
- ポイント（pt）
- 変換先
- ピクセル（px）
- ルートのフォントサイズ（rem用）
- 16 px
- 変換後の値
- 16 px
- CSS表記
- 16px
照合元：計算例の検算： CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
1インチをCSSピクセルで表す
- 値
- 1
- 変換元
- インチ (in)
- 変換先
- ピクセル（px）
- ルートのフォントサイズ（rem用）
- 16 px
- 変換後の値
- 96 px
照合元：計算例の検算： CSS Values 3 §6.2: 1in = 96px
1.5 remをpxに換算
- 値
- 1.5
- 変換元
- rem（ルートのフォントサイズ）
- 変換先
- ピクセル（px）
- ルートのフォントサイズ（rem用）
- 16 px
- 変換後の値
- 24 px
照合元：計算例の検算： 1 rem = ルートのフォントサイズ (16 px); 1.5 × 16
よくある質問
1 remは何ピクセル？
既定では16ピクセルです。remはルートhtml要素のフォントサイズで、主要ブラウザーは、利用者やhtml { font-size }で変更しない限り16 pxです。この既定値でhtml { font-size: 62.5% }にすると1 rem = 10 pxです。remはW3C CSS Values and Units仕様の定義ですが、16 pxはブラウザーの既定値であり仕様の一部ではありません。
pxをptに換算するには？
pxに0.75を掛けます。ptからpxには4/3（約1.333）を掛けます。W3C CSSの1 in = 96 px = 72 ptから1 px = 72/96 ptとなります。16 pxの本文は12 pt、ワープロの11 ptは約14.67 pxです。
emとremの違いは？
remは常にルート要素のフォントサイズ、emは現在の要素のフォントサイズを参照します。ただしfont-size自身に使うemは親のフォントサイズです。入れ子では、1.2emのリスト内に1.2emのリストを置くと両リストの指定を適用する前の基準フォントサイズの1.44倍になります。ルート16 pxなら、1.2remは深さによらず19.2 pxです。
フォントサイズにはpxとremのどちらを使う？
文字を読み手のブラウザーのフォント設定に従わせるにはremを使い、ルートのフォントサイズもその設定を尊重させます。ページ拡大はpxとremの両方を拡大し、rem・em・百分率はルートや親の条件を通じて設定に追従できます。WCAG 2.1の達成基準1.4.4（AA）は、内容や機能を失わずに200%へ拡大できることを求めます。pxでもページ拡大で満たせます。remもルートの条件が許せば設定に追従します。
CSSのインチは実際のインチと同じ？
CSSのインチは画面上の実測インチと一致するとは限りません。CSSでは1 in = 96 pxです。W3Cの基準ピクセルは、96 DPIの画面を28 in離れて見た一画素、視角約0.0213°です。機器の対応付けや視距離が変わるため、96 pxの箱は電話で実際の1インチより小さくなることがあります。実寸印刷では1 inは25.4 mmに対応しますが、拡大縮小や校正も実際の長さに影響します。
この計算機について
出典
出典と照合済み
この計算機には、独立した出典の解答を使った計算例が 7 件あります。テストに組み込まれており、ここでも実行できます。