---
title: "PX・Rem計算 - pxとremを基準サイズで相互変換 | Web ToolBox"
description: ベースフォントサイズを基準に、pxとremを相互に換算できるツールです。どちらか一方を入力すると、もう片方が自動で更新されます。CSSのフォントサイズや余白をremに置き換えるときや、既存のrem値をpxで確認するときに使えます。
canonical_url: "https://web-toolbox.dev/tools/px-rem-calculator"
meta:
  author: K
  "og:description": ベースフォントサイズを基準に、pxとremを相互に換算できるツールです。どちらか一方を入力すると、もう片方が自動で更新されます。CSSのフォントサイズや余白をremに置き換えるときや、既存のrem値をpxで確認するときに使えます。
  "og:image": "https://web-toolbox.dev/og/ja/tools/px-rem-calculator-10f80904.png"
  "og:image:alt": PX・Rem計算
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "PX・Rem計算 - pxとremを基準サイズで相互変換 | Web ToolBox"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **PX・Rem計算**

pxとremを双方向に変換

**ベースフォントサイズ (px)**

**px値**

**rem値**

どちらかを編集すると、もう片方が更新されます

24 ÷ 16 = 1.5rem

## **よく使う値**

16px基準

<dl>

<dt>1px</dt>
<dd>**0.0625rem**</dd>

<dt>2px</dt>
<dd>**0.125rem**</dd>

<dt>4px</dt>
<dd>**0.25rem**</dd>

<dt>8px</dt>
<dd>**0.5rem**</dd>

<dt>10px</dt>
<dd>**0.625rem**</dd>

<dt>12px</dt>
<dd>**0.75rem**</dd>

<dt>14px</dt>
<dd>**0.875rem**</dd>

<dt>16px</dt>
<dd>**1rem**</dd>

<dt>18px</dt>
<dd>**1.125rem**</dd>

<dt>20px</dt>
<dd>**1.25rem**</dd>

<dt>24px</dt>
<dd>**1.5rem**</dd>

<dt>32px</dt>
<dd>**2rem**</dd>

<dt>40px</dt>
<dd>**2.5rem**</dd>

<dt>48px</dt>
<dd>**3rem**</dd>

<dt>64px</dt>
<dd>**4rem**</dd>

<dt>96px</dt>
<dd>**6rem**</dd>

</dl>

## PX・Rem計算ツールとは？

ベースフォントサイズを基準に、pxとremを相互に換算するツールです。`**24px**`が何remになるか、`**1.5rem**`が何pxになるかを同じ画面で確認できます。

CSSでフォントサイズや余白をremに置き換えるときや、既存のrem値をpxの感覚で確認するときに使います。

## 使い方

1. ベースフォントサイズを入力するか、よく使うサイズから選びます。
2. px値かrem値のどちらかに値を入力します。
3. もう片方の値と計算式を確認し、結果をコピーします。

ベースフォントサイズを変えると、最後に編集した値をもう片方の単位に換算し直します。

## 主な設定項目

### ベースフォントサイズ

1remの基準になる値です。ブラウザの既定は`**16px**`です。プロジェクトの`**html**`でフォントサイズを変えている場合は、その値に合わせます。

### px値とrem値

どちらかを編集すると、もう片方が自動で更新されます。ベースが`**16px**`のとき、`**24px**`と入力すると`**1.5rem**`が表示されます。

## よく使う値

px値を基準にした一覧です。ベースフォントサイズを変えると、rem値が更新されます。各行のコピーアイコンでrem値をコピーできます。

## 活用シーン

- デザインデータのpx値をCSSのremに置き換えたいとき
- 既存CSSのrem値が実寸で何pxになるか確認したいとき
- ルートフォントサイズを変えたときの各サイズの変化を確認したいとき

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/px-rem-calculator#webpage","@type":"WebPage","description":"ベースフォントサイズを基準に、pxとremを相互に換算できるツールです。どちらか一方を入力すると、もう片方が自動で更新されます。CSSのフォントサイズや余白をremに置き換えるときや、既存のrem値をpxで確認するときに使えます。","name":"PX・Rem計算 - pxとremを基準サイズで相互変換","url":"https://web-toolbox.dev/tools/px-rem-calculator","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/px-rem-calculator"]}]},{"@id":"https://web-toolbox.dev/tools/px-rem-calculator#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"ベースフォントサイズを基準に、pxとremを相互に換算できるツールです。どちらか一方を入力すると、もう片方が自動で更新されます。CSSのフォントサイズや余白をremに置き換えるときや、既存のrem値をpxで確認するときに使えます。","name":"PX・Rem計算 - pxとremを基準サイズで相互変換","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.
