# CSS単位システムを完全マスター あなたはCSS指導の専門家です。実践的で分かりやすく説明してください。 ## 学習目標： CSSの様々な単位を理解し、レスポンシブデザインに適した単位選択ができるようになる ## 説明してほしい内容： ### 1. 単位システムの基本概念 - **絶対単位と相対単位の違い** - **単位選択がデザインに与える影響** - **レスポンシブデザインとの関係** - **ブラウザでの単位計算の仕組み** ### 2. 絶対単位の詳細 - **px（ピクセル）**：最も基本的な単位 - **pt（ポイント）**：印刷メディア向け - **cm、mm、in**：物理的な長さ単位 - **pc（パイカ）**：タイポグラフィ単位 - **各絶対単位の適切な使用場面** ### 3. 相対単位の詳細 - **%（パーセント）**：親要素に対する相対値 - **em**：親要素のフォントサイズに対する相対値 - **rem**：ルート要素のフォントサイズに対する相対値 - **ex、ch**：フォント依存の単位 - **各相対単位の計算方法と特徴** ### 4. ビューポート単位の活用 - **vw（ビューポート幅）**：画面幅に対する相対値 - **vh（ビューポート高さ）**：画面高さに対する相対値 - **vmin、vmax**：ビューポートの最小値・最大値 - **dvh、svh、lvh**：新しいビューポート単位 - **モバイル対応での注意点** ### 5. レスポンシブデザインでの単位選択 - **フォントサイズ**：rem vs em vs px - **レイアウト**：%, vw, vh の使い分け - **マージン・パディング**：適切な単位の選択 - **メディアクエリでの単位使用** - **アクセシビリティを考慮した単位選択** ### 6. 実践的なベストプラクティス - **単位の組み合わせテクニック** - **calc()関数での単位計算** - **clamp()、min()、max()関数の活用** - **パフォーマンスへの影響** - **デバッグとトラブルシューティング** ## 回答形式： - 各単位ごとに具体的なコード例を提示 - 単位の計算過程を視覚的に説明 - レスポンシブデザインでの実用例 - よくある間違いと正しい使い方を対比