📏 1つのツールキットで
あらゆるデザイン作業を

PXからREMへの変換

PXとREMを即座に双方向変換。基準フォントサイズ調整と変換テーブル付き。アクセシブルでスケーラブルなCSSに必須。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📏 PXからREMへの変換

PXからREMへの変換ガイド

REM(root em)は、ドキュメントのルートフォントサイズ(通常16px)に相対するCSS単位です。rem値はユーザーのブラウザフォント設定に応じてスケールするため、固定のピクセル値とは異なり、remで構築したデザインはあらゆるデバイスでアクセシビリティと比率を保てます。

ピクセル値を入力して対応するrem値を確認するか、rem値を入力して逆変換します。プロジェクトに合わせて基準フォントサイズを調整できます(一部のデザインシステムは10pxや20pxのルートを使用)。変換テーブルは一般的なサイズを網羅し、ビジュアル比較は同じルートサイズで両単位が同一に描画されることを示します。

Pro Tips

Frequently Asked Questions

Q: REMとEMの違いは何ですか?
REMとEMの違いは何ですか?remは常にルート(html)のフォントサイズに相対します。emは親要素のフォントサイズに相対するため、ネストした要素ではemが累積し、remは一貫性を保ちます。
Q: なぜPXではなくREMを使うのですか?
なぜPXではなくREMを使うのですか?REMはユーザーのアクセシビリティ設定に応じてスケールします。ブラウザのフォントサイズを大きくしたユーザーには、すべてのテキストが大きく表示されます。PXは固定のままで、レイアウトやアクセシビリティを壊す可能性があります。現代のベストプラクティスは、タイポグラフィとスペーシングにremを使用することです。
Q: デフォルトの基準フォントサイズは?
デフォルトの基準フォントサイズは?すべての主要ブラウザは16px = 1remがデフォルトです。つまり32px = 2rem、8px = 0.5rem、24px = 1.5remとなります。
Q: メディアクエリにREMを使えますか?
メディアクエリにREMを使えますか?はい。remで書かれたメディアクエリはビューポート幅だけでなくユーザーのフォント設定にも応答します。pxベースのブレークポイントより細やかなアクセシビリティ改善です。
Q: すべての値を手動で変換する必要がありますか?
すべての値を手動で変換する必要がありますか?いいえ。現代のビルドツール(PostCSS、Tailwind)が自動で変換します。この計算機は、スポット変換や手書きCSSの確認に使ってください。

日本の伝統色・和色

和色は平安時代の襲(かさね)の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。

山吹色 #F8B500

山吹の花に由来する黄金色。JIS慣用色名

撫子色 #EEA9A9

ナデシコの花の淡いピンク。平安時代から愛される

浅葱色 #00A3AF

新選組の羽織で有名な青緑色

茜色 #B7282E

茜草の根から染めた深い赤。夕焼けの色

若草色 #C3D825

春の新芽を思わせる明るい黄緑

瑠璃色 #1E50A2

仏教の七宝「瑠璃」に由来する深い青

桜色 #FEF4F4

桜の花びらのようなごく淡いピンク

藤色 #BBBCDE

藤の花の淡い紫。春の代表色

常磐色 #007B43

常緑樹の深い緑。永遠を象徴する

小豆色 #96514D

小豆に由来する渋い赤褐色

Q: 和色とは何ですか?
和色とは何ですか?和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか?
山吹色はどんな色ですか?山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。