CSS 単位とレスポンシブサイズ コース

このコースでは、フロントエンド配信の問題としての CSS 単位を学びます。計算機演習ではありません。デザイン仕様は px で届き、コードベースは rem、em、または fluid 値を好み、レイアウトはビューポート幅、親 font-size、ブレークポイント挙動に依存します。

px、rem、em、%、vw、vh をいつ使うか、root font-size が計算値をどう変えるか、clamp() が fluid タイポグラフィとスペーシングをどう作るか、コンポーネントライブラリやデザインシステムに CSS を貼り付ける前に変換を検証する方法を学びます。

対象者

• Figma やデザイン仕様を CSS に変換するフロントエンド開発者
• rem ベースのトークンを持つコンポーネントライブラリを保守するエンジニア
• 場当たり的なメディアクエリなしにレスポンシブ font-size とスペーシングが必要なフルスタック開発者
• 「モバイルでこの rem 値がおかしく見える理由」をデバッグしたい人

学ぶこと

1. CSS 単位とは何か、ブラウザがどう計算するか
2. タイポグラフィとコンポーネント向け px、rem、em のトレードオフ
3. レイアウト文脈での vw、vh、パーセント単位
4. root font-size と px → rem 変換ワークフロー
5. fluid font-size とスペーシング向け clamp()
6. CSS を出荷する前の実践的なデバッグワークフロー

読みながら関連する CSS Unit Converter / Clamp Generator を使ってください。目的は 1 値を変換することだけでなく、本番で CSS 長さが正しい文脈を理解することです。