先生と生徒の会話形式で理解しよう

生徒

「CSSでサイズを指定するときにpxとかemってよく見かけますが、何が違うんですか？」

先生

「それは良いところに気づきましたね。CSSでは、いろいろな『単位』を使ってサイズを調整できます。それぞれの単位に特徴があるので、今回はその違いと使い方をわかりやすく説明しましょう！」

生徒

「お願いします！できれば初心者でもわかりやすく教えてほしいです。」

先生

「もちろんです！身近な例を交えて、CSSの単位の基本をしっかり理解していきましょう。」

1. CSSの単位とは何か？

CSS（スタイルシート）でWebページの見た目を調整するときに、「サイズ」を指定する場面がよくあります。このとき使われるのが「単位」です。たとえば、文字の大きさ、余白の幅、画像の幅などを指定するときに、どれくらいの大きさにするかを数値と単位で決めます。

たとえば、「16px」と書いた場合は、16という数値と「px（ピクセル）」という単位を組み合わせて使っているのです。

2. 絶対単位と相対単位の違い

CSSの単位は、大きく分けて2種類に分類されます。

絶対単位：サイズが固定で変わらない単位（例：px, cm, mm）
相対単位：他の要素や画面サイズによって変わる単位（例：%, em, rem, vw, vh）

それぞれの単位には用途に合った使いどころがあります。特にWebデザインでは、相対単位を使うことでレスポンシブデザイン（画面サイズに合わせて変化するデザイン）がしやすくなります。

3. よく使うCSSの単位一覧

ここでは、CSSでよく使われる代表的な単位を一覧で紹介し、それぞれの意味や使い方をわかりやすく説明していきます。

4. px（ピクセル）とは？

px（ピクセル）は、画面上の点を表す絶対単位です。スマホやパソコン画面を構成している最小の単位が「ピクセル」です。たとえば、「font-size: 20px;」とすれば、文字サイズが20ピクセルになります。

画面サイズに関係なく、常に同じ大きさなので、細かくレイアウトを調整したいときに便利です。


<style>
h1 {
    font-size: 24px;
}
</style>

<h1>これは24pxの文字サイズです</h1>

ブラウザ表示

5. %（パーセント）とは？

%（パーセント）は、親の要素（コンテナ）に対しての割合を指定する相対単位です。たとえば、「width: 50%;」とすれば、親の横幅の半分になります。

親の大きさが変わると、それに応じて変化するため、画面サイズに合わせたレイアウトができます。


<style>
div {
    width: 50%;
    background-color: lightblue;
}
</style>

<div>親の幅の50%になります</div>

ブラウザ表示

6. em（エム）とrem（レム）の違いとは？

emは、親要素の文字サイズに対して相対的にサイズを指定する単位です。一方、remは、ページ全体のルート（htmlタグ）の文字サイズに対しての相対単位です。

たとえば、親のfont-sizeが16pxなら、「2em」は32pxになります。一方で、「2rem」は常にhtmlタグのfont-sizeが基準になります。


<style>
html {
    font-size: 16px;
}
p.em {
    font-size: 2em;
}
p.rem {
    font-size: 2rem;
}
</style>

<p class="em">2emのテキスト</p>
<p class="rem">2remのテキスト</p>

ブラウザ表示

7. vwとvhとは？画面サイズに合わせて変化する単位

vwは「ビューポート幅（viewport width）」の略で、画面の横幅に対する割合を示します。vhは「ビューポート高さ（viewport height）」で、画面の高さに対する割合を表します。

たとえば、「width: 100vw;」とすれば、画面の横幅いっぱいに広がります。「height: 100vh;」なら、画面の高さ全部に広がります。


<style>
div {
    width: 100vw;
    height: 50vh;
    background-color: pink;
}
</style>

<div>画面全体の幅と高さの50%</div>

ブラウザ表示

8. 単位の選び方と使い分けのコツ

CSSの単位は用途によって使い分けるのがコツです。

px：細かい調整が必要な部分や固定サイズのボタンなどに使う
%：親要素のサイズに合わせて調整したいときに便利
em/rem：文字サイズを相対的に調整することでデザイン全体のバランスをとる
vw/vh：画面のサイズ全体に合わせたいときにぴったり

実際の場面に応じて、どの単位を使うかを選ぶことで、より柔軟で美しいレイアウトが実現できます。

まとめ

CSSの単位は、Webページの見た目を整えるために欠かせない基本であり、初心者が正しく理解しておくことで、より扱いやすく美しいデザインが作れるようになります。絶対単位と相対単位の特徴を知ることで、画面の大きさが変わっても自然に整うレイアウトを実現でき、読みやすさや配置のバランスも大きく向上します。とくに、pxのように固定された大きさを示す単位と、パーセントやem、remのように周囲の大きさを基準に変化する単位の違いを理解することで、柔軟で安定したデザインを組み立てられるようになります。さらに、ビューポートを基準とするvwやvhといった単位を活用すれば、画面全体を使った配置がしやすくなり、スマートフォンやパソコンなど環境に応じた表示調整もスムーズになります。ここでは、学んだ内容を視覚的に確認できるサンプルとともに、単位の特徴をもう一度振り返ってまとめていきます。

単位の違いを視覚的に理解するサンプル


<style>
    .box-sample {
        width: 50%;
        height: 20vh;
        background-color: lightgreen;
        font-size: 2rem;
        padding: 1em;
    }
</style>

<div class="box-sample">
    これはCSSの単位を組み合わせたサンプルです
</div>

ブラウザ表示

このように、パーセントやビューポートを基準とした単位を使うことで、画面の幅や高さの変化に応じて自然に調整されたレイアウトを実現できます。また、remで文字サイズを基準づけし、emで余白を調整すると、文章や見出しのバランスが安定し、美しい見た目につながります。単位の特性を知ることは、ただページを飾るというだけでなく、読み手にとって快適なレイアウトを作るための重要な要素でもあります。固定的なpxのみで調整しようとすると、画面サイズによっては窮屈になったり余白が不自然に見えたりする場合がありますが、相対単位を併用することで、より柔軟で一貫性のあるデザインを実現できます。

CSSの単位は単なる記号ではなく、見た目の印象や読みやすさを大きく左右する大切な仕組みです。固定したい部分にはpxを、親要素に合わせたい部分にはパーセントを、文字のバランスを整えるにはremやemを、画面全体の広がりを持たせたい部分にはvwやvhを使うなど、それぞれの目的に応じた単位選びが求められます。今回学んだCSSの単位の特性と使い分けを身につけていくことで、初心者でも実践的なデザインが作りやすくなり、より見栄えのよいページ構成が行えるようになります。

先生と生徒の振り返り会話

生徒

「CSSの単位って、思っていたより多くて驚きました。ピクセルだけで調整するものだと思っていました。」

先生

「単位によって動きや基準が変わるので、理解するとデザインがかなり楽になりますよ。相対単位を使うと、画面サイズに合わせた自然な見え方が作れます。」

生徒

「特にremとemの違いが分かりやすかったです。文字サイズの調整がもっと上手になりそうです。」

先生

「その感覚はとても大事です。単位を正しく使えば、読みやすく整ったデザインが作れます。実際に使ってみると理解が深まりますよ。」

生徒

「これからは状況に合わせて単位を選べるように意識してみます！」

先生