CSS単位コンバーター

CSS単位コンバーター - px, rem, em, % 計算機

🎨 CSS単位（px、rem、em、%、pt、vw、vh）を相互に変換します。 レスポンシブWebデザインと開発に欠かせないツールです。

CSS単位の種類

• 絶対単位: px, pt, cm, mm, in - 文脈に関係なく固定
• 相対単位: rem, em, %, vw, vh - 親要素やviewportに応じて変化
• フォント相対: rem, em, ch, ex - フォントサイズに基づく
• viewport相対: vw, vh, vmin, vmax - viewport寸法に基づく

単位の説明

• px（ピクセル）: 1px = 1デバイスピクセル。正確だがスケールしにくい。
• rem: ルート要素（html）のフォントサイズに相対。既定で 1rem = 16px。
• em: 親要素のフォントサイズに相対。ネストで倍率が重なる場合がある。
• %: 親要素のプロパティに相対。100% = 親と同等。
• pt（ポイント）: 印刷単位。1pt = 1/72インチ ≈ 1.333px。
• vw: 1vw = viewport幅の1%。100vw = 全幅。
• vh: 1vh = viewport高さの1%。100vh = 全高。

よくある変換

• 1rem = 16px（ブラウザ既定）
• 1em = 16px（親が16pxの場合）
• 100% = 親要素のサイズ
• 12pt = 16px（印刷で一般的）
• 1vw = 19.2px（viewport 1920pxの場合）

62.5%メソッド

html { font-size: 62.5%; } を設定すると 1rem = 10px になり、計算が簡単になります（例：1.6rem = 16px、2.4rem = 24px）。

アクセシビリティの考慮

• フォントにはremを使用: ユーザーのブラウザ設定を尊重
• フォントにpxは避ける: 設定に追従しにくい
• 相対単位を活用: ズーム/拡大に強い
• 複数サイズでテスト: 200%ズームや大きな文字設定で確認

レスポンシブデザイン

メディアクエリには rem を推奨：@media (min-width: 48rem) を 768px の代わりに使うと、 ユーザーのフォントサイズ設定に合わせてブレークポイントもスケールします。

💡 プロのコツ: 近年の定番は、サイズ指定の多く（フォント・余白・ブレークポイント）にrem、 ボーダーや細部にpx、レイアウトに%やviewport単位を使うこと。emはネストで倍率が増えるため余白用途は注意。