px指定に限界を感じたら！大画面対応に強い相対指定のすすめ

css

SHARE

目次

はじめに

みなさん、こんにちは！

Web制作でよく使う「px（ピクセル）」指定。
僕もフォントサイズや画像サイズ、gap、paddingなどを指定する時に多用しています。
これはとても分かりやすいですが、画面サイズが変わるとバランスが崩れることもあります。

例えば、スマホではちょうど良かった文字サイズが、大きなモニターでは小さく見えたり、逆に大きすぎたり。
コンテンツの幅が空きすぎてしまったり。

そこで今回は、「相対指定」を使って、どんな画面サイズでもバランスのとれたデザインを作る方法を紹介します。

相対指定について、基本とその使いどころ

Webサイトのデザインでは、ボタンの大きさ、文字サイズ、余白の幅など、あらゆる「サイズ」を指定する必要があります。
このときに使うのが「単位」です。

多くの初学者が最初に出会うのは、px（ピクセル）という単位でしょう。
px は非常にわかりやすく、「1px＝画面上の1ドット」なので感覚的に使いやすいです。

しかし、pxにはある欠点があります。

それは、画面サイズに応じて変化しないということです。

たとえば、以下のようなケースを考えてみましょう：

  • スマホで見たとき： 文字が大きすぎて画面からはみ出る
  • 超ワイドモニターで見たとき： 文字が小さすぎて読みにくい

このようなときに便利なのが、相対指定の単位です。
相対指定とは、「環境に応じてサイズが変わる」柔軟な指定方法です。

主な相対指定の単位とその特徴

単位説明使いどころ
vwViewport Width：画面の横幅の1%フォントサイズやpaddingなど画面幅に比例させたいとき
vhViewport Height：画面の高さの1%セクションの高さ指定や、フルスクリーン表示の調整
%親要素に対する比率幅や高さを柔軟に調整したいとき
em親要素のフォントサイズを基準ボタン内のpaddingやmarginに便利
remHTMLのルート要素のフォントサイズを基準グローバルに統一感を出したいときに有効

これらの単位を組み合わせて使うことで、どの画面サイズでも美しく整ったデザインが実現できます。

なぜ vw を使うと良いのか？

例えば、フォントサイズを 3vw にすると、画面幅が1000pxなら 30px、2000pxなら 60px になります。

つまり、文字が画面に対して常に「同じくらいの大きさ」に見えるのです。
これは、画面幅が変わってもデザインの比率が崩れないという大きなメリットになります。

実例：px指定とvw指定の違い

例1：フォントサイズの比較

px指定

CSS
h1 {
  font-size: 36px;
}

この指定だと、スマホでも大型ディスプレイでも常に36px。
スマホでは大きく見えても、モニターでは非常に小さく感じるかもしれません。

vw指定

CSS
h1 {
  font-size: 4vw;
}

この場合、画面幅が：

  • 375px（iPhone）→ 4vw = 約15px
  • 1920px（デスクトップ）→ 4vw = 約76px

というように、自然なサイズ感で文字が表示されます。
「画面に対しての見た目の大きさ」が一定に保たれるのがポイントです。

例2：paddingやgapの相対指定

相対指定は文字サイズだけでなく、余白や間隔にも使えます。

CSS
.card {
  padding: 2vw;
  gap: 1.5vw;
}

これにより、カードの内側の余白や中身同士の間隔も、画面に対してバランス良く調整されます。

例えば、以下のようなレイアウトで使えば、
大きなモニターでも「間延び感」がなく、スマホでも「詰まりすぎない」レイアウトになります。

画面幅が狭いときの注意点

相対指定はとても便利ですが、万能ではありません。
特に、画面の幅が極端に狭くなるスマホや一部のタブレットでは、思わぬトラブルが起きることがあります。

相対指定が原因で文字が小さすぎる問題

たとえば以下のようなコードを見てみましょう

CSS
p {
  font-size: 2vw;
}

これは、画面の横幅に対して2%の大きさで文字サイズを決めるという意味です。
一見、柔軟で良さそうに見えますよね？

しかし、画面幅が小さい場合どうなるでしょう？

  • iPhone（横幅 375px）で 2vw → 約7.5px
  • 古いスマホ（横幅 320px）で 2vw → 約6.4px

これでは、文字が読めないほど小さくなることが多く、ユーザーにとってはストレスの原因になります。

clamp() を使って最小値・最大値を設定しよう

この問題を解決するために活用したいのが、CSSの clamp() 関数です。

clamp() は、3つの値を指定します

CSS
clamp(最小値, 推奨値, 最大値)

たとえば以下のように書くと

CSS
p {
  font-size: clamp(14px, 2vw, 24px);
}
  • 最小でも 14px は確保される
  • 通常は 画面幅の2% を基準
  • 最大でも 24px を超えない

このように、柔軟性と読みやすさを両立できます。

clampについては以下の記事でも解説しています。

css【CSS】min(),max(),clamp()を使用したブレークポイントに依存しないレイアウト

他にも気をつけたいポイント

ボタンやフォームも相対指定だけに頼りすぎない
小さくなりすぎるとタップしづらくなります。最低幅や高さを min-width, min-height で設定すると良いです。

余白（padding・margin）が詰まりすぎる可能性
狭い画面でpadding: 2vwだと余白が極端に狭くなって、窮屈な印象になります。

対策としてはこちら

CSS
div {
  padding: clamp(10px, 2vw, 30px);
}

おわりに

この記事では、相対指定（特に vw）の使い方とメリットについて紹介してきました。

初心者のうちは「pxで全部書いた方が楽そう」と思いがちですが、少し慣れてくると、相対指定の柔軟さ・便利さに驚くはずです。

とくに、デバイスごとに画面幅がバラバラな現代では、「すべての環境で見やすく整ったレイアウト」を実現するためには、相対指定を避けて通ることはできません。

ただし、相対指定だけに頼ると、「可変性」ゆえに設計が崩れてしまうリスクもあります。
そのため、実際には：

  • 相対指定で全体のスケーラビリティを確保
  • clamp()やmin-widthなどで必要な制限をつける

という「バランス型の設計」がとても重要になります。

前の記事

【HTML】Web制作でよく使うHTMLタグ7選とそのTips…