Webサイトで使われる単位とは？px・rem・em・vw・vhの違いを初心者向けに解説

CSS

Webサイトを作っていると、「16px」「1.5rem」「50%」「100vw」など、数字の後ろにさまざまな単位が出てきます。

HTMLやCSSを勉強し始めたばかりだと、
「pxとremは何が違うの？」「%は何を基準にしているの？」「vwやvhはいつ使えばいい？」
と迷ってしまいますよね。

実は、Webサイトで使われる単位は、**「何を基準にサイズを決めるのか」**を理解すると、それほど難しくありません。

この記事では、Web制作やCSSでよく使われる単位について、初心者の方にもわかりやすく解説します。

Webサイトで使われる単位にはどんな種類がある？

CSSで使われる長さの単位には、大きく分けて「絶対単位」と「相対単位」があります。

Webサイト制作で特によく使われるのは、次の単位です。

単位基準主な用途
pxCSS上の基本的な長さ文字・幅・余白など
%親要素など幅・高さなど
em文字サイズ文字や余白など
remルート要素の文字サイズ文字・余白など
vwビューポートの幅レスポンシブデザイン
vhビューポートの高さファーストビューなど
dvw動的なビューポートの幅スマートフォンなど
dvh動的なビューポートの高さスマートフォンなど

それでは、それぞれの特徴を見ていきましょう。

pxとは？Webサイトで最もよく見る単位

pxは「ピクセル」と呼ばれる単位です。CSSでは、例えば次のように指定します。

.title {
  font-size: 24px;
}

これは「文字の大きさを24pxにする」という意味です。

Web制作では非常によく使われるため、まずはpxを基本の単位として覚えておくとよいです。

ただし、CSSの1pxが必ずしもディスプレイ上の物理的な1画素と一致するわけではありません。CSSにおけるpxは、画面上での大きさを扱うための基準として考えるとわかりやすいでしょう。

%とは？親要素を基準にする単位

%はパーセントを表します。特徴は、別の要素を基準にしてサイズが変わることです。

例えば、親要素の幅が1000pxで、子要素に次のように指定したとします。

.box {
  width: 50%;
}

この場合、子要素の幅は親要素の50%なので、500pxになります。画面の大きさに合わせて要素を伸縮させたい場合などに便利です。

レスポンシブWebデザインでは、固定されたpxだけではなく、%などの相対的な単位を組み合わせることで、さまざまな画面サイズに対応しやすくなります。

emとは？文字サイズを基準にする単位

em（エム）は、文字サイズを基準とする相対単位です。

例えば、親要素の文字サイズが16pxなら、

.box {
  padding: 2em;
}

のように指定すると、文字サイズを基準に余白が決まります。

emの特徴は、文字サイズに合わせてサイズが変化することです。

一方で、入れ子になった要素では基準となる文字サイズが変わる場合があるため、初心者にとっては少しわかりにくい単位でもあります。

「文字サイズに合わせて余白やサイズも変えたい」という場面で使うと、そのメリットを活かせます。

remとは？初心者にもおすすめの相対単位

rem（レム）も文字サイズを基準とする単位です。

emとの大きな違いは、HTMLのルート要素（通常はhtml要素）の文字サイズを基準にすることです。

例えば、ルートの文字サイズが16pxなら、

  • 1rem = 16px
  • 1.5rem = 24px
  • 2rem = 32px

という関係になります。
CSSでは次のように使えます。

.title {
  font-size: 2rem;
}

.text {
  font-size: 1rem;
}

remは、ページ全体でサイズの基準をそろえやすいのがメリットです。

Webサイトの文字サイズや余白を指定するときに、remを使うケースも多くあります。

vwとは？画面の横幅を基準にする単位

vwは「viewport width」の略で、表示領域の横幅を基準にした単位です。

1vwは画面幅の1%を表します。例えば、画面の横幅が1000pxなら、50vwは500pxです。

.main-visual {
  width: 80vw;
}

このように指定すると、画面の横幅に応じて要素のサイズが変化します。

スマートフォン、タブレット、パソコンなど、さまざまな画面サイズに対応するレスポンシブデザインで活用できます。

vhとは？画面の高さを基準にする単位

vhは「viewport height」の略です。

vwが画面の横幅を基準にするのに対して、vhは画面の高さを基準にします。

1vhは画面の高さの1%です。例えば、画面の高さが800pxなら、100vhは800pxになります。

.main-visual {
  height: 100vh;
}

このようにすると、表示領域の高さを基準にしたレイアウトを作れます。

Webサイトを開いたときに最初に表示される「ファーストビュー」を、画面いっぱいに見せたい場合などに使われます。

