CSSでスタイルを指定する際、単位をどのように選ぶかは重要です。「px」 「em」「rem」「%」 など、さまざまな単位があり、それぞれの特徴や適用範囲に応じて使い分ける必要があります。本記事では、これらの単位の違いを理解し、適切に選択する方法を解説します。
「px（ピクセル）」
pxは、画面上のピクセルを基準とする絶対単位です。
特徴
- 固定サイズ：要素のサイズがデバイスに依存しません。
- 簡単で直感的：特定のサイズを明確に指定したいときに便利。
使用例
CSS
h1 {
font-size: 24px;
}適したケース
- ロゴやアイコンなど、絶対的なサイズが必要な場合。
- デザインがピクセル単位で固定されている場合。
「em」
emは、親要素のフォントサイズを基準とする相対単位です。
特徴
- 柔軟性：親要素のフォントサイズに応じて変化します。
- 積み重ねの影響：ネストされた要素では値が累積されます。
使用例
CSS
div {
font-size: 16px;
}
p {
font-size: 1.5em; /* 親要素の16px × 1.5 = 24px */
}注意点
ネストが深いと値が予想外に大きくなる場合があるため、管理が難しいことも。
「rem」
remは、ルート要素（<html>タグ）のフォントサイズを基準とする相対単位です。
特徴
- 一貫性：親要素の影響を受けず、常にルートサイズを基準とする。
- レスポンシブデザインに適応：ルートフォントサイズを変更するだけで全体のスケールを調整可能。
使用例
CSS
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 16px × 2 = 32px */
}適したケース
- グローバルなスタイル設定を行う場合。
- スケーラブルなデザインを実現したい場合。
「%（パーセンテージ）」
%は、親要素のサイズを基準とする相対単位です。
特徴
- 柔軟性：親要素に対して相対的なサイズを指定可能。
- 幅広い用途：幅、高さ、マージン、パディングなどの指定に使用される。
使用例
CSS
div {
width: 50%; /* 親要素の幅の50% */
}注意点
高さの計算は親要素の高さが明示的に設定されている場合のみ適用されます。
単位の使い分けのポイント
| 単位 | 特徴 | 適用例 |
|---|---|---|
px | 絶対的で固定的なサイズ | ロゴ、アイコン、ボーダーなど |
em | 親要素のフォントサイズに依存 | ネストされた要素の相対的なスタイリング |
rem | ルートフォントサイズに基づく相対サイズ | グローバルなスタイリング、スケーラブルデザイン |
% | 親要素のサイズに依存 | レイアウト、レスポンシブデザイン |
まとめ
CSSで適切な単位を選ぶことは、柔軟でメンテナンスしやすいスタイル設計に欠かせません。それぞれの単位の特徴と使いどころを理解し、適切な場面で選択することで、より効率的なデザインを実現しましょう。特にレスポンシブデザインでは、remや%を活用するとスムーズな調整が可能です。
最後まで読んでいただきありがとうございます！
このブログは初心者向けwebデザイナー向けにHTML、CSSの基礎知識を発信しています。
この記事を読んだ方に少しでもお役に立てれば幸いです。
