CSS Units Demo
CSS の単位 (px / rem / em / vw / dvh / cqw / % / fr) を視覚的に確認するデモ
CSS 単位の概要
① 絶対長（px）：意味→CSSピクセル。使いどころ→ボーダーやアイコン等の固定寸法。注意点→DPRにより物理ピクセルと異なる。
② フォント基準（rem / em）：意味→remはroot、emは親要素の文字サイズ。使いどころ→タイポグラフィ／余白。注意点→emはネストで累積。
③ ビューポート（vw / vh / dvh）：意味→画面幅・高さの割合。使いどころ→フルスクリーンやレスポンシブ高さ。注意点→モバイルのアドレスバーで挙動が変わるためdvh推奨。
④ コンテナ基準（cqw / cqh）：意味→親コンテナの寸法に依存。使いどころ→コンポーネント単位のレイアウト。注意点→親に `container-type` が必要。
⑤ 比率・割合（% / fr）：意味→親要素や残りスペースに対する比率。使いどころ→レスポンシブ幅・CSS Grid。注意点→%はプロパティにより基準が異なる（例：padding は幅基準）。
単位と尺度のインタラクティブ設定
16px
400px
① 絶対長 — px
width: 300px
width: 300px; border-radius: 8px;
② フォント基準 — rem / em
font-size: 2rem (現在: 16px の 2rem)
padding: 1em （親の font-size に依存）
html { font-size: 16px; }
h1 { font-size: 2rem; }
.box { padding: 1em; }③ ビューポート — vw / dvh
width: 60vw / height: 8dvh
width: 60vw; min-height: 8dvh; /* モバイルでは dvh を推奨 */
④ コンテナ基準 — cqw
width: 50cqw (親コンテナの 50%)
.container { container-type: inline-size; }
.box { width: 50cqw; }⑤ 比率・割合 — % / fr
1fr
2fr
width: 60%
grid-template-columns: 1fr 2fr;
.element { width: 60%; }まとめ
• px: 最小単位 / ボーダーやアイコンなど固定要素に最適
• rem: 設計単位。レイアウトとタイポグラフィの基準
• dvh/vw: 画面単位。フルスクリーンや視差に便利
• cqw: コンポーネント指向の内部レイアウト（container queries）
• % / fr: 親に対する比率と残りスペース分配