CSS px ↔ rem変換
CSS単位のpxとremを相互に変換します。
CSS単位変換
ピクセル（px）をrem単位に変換します。
CSS単位の説明
px (ピクセル)
画面上の1ピクセルを表す絶対単位です。固定サイズであり、レスポンシブデザインには限界があります。
rem (ルートEM)
ルート要素（html）のフォントサイズに基づく相対単位です。アクセシビリティとレスポンシブデザインに有利です。
変換式
px → rem: px ÷ 基準フォントサイズ
rem → px: rem × 基準フォントサイズ
使用推奨
- • フォントサイズ: rem推奨
- • 間隔（margin, padding）: rem推奨
- • ボーダー: px使用可能
- • メディアクエリ: rem推奨
一般的な変換値
px
rem
8px
0.5rem
12px
0.75rem
14px
0.875rem
16px
1rem
18px
1.125rem
20px
1.25rem
24px
1.5rem
32px
2rem
CSS単位完全ガイド
Web開発で適切なCSS単位を選択することは、ユーザーエクスペリエンスとアクセシビリティに大きく影響します。pxとremの違い、そして適切な状況での使用方法を学びましょう。
ピクセル (px) 単位詳細ガイド
📐 特徴
- • 画面ピクセルと1対1で対応する絶対単位
- • すべてのブラウザで一貫したサイズ
- • 正確なレイアウト制御が可能
- • ユーザー設定の影響を受けない
✅ 推奨される使用例
- • ボーダーの太さ (1px, 2px)
- • シャドウのオフセット
- • アイコンサイズ (16px, 24px)
- • 細かい間隔調整
⚠️ 注意事項
- • ユーザーのフォントサイズ設定を無視する
- • アクセシビリティの問題を引き起こす可能性がある
- • レスポンシブデザインには限界がある
rem単位詳細ガイド
📐 特徴
- • ルート要素（html）のフォントサイズに基づく
- • ユーザー設定を反映する
- • 一貫した比率を維持する
- • アクセシビリティに優しい
✅ 推奨される使用例
- • フォントサイズ設定
- • 間隔（margin, padding）
- • コンテナサイズ
- • メディアクエリのブレークポイント
💡 利点
- • 拡大縮小時に比率を維持する
- • アクセシビリティを向上させる
- • メンテナンスが容易
実践的な応用ガイド
🎯 単位別使用戦略
タイポグラフィ
フォントサイズと行間にはremを使用 rem
レイアウト
間隔とコンテナにはremを使用 rem
詳細
ボーダーとシャドウにはpxを使用 px
📱 レスポンシブデザインのヒント
モバイルファーストアプローチ
基準フォントサイズを16pxに設定し、rem単位で拡大縮小する
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }メディアクエリの使用
remベースのブレークポイントで一貫性を維持する
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ アクセシビリティに関する考慮事項
✅ 推奨される実践
- • フォントサイズをrem単位で設定する
- • 最小フォントサイズを16pxに維持する
- • 十分な行間（1.5以上）
- • 最小タッチターゲットを44pxにする
❌ 避けるべきこと
- • フォントサイズに固定px値を使用する
- • 12px以下の小さなテキスト
- • 固定されたコンテナ幅
- • 行間が1.0以下のもの
🔧 ブラウザサポートと互換性
px単位
すべてのブラウザで完全にサポートされています。IE6以降で利用可能です。
rem単位
IE9以降およびモダンブラウザで完全にサポートされています。IE8以前ではフォールバックが必要です。
IE8サポートの場合: まずpx値を宣言し、次にrem値をフォールバックとして追加します
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */