CSSの単位まとめ：px、%、vw、vh、em、remの違いと使い分け
CSSを使ってWebページをスタイリングする際、単位の選択は非常に重要です。適切な単位を選ぶことで、レスポンシブなデザインやユーザー体験を向上させることができます。この記事では、CSSでよく使われるpx、%、vw、vh、em、remの違いと使い分けについて解説します。
px (ピクセル)
pxは、ピクセルを基準にした絶対的な単位です。ピクセルは画面上の物理的な点を表しており、一般的にディスプレイの解像度に依存します。以下のような場合にpxを使用します。
- アイコンや画像のサイズ指定: 例えば、16pxのアイコンを正確に表示したい場合。
- 微調整が必要な要素: ボタンやテキストのサイズをピクセル単位で細かく調整したい場合。
ただし、レスポンシブデザインではpxを使いすぎると、デバイスの画面サイズに応じてレイアウトが崩れることがあります。
% (パーセント)
%は、親要素のサイズに対する割合を指定する相対的な単位です。%を使うことで、コンテナのサイズに応じて柔軟に要素のサイズを調整できます。
- レスポンシブデザイン: 画面サイズに応じて要素の幅や高さを自動調整したい場合。
- フルウィズのレイアウト: コンテンツが親要素の幅全体を占めるようにしたい場合。
注意点としては、親要素が変わるとサイズが変わるため、予期せぬレイアウトの変化が起きることがあります。
vw (ビューポート幅)
vwは、ビューポート（画面表示領域）の幅を基準にした相対的な単位です。1vwはビューポート幅の1%を意味します。
- フルスクリーンの要素: 例えば、画面の幅に対して100%の幅を持つ要素を作りたい場合に使います。
- レスポンシブなフォントサイズ: 画面サイズに応じてフォントサイズを調整したい場合にvwを使用すると便利です。
vh (ビューポート高さ)
vhは、ビューポートの高さを基準にした相対的な単位で、1vhはビューポート高さの1%に相当します。
- フルスクリーンのセクション: 例えば、画面の高さに応じてセクションの高さを設定する場合。
- 縦方向のレイアウト調整: ビューポートの高さに合わせて要素の高さを柔軟に設定したい場合に使います。
em (エム)
emは、親要素のフォントサイズを基準にした相対的な単位です。例えば、親要素のフォントサイズが16pxの場合、1emは16pxに相当します。
- フォントサイズの調整: テキストサイズを親要素に応じて調整したい場合にemを使用します。
- パディングやマージンの指定: フォントサイズに基づいて他の要素のサイズを相対的に設定したい場合。
emは、親要素が変更されると値が連鎖的に変わるため、予期しないサイズ変更が起きる可能性があります。
rem (ルートエム)
remは、ルート要素（通常は<html>タグ）のフォントサイズを基準にした相対的な単位です。これにより、全体のデザインが一貫性を保つことができます。
- 一貫したフォントサイズ: 全体のフォントサイズを一貫させたい場合に便利です。
- レスポンシブデザイン: ルートフォントサイズに基づいた一貫性のあるサイズ調整が可能です。
remはemと異なり、ルートフォントサイズに依存するため、複数のネストされた要素で使用してもサイズの変動がありません。
まとめ
| 単位 | 説明 | 使用シーン |
|---|---|---|
| px | ピクセル基準の絶対単位 | アイコンや画像、微調整が必要な要素 |
| % | 親要素基準の相対単位 | レスポンシブデザイン、フルウィズレイアウト |
| vw | ビューポート幅基準の相対単位 | フルスクリーン要素、レスポンシブフォント |
| vh | ビューポート高さ基準の相対単位 | フルスクリーンセクション、縦方向のレイアウト |
| em | 親要素のフォントサイズ基準の相対単位 | フォントサイズ調整、パディング・マージン指定 |
| rem | ルート要素のフォントサイズ基準の相対単位 | 一貫したフォントサイズ、レスポンシブデザイン |
以上、px、%、vw、vh、em、remの各単位について解説しました。デザインの要件や目的に応じて、適切な単位を使い分けることで、より柔軟で効果的なスタイリングが可能になります。