CSSの単位はpxだけでいい？Web制作で知っておきたい使い分け

CSSで文字の大きさや余白、横幅を指定するときには、さまざまな単位を使用します。

初心者のうちは、デザインデータに書かれている数値をそのまま使いやすいpxだけで制作することも多いでしょう。

pxは分かりやすく、細かな調整にも向いています。しかし、すべてをpxで固定すると、画面幅の変化に対応しにくくなったり、文字を拡大した利用者が読みづらくなったりすることがあります。

反対に、相対的に変化する単位を何となく使うと、親要素の影響で想定外の大きさになることもあります。

今回は、CSSでよく使われる単位の特徴と、Web制作での使い分けを初心者向けに解説します。

CSSの単位には固定と相対がある

CSSの単位は、大きく固定的な単位と相対的な単位に分けて考えられます。

固定的な単位は、周囲の要素や画面幅が変わっても、指定した数値が基本的にそのまま使われます。

相対的な単位は、親要素の大きさ、基準となる文字サイズ、画面幅などによって実際の大きさが変わります。

どちらか一方が優れているわけではありません。

変化させたくない部分には固定的な単位、周囲に合わせて変化させたい部分には相対的な単位を使うと、管理しやすいCSSになります。

pxは細かな調整に向いている

pxは、Web制作で最もよく見かける単位の一つです。

枠線の太さ、アイコンの大きさ、角丸、細かな余白など、見た目を具体的に調整したい場面に向いています。

数値と表示結果の関係を理解しやすいため、初心者でも扱いやすいことが特徴です。

たとえば、次のような部分ではpxを使いやすいでしょう。

細い枠線

アイコンのサイズ

小さな角丸

ボタンの高さ

デザイン上の細かな位置調整

レイアウトを切り替える画面幅

ただし、すべての横幅や文字サイズをpxで固定すると、端末や利用者の設定に合わせて変化しにくくなります。

pxを使うこと自体が問題なのではなく、変化が必要な場所まで固定してしまうことが問題です。

パーセントは親要素を基準にする

パーセントは、基本的に親要素の大きさを基準として計算されます。

たとえば、親要素の横幅に対して半分の幅を指定すれば、親が大きくなったときは子要素も大きくなり、親が小さくなったときは子要素も小さくなります。

画面幅へ柔軟に対応するレイアウトで便利な単位です。

次のような場面でよく使われます。

コンテナ内いっぱいに広げる

画像を親要素の幅へ合わせる

複数の要素を割合で並べる

進捗状況を幅で表す

親要素に対する位置を指定する

ただし、何に対する割合なのかを理解していないと、想定外の大きさになります。

同じ50パーセントでも、画面全体の半分になるとは限りません。直接の親要素が狭ければ、その狭い範囲の半分になります。

remはページ全体の文字サイズを基準にする

remは、ページ全体の基準となる文字サイズをもとに大きさを決める単位です。

基準の文字サイズが16pxであれば、1remは16pxに相当します。

基準が変更されると、remで指定した部分もまとめて変化します。

そのため、文字サイズや文章に関係する余白を統一して管理しやすいことが特徴です。

見出し、本文、ボタン内の文字、セクション間の余白などをremで設計すると、サイト全体の大きさを調整しやすくなります。

また、利用者がブラウザの文字サイズを変更している場合にも、その設定を反映しやすくなります。

ただし、基準となる文字サイズを無理に小さくして計算を簡単にすると、利用者の設定を反映しにくくなる場合があります。

計算のしやすさだけでなく、読みやすさや拡大への対応を考えることが大切です。

emは現在の要素の文字サイズを基準にする

emも文字サイズを基準にする単位ですが、remとは基準が異なります。

remがページ全体の基準を参照するのに対し、emは使用する場所の文字サイズをもとに計算されます。

そのため、同じボタンでも文字サイズが大きくなれば、emで設定した内側の余白も一緒に大きくできます。

文字と余白の比率を保ちたい部品に便利です。

たとえば、通常サイズのボタンと大きなボタンを作る場合、文字サイズだけを変えれば、その文字を基準に余白も拡大できます。

一方、要素が何重にも入れ子になっていると、親の文字サイズの影響が重なり、想定より大きくなったり小さくなったりすることがあります。

基準を分かりやすく保ちたい場合はrem、部品の文字サイズに合わせて変化させたい場合はemと考えると整理しやすくなります。

vwは画面の横幅を基準にする

vwは、ブラウザの表示領域の横幅を基準にする単位です。

画面幅が広くなると大きくなり、狭くなると小さくなります。

メインビジュアルの大きな見出しや、画面幅に合わせて変化させたい装飾などで使われます。

パーセントは親要素を基準にしますが、vwは画面幅を基準にする点が違いです。

ただし、文字サイズをvwだけで設定すると、大きな画面では文字が必要以上に大きくなり、小さな画面では読めないほど小さくなる可能性があります。

画面幅に合わせて変化させる場合でも、最小値と最大値を設けることが重要です。

vhは画面の高さを基準にする

vhは、ブラウザの表示領域の高さを基準にする単位です。

ファーストビューを画面いっぱいの高さにしたい場合などに使われます。

しかし、スマートフォンではブラウザのアドレスバーや操作部分が表示・非表示になるため、画面の高さが変化することがあります。

その結果、次のような問題が起きる場合があります。

ファーストビューが画面からはみ出す

下にあるボタンが見えなくなる

スクロール中に高さが変化する

画面下部へ不要な余白ができる

