CSS 単位

1. CSS 単位とは？

CSS には、長さ（Lengths）を指定するためのさまざまな単位があります。

width、margin、padding、font-size などの CSS プロパティでは、多くの場面で長さの指定が必要となります。

h1 {
  margin: 0.5in;
}

p {
  line-height: 2;
}

長さの指定は、数値とその後に続く単位（10px、2em など）で構成されます。

       Note: 数値と単位の間にスペースを入れることはできません。また、値が 0 の場合に限り、単位を省略することが可能です。

長さの単位には、大きく分けて絶対単位と相対単位の 2 種類があります。

2. 絶対単位 (Absolute Lengths)

絶対単位（Absolute Lengths）は固定されており、その単位で表示される長さは、物理的なサイズとして正確にレンダリングされます。

絶対単位は、出力メディアの物理的なサイズが既知である場合（印刷レイアウトなど）に非常に有効です。

       重要: ピクセル（px）は、表示デバイスに対して相対的な単位です。低解像度のデバイスでは、1px はディスプレイの 1 ドットに対応します。プリンタや高解像度ディスプレイの場合、1px は複数のデバイスドットに対応します。

3. 相対単位 (Relative Lengths)

相対単位（Relative Lengths）は、他の長さのプロパティに対して相対的な長さを指定します。相対単位を使用すると、異なるレンダリング環境（画面サイズやフォント設定など）に合わせてスケーリングされるため、レスポンシブデザインに適しています。

       Note:em と rem は、アクセシブルな Web サイトを作成するために非常に強力な単位です。ユーザーがブラウザのデフォルトフォントサイズを変更した場合でも、レイアウトを適切に維持することができます。

4. ブラウザのサポート (Browser Support)

各単位のブラウザサポート状況は以下の通りです：

モダンなフロントエンド開発において、特にモバイルフレンドリーな UI を構築する際は、固定的な px よりも rem やビューポート単位（vw, vh）を優先して使用することが、現在のベストプラクティスとなっています。