CSSのサイズ指定完全ガイド～絶対値と相対値を徹底解説～

eyecatch WEB制作
2024.11.10

ウェブデザインを行う際、要素のサイズを指定する方法としてよく使われるのが「絶対値」と「相対値」です。これらの違いを理解することで、より柔軟でレスポンシブなデザインが可能になります。しかし、これらの単位をどう使い分けるかに悩んでいる方も多いはず。この記事では、CSSにおける絶対値と相対値の違い、そしてそれぞれをどう使い分けるかを、具体的な例と共に分かりやすく解説します。

絶対値 vs 相対値：何が違うの？

CSSでは、要素のサイズを「絶対値」と「相対値」の2つの方法で指定できます。

  • 絶対値：親要素や画面サイズに関係なく、指定した通りの大きさを保つ。
  • 相対値：親要素や画面サイズに基づいて、指定したサイズが動的に変わる。

この違いを理解することが、適切なサイズ指定方法を選ぶための第一歩です。それぞれの特性を見ていきましょう。

1. 絶対値（px）

絶対値は、最も単純なサイズ指定方法です。指定した数値がそのまま要素のサイズとして適用され、画面サイズや親要素の影響を受けません。

px（ピクセル）

pxは「ピクセル」の略で、1pxは画面上の1画素を指します。これを使うと、要素は指定したピクセル数で表示されます。例えば、アイコンやボタンのサイズ、固定の余白を指定する際に便利です。

例：

button {
  width: 100px;
  height: 50px;
}

上記のコードでは、ボタンの幅は常に100px、高さは50pxに設定されます。どんなデバイスでも、このボタンは常にそのサイズで表示されます。

メリット：

  • 一貫したサイズが保証される。
  • 解像度に依存しない。

デメリット：

  • レスポンシブデザインには不向き。
  • 画面サイズが変わるとデザインが崩れる可能性がある。

2. 相対値（em, rem, %, vw, vh）

相対値は、要素のサイズが親要素や画面サイズに基づいて決まるため、デザインが柔軟でレスポンシブになります。以下でよく使われる相対値について詳しく解説します。

em（エム）

emは、親要素のフォントサイズを基準にしてサイズを決めます。親要素のフォントサイズが16pxだと、1emは16pxになります。例えば、2emだと32pxになります。

例：

.parent {
  font-size: 16px;
}

.child {
  font-size: 2em;  /* 親要素の2倍 = 32px */
}

メリット：

  • 親要素のサイズに合わせて、動的に調整できる。
  • 文字サイズを相対的に指定する場合に便利。

デメリット：

  • 複数の親要素がある場合、計算が複雑になることがある。

rem（ルートエム）

remは、ルート要素（html）のフォントサイズを基準にしてサイズを決めます。これにより、ページ全体で一貫したサイズの調整が可能になります。

例：

html {
  font-size: 14px;
}

.parent {
  font-size: 1.5rem;  /* 14px × 1.5 = 21px */
}

メリット：

  • ルート要素のサイズを基準にするので、全体の一貫性を保ちやすい。
  • レスポンシブデザインに役立つ。

デメリット：

  • 他の要素に対する依存が少なく、少し複雑に感じることがある。

%（パーセント）

%は、親要素のサイズに対する割合を指定する単位です。例えば、親要素の幅が500pxで、その子要素の幅を50%に指定すると、子要素の幅は250pxになります。

例：

.parent {
  width: 500px;
}

.child {
  width: 50%;  /* 親要素の50% = 250px */
}

メリット：

  • 親要素に依存してサイズが決まるため、レイアウトを柔軟に変更できる。

デメリット：

  • 親要素のサイズに依存しているため、親要素のサイズ変更によって子要素のサイズも変わる。

vw（ビューポート幅）とvh（ビューポート高さ）

vwとvhは、ビューポートの幅（画面の表示領域）や高さを基準にしてサイズを決める単位です。これを使うと、画面サイズに応じて要素のサイズを動的に変更できます。

  • 1vwはビューポートの幅の1%。
  • 1vhはビューポートの高さの1%。

例：

.container {
  width: 50vw;  /* ビューポートの幅の50% */
  height: 100vh;  /* ビューポートの高さの100% */
}

メリット：

  • スクロールなしで画面全体に合わせたレイアウトが作れる。
  • レスポンシブデザインに最適。

デメリット：

  • スクロールバーを考慮しないと、幅が画面外にはみ出ることがある。

絶対値と相対値を使い分けるタイミング

どちらを使うべきかは、デザインの目的によります。以下のように使い分けると効果的です。

  • 絶対値（px）を使う場合：
  • アイコンやボタンのサイズが固定であることが望ましいとき。
  • 画面サイズに関係なく、常に同じ大きさで表示したい要素。
  • 相対値（em, rem, %, vw, vh）を使う場合：
  • レスポンシブデザインを実現したいとき。
  • 画面サイズに合わせて動的にレイアウトやフォントサイズを調整したいとき。

例えば、Webページ全体の文字サイズやレイアウトはremや%を使って柔軟に調整し、アイコンやボタンのようにサイズが固定された要素にはpxを使うといった具合です。

まとめ

CSSの絶対値と相対値は、どちらも用途に応じて適切に使うことで、より効率的で美しいデザインが実現できます。絶対値（px）は一貫性があり、固定サイズを保ちたいときに便利です。一方で、相対値（em, rem, %, vw, vh）を使えば、レスポンシブデザインを実現でき、様々な画面サイズに対応した柔軟なレイアウトが可能になります。

適切な単位を選んで、ユーザーにとって快適で見やすいWebページを作りましょう！

コメント

スポンサーリンク