ただし、スマートフォンではブラウザのアドレスバーやツールバーなどによって表示領域が変化するため、100vhを指定しただけでは、意図したレイアウトにならないケースがあります。

dvwとは？動的なビューポート幅を基準にする単位

dvwは「dynamic viewport width」の略で、動的ビューポートの幅を基準にする単位です。

基本的な考え方はvwと似ていますが、dvwはブラウザの表示領域が変化する環境で、現在の動的なビューポートを基準にサイズを決めることができます。

例えば、

.box {
  width: 100dvw;
}

とすると、動的なビューポート幅を基準に要素の幅が決まります。

スマートフォンなど、ブラウザのUIや表示領域が変化する環境で、ビューポートを基準にしたレイアウトを作る場合に利用できます。

ただし、一般的なWebサイトではvwで十分なケースも多いため、「必ずdvwを使う」というわけではありません。

まずは「vwはビューポートの幅、dvwは動的なビューポートの幅」と覚えておけばよいでしょう。

dvhとは？スマートフォンで知っておきたい単位

dvhは「dynamic viewport height」の略で、動的ビューポートの高さを基準にする単位です。

スマートフォンのブラウザでは、アドレスバーやツールバーなどのUIが表示されたり、スクロールによって隠れたりします。

そのため、単純に100vhと指定すると、実際にユーザーがその時点で見ることのできる領域と、想定していた高さにズレが生じることがあります。

dvhは、こうした表示領域の変化を考慮してサイズを決めたい場合に便利です。

例えば、

.main-visual {
  min-height: 100dvh;
}

と指定すると、動的なビューポートの高さを基準にして、画面いっぱいに近いレイアウトを作ることができます。

特に、スマートフォン向けのWebサイトで、ファーストビューやモーダルなどを画面の高さに合わせたい場合に役立ちます。

vhとdvhは何が違う？

初心者の方が混乱しやすいのが、vhとdvhの違いです。

簡単に整理すると、

  • vh：ビューポートの高さを基準にする
  • dvh：動的なビューポートの高さを基準にする

という違いがあります。

特にスマートフォンでは、ブラウザのUIによって実際に表示できる領域が変化するため、画面いっぱいに表示したい要素ではdvhが便利な場合があります。

例えば、スマートフォンの画面全体を使ったメインビジュアルやモーダルなどでは、以下のような指定が考えられます。

.modal {
  min-height: 100dvh;
}

また、ビューポートの高さにはdvhだけでなく、svh（small viewport height）やlvh（large viewport height）といった単位もあります。

まずは、「スマートフォンでは、従来のvhに加えてdvhという選択肢がある」と覚えておけば十分です。

px・rem・em・%・vw・vhはどう使い分ける？

ここまで紹介した単位は、それぞれ得意なことが違います。

ざっくり覚えるなら、

  • px：サイズを具体的に指定したい
  • %：親要素に対する割合で指定したい
  • em：文字サイズに合わせたい
  • rem：ページ全体の基準に合わせたい
  • vw：画面の横幅に合わせたい
  • vh：画面の高さに合わせたい
  • dvw：動的なビューポート幅を基準にしたい
  • dvh：動的なビューポート高さを基準にしたい

と考えるとわかりやすいでしょう。

最初からすべての単位を完璧に使いこなす必要はありません。まずは「px」「%」「rem」の3つを理解し、その後にemやvw、vhを覚えていくと、CSSのコードも読みやすくなります。

レスポンシブデザインでは相対単位が重要

現在のWebサイトは、パソコンだけでなくスマートフォンやタブレットからも閲覧されます。

そのため、画面サイズが変わっても見やすいWebサイトを作る「レスポンシブデザイン」が重要です。

例えば、すべての要素を固定されたpxで指定すると、スマートフォンでは大きすぎたり、逆にパソコンでは小さすぎたりすることがあるので、%、rem、vw、vhなどの相対単位をうまく組み合わせます。

単位を使い分けることで、さまざまな画面サイズに対応しやすいWebサイトを作れるようになります。

まとめ：単位は「何を基準にするか」がポイント

CSSの単位が難しく感じる理由は、種類が多いからです。しかし、最初からすべて暗記する必要はありません。

大切なのは「この単位は何を基準にしているのか？」を考えることです。

pxは基本となる長さ、%は割合、remはルート要素の文字サイズ、vwはビューポートの幅、vhは高さを基準にします。

さらにスマートフォンなどで表示領域が変化する場合には、dvwやdvhといった動的ビューポート単位も利用できます。

Webサイトのレスポンシブ対応では、これらの単位を目的に合わせて使い分けることがポイントです。

まずはよく使う単位から少しずつ覚えて、実際にCSSを書きながら違いを確認してみましょう。