画面いっぱいに見せたいという理由だけで高さを固定せず、内容が増えた場合や横向き表示でも確認します。

特に、見出し、説明文、ボタンなどを含むファーストビューでは、最低限必要な高さとコンテンツ量の両方を考える必要があります。

文字サイズを画面幅だけで決めない

レスポンシブ対応では、画面幅に合わせて文字サイズを変えたい場合があります。

しかし、スマートフォンだから小さな文字にする、大きな画面だから文字を大きくするという考え方だけでは、読みやすさを保てません。

本文の文字は、画面が狭くても一定の読みやすさが必要です。

特に、注意書きや補足情報を小さくしすぎると、重要な内容を確認できなくなります。

画面幅に合わせて大きく変化させやすいのは、メインビジュアルの見出しや装飾的な文字です。

本文、フォームの項目名、ボタンの文字などは、読みやすさと操作性を優先して設定します。

幅は固定値だけで決めない

Webサイトのメインコンテンツへ一定の横幅を設定すると、大きな画面でも文章が横へ広がりすぎるのを防げます。

ただし、固定した横幅だけを指定すると、それより小さな画面では内容がはみ出す可能性があります。

実務では、利用可能な範囲では横幅いっぱいに広がり、大きな画面では一定以上広がらないようにする考え方がよく使われます。

これにより、スマートフォンでは画面に収まり、パソコンでは読みやすい幅を保てます。

固定値か割合のどちらか一方を選ぶのではなく、最大幅や最小幅と組み合わせることが重要です。

余白は何を基準にするか考える

余白にも、px、rem、em、パーセントなどを使用できます。

どの単位が適しているかは、余白の役割によって変わります。

たとえば、サイト全体で統一した間隔を作りたい場合は、ページの基準に連動する単位が管理しやすくなります。

ボタン内の余白を文字サイズに合わせたい場合は、そのボタンの文字を基準にする考え方が向いています。

画面端からの左右余白を端末に合わせて変えたい場合は、画面幅に応じた指定を取り入れることもできます。

余白を見た目だけで個別に調整すると、12px、15px、18px、22pxのような似た数値が増え、サイト全体の統一感を保ちにくくなります。

あらかじめ小・中・大といった余白の基準を決めておくと、修正しやすくなります。

デザインデータの数値をそのまま使わない

Figmaなどのデザインデータでは、要素の幅や高さ、余白がpxで表示されることがあります。

しかし、その数値は特定の画面幅における完成イメージです。

実際のWebサイトでは、さまざまな画面幅、文字量、ブラウザ設定へ対応する必要があります。

デザイン上で横幅600pxだからといって、すべての環境で600pxに固定するとは限りません。

実装時には、次の点を確認します。

画面が狭くなったら縮める必要があるか

内容が増えたら高さも増えるべきか

文字サイズの変更に余白も連動させるか

大きな画面でも広がり続けてよいか

最小値や最大値が必要か

デザインの数値を再現するだけでなく、どの部分を固定し、どの部分を変化させるかを判断することがコーディングの役割です。

単位を混ぜることは問題ではない

一つのサイト内で複数の単位を使うことは、間違いではありません。

むしろ、目的に合わせて使い分ける方が自然です。

たとえば、枠線にはpx、文字サイズにはrem、画像幅にはパーセント、画面に連動する装飾にはvwというように、それぞれの特徴を利用できます。

問題になるのは、同じ役割の要素で単位や基準がばらばらになることです。

同じ種類の見出しにpxとremが混在していたり、同じコンテナの左右余白がページごとに異なっていたりすると、後からまとめて調整しにくくなります。

サイト内で基本的なルールを決めておくことが大切です。

実務での使い分けの目安

単位に迷ったときは、次のように考えると整理しやすくなります。

細い枠線や小さなアイコンはpx

本文や見出しの文字サイズはrem

文字サイズに合わせたい部品内の余白はem

親要素に合わせたい横幅はパーセント

画面幅に連動する大きな装飾はvw

画面の高さを意識した表示はvh

広がりすぎを防ぎたい要素には最大幅

小さくなりすぎると困る要素には最小値

これは絶対的なルールではありません。

重要なのは、なぜその単位を選んだのかを説明できることです。

画面幅と文字拡大の両方で確認する

単位を適切に使えているかは、完成した画面を見るだけでは判断できません。

公開前には、次のような条件で確認します。

画面幅を徐々に狭くする

大きなモニターで表示する

スマートフォンを横向きにする

ブラウザで文字を拡大する

長い見出しや文章を入れる

ボタンの文言を長くする

画像がない状態を確認する

特定の画面幅だけで正常に見えても、途中の幅で要素がはみ出すことがあります。

パソコンとスマートフォンの二種類だけでなく、その間の幅も確認することが重要です。

まとめ

CSSには、px、パーセント、rem、em、vw、vhなど、さまざまな単位があります。

pxは細かな固定調整、パーセントは親要素との割合、remはページ全体の文字基準、emは部品内の文字基準、vwとvhは画面サイズとの連動に向いています。

すべてをpxで作ることも、すべてを相対単位にすることも、必ずしも適切ではありません。

変化させたくない部分と、画面や文字に合わせて変化させたい部分を分けて考えることが大切です。

デザインデータの数値をそのまま写すのではなく、表示環境が変わったときにどう動くべきかを考えて単位を選ぶ。

この視点を持つことで、さまざまな画面で崩れにくく、後から調整しやすいWebサイトを作れるようになります。