HTML/CSSで使用される単位には、要素のサイズや配置を制御するためにさまざまな種類があります。
よく使われる単位をいくつか紹介します。
px
- 特徴
画面の点1つで1px
物理的な1ピクセル単位で指定されるので、視覚的に正確
サイズが固定されてしまうので、レスポンシブデザインには不向き
- 用途
どの画面幅でも同じように表示させたいときなど、固定デザインを求められる場合（ボタンやアイコンの幅や高さなど）
%
- 特徴
要素に基づく相対的なサイズ指定
柔軟性が高く、親要素のサイズに依存
- 用途
レスポンシブなレイアウトで要素の幅や高さを調整
内側の要素が親要素に追従するような配置（例: グリッドやフレックスボックスの子要素）
rem
- 特徴
ブラウザが標準で表示する文字の大きさを1remとして、それに対して倍率をかける
- 用途
画面のサイズに合わせて文字の大きさを調整していとき（例: スマホやタブレットなど）
vh ・ vw
- 特徴
ビューポートサイズに基づいた要素のサイズ指定
vh: ビューポートの”高さ“に対する割合（例:100vhは画面全高）。vw: ビューポートの”幅“に対する割合（例:100vwは画面全幅）。- 用途
全画面表示のセクション（例: ヒーローセクション、モーダル）
レスポンシブな高さや幅を指定したい場合（例:
height: 100vh;）
さいごに
CSSの単位は、一見すると種類が多くて混乱するかもしれません。
しかし、適切に選択することで、デザインの柔軟性やレスポンシブ対応のしやすさが大きく向上します。
この記事が、単位の使い分けに迷ったときの参考になれば幸いです。
ぜひ実際のプロジェクトで試して、最適な単位を見つけてください！
