フォントサイズ設定
画面サイズ設定
px
px
DPI設定
よく使う値
単位変換表
| px | pt | rem | em | vw | vh |
|---|
CSS単位について
絶対単位
- px (ピクセル) - 画面の物理的なピクセル。最も直感的で制御しやすい
- pt (ポイント) - 印刷で使用される単位。1pt = 1/72インチ
- in (インチ) - 1インチ = 2.54cm = 96px (標準DPI)
相対単位
- rem - ルート要素(html)のフォントサイズ基準。レスポンシブに最適
- em - 親要素のフォントサイズ基準。ネストで倍率が変わる
- vw/vh - ビューポートの幅/高さの1%。画面サイズに完全連動
- % (パーセント) - 親要素のサイズに対する割合
使い分けのコツ
レスポンシブデザイン
rem・vw・vhを使用。画面サイズに応じて自動調整
精密なレイアウト
pxを使用。ピクセル単位で正確に制御
印刷用途
pt・inを使用。印刷時の実寸が重要
コンポーネント内
emを使用。親要素に応じてスケール
完全ローカル処理
すべての計算はブラウザ内で実行されます。データがサーバーに送信されることはありません。