CSS
CSS units are used to define the size and position of elements, and they are divided into **absolute units**, which have fixed values, and **relative units**, which change depending on other elements or the screen size.
CSS units
CSSの単位には、要素のサイズや位置を指定するために使われる様々な種類があります。大きく分けて、絶対単位と相対単位の2つがあります。
絶対単位
絶対単位は、固定されたサイズを表し、通常は物理的な長さに基づいています。画面の解像度やデバイスの大きさに関係なく、常に同じサイズになります。
- px (ピクセル)
- 画面上の1ピクセルに相当します。ウェブデザインで最もよく使われる単位です。
- cm (センチメートル), mm (ミリメートル)
- 印刷のように物理的な長さが重要な場合に使われることがありますが、Webデザインではあまり一般的ではありません。
- in (インチ)
- 物理的なインチ単位での指定。
- pt (ポイント), pc (パイカ)
- 印刷のための単位で、ポイントは1インチの1/72、パイカは1インチの1/6です。
相対単位
相対単位は、他の要素やコンテキストに依存してサイズが変わる単位です。レスポンシブデザインなど、デバイスに応じて見た目を調整したい場合に便利です。
- em
- 親要素のフォントサイズを基準にした相対単位です。たとえば、親要素のフォントサイズが16pxの場合、2emは32pxになります。
- rem (ルート em)
- emと似ていますが、remはHTMLのルート要素(通常は<html>タグ)のフォントサイズに基づきます。親要素の影響を受けないため、予測しやすいレイアウトが可能です。
- % (パーセント)
- 親要素に対する相対的なサイズです。たとえば、width: 50%とすると、親要素の幅の50%のサイズになります。
- vh/vw
- ビューポートの高さ(vh)や幅(vw)に対する相対単位です。1vhはビューポートの高さの1%、1vwは幅の1%を指します。
- vmin/vmax
- ビューポートの短い辺や長い辺に基づいた単位です。vminは高さと幅のどちらか短いほうの1%、vmaxは長いほうの1%を示します。
これらの単位をうまく使うことで、レスポンシブなデザインや複雑なレイアウトを実現することができます。