CSSの画面サイズ対応スタイル完全ガイド！初心者でもわかる相対単位の使い方

CSSで画面サイズに応じたスタイルを指定するには？相対単位の活用

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

生徒

「ホームページの文字や画像の大きさをスマホやパソコンで自動的に変える方法ってありますか？」

先生

「はい、CSSでは相対単位というものを使うことで、画面サイズに応じたスタイルを設定できます。」

生徒

「相対単位ってなんですか？難しそう…」

先生

「大丈夫です。やさしく説明するので、一緒に見ていきましょう！」

1. CSSで画面サイズに応じたスタイルを設定するには？

CSS（スタイルシート）では、文字の大きさや画像の幅などを指定するとき、単位（たんい）を使います。この単位には大きく分けて「絶対単位」と「相対単位」があります。

画面サイズに合わせてデザインを変えたいときは、「相対単位」を使うのが基本です。なぜなら、画面の大きさに応じて自動的にサイズが変わってくれるからです。

2. 相対単位とは？初心者にもわかるやさしい解説

相対単位とは、「見る人の画面」や「文字のサイズ」などにあわせて自動的に大きさが変わる便利な単位です。以下のような種類があります。

%（パーセント）：親の要素に対しての割合
em：親の文字サイズに対しての割合
rem：ページ全体の基準の文字サイズに対しての割合
vw：画面の横幅に対しての割合
vh：画面の縦の高さに対しての割合

それぞれを具体的な例で見ていきましょう。

3. %（パーセント）の使い方

パーセントは「親の幅や高さに対する割合」で指定します。たとえば、親の幅が500ピクセルのとき、子の幅を50%にすると250ピクセルになります。


<style>
.box {
    width: 50%;
    background-color: lightblue;
    padding: 10px;
}
</style>

<div class="box">幅50%</div>

ブラウザ表示

4. emとremの違いと使い分け

emとremは文字サイズの相対単位です。

em：その要素の親が持っている文字サイズに対しての倍率
rem：ページ全体で設定された基準の文字サイズ（通常16px）に対する倍率


<style>
html {
    font-size: 16px;
}
.box1 {
    font-size: 2em;
    color: green;
}
.box2 {
    font-size: 2rem;
    color: blue;
}
</style>

<div class="box1">これは2em（親の2倍）</div>
<div class="box2">これは2rem（全体の2倍）</div>

ブラウザ表示

5. vwとvhで画面のサイズに対応する

vwは画面の横幅、vhは縦の高さをもとにした単位です。

1vw = 画面の横幅の1%
1vh = 画面の高さの1%

これを使うことで、画面の大きさにあわせて、文字やボックスのサイズも変化させることができます。


<style>
.box-vw {
    width: 80vw;
    height: 30vh;
    background-color: pink;
}
</style>

<div class="box-vw">画面にあわせて幅と高さが変わります</div>

ブラウザ表示

6. 相対単位の使い分けのコツとは？

それぞれの単位は用途によって使い分けることが大切です。

%：レイアウトの比率を決めるとき
em/rem：文字サイズやボックスの内側の余白に
vw/vh：画面全体を使う背景や、レスポンシブ対応の大きな見出しなどに

たとえば、見出しにはvwを使ってスマホとパソコンで大きさを自動調整したり、文字サイズにはremを使って読みやすさをキープしたりします。

7. 相対単位でレスポンシブデザインを実現しよう

レスポンシブデザインとは、スマートフォン・タブレット・パソコンなど、どのデバイスでも見やすく表示するための技術です。

CSSの相対単位（%・em・rem・vw・vhなど）を使うことで、1つのデザインでどんな画面サイズにも対応しやすくなります。

これにより、画面が小さいスマホでも、内容がはみ出したり見にくくなったりすることを防げます。

まとめ

CSSの相対単位は、現代のウェブデザインにおいて欠かせない重要な要素であり、文字の大きさや画像の表示、ボックスレイアウトの調整など多くの場面で役に立つ知識です。とくに、スマートフォンやタブレット、パソコンなど、画面の大きさが異なる複数の機器で同じページを表示することが当たり前になった今、画面サイズに応じて柔軟に変化するスタイルを設定することは必須といえます。今回の記事では、パーセント、em、rem、vw、vhといった代表的な相対単位を例とともに確認しましたが、それぞれの特徴を比較しながら使い分けることで、より読みやすく使いやすいページを作ることができます。また、相対単位は見た目を調整するための単純な道具ではなく、ページ全体の読みやすさや統一感を左右する大切な設計要素であるため、初心者の段階からしっかり理解しておくと後の学習がとてもスムーズになります。

たとえば、パーセントは親要素の大きさを基準にするため、レイアウトの比率を決める際に非常に使いやすい単位です。一方、emやremは文字サイズを基準として動くため、ページ全体の雰囲気や読みやすさを整える目的で使われることが多く、とくにremを使うことで統一感のあるデザインが形成できます。また、vwやvhはビューポートの大きさに連動するため、画面全体を使った大胆な見出しや背景デザインに向いています。こうした単位の特徴を理解しながら使い分けることで、画面幅が変わっても文字が小さくなりすぎたり、幅が広がりすぎたりといった問題を自然に防ぐことができます。

まとめで使える相対単位のサンプルコード


<style>
    .sample-summary-box {
        width: 60%;
        padding: 2em;
        font-size: 2rem;
        background-color: lightyellow;
        border: 2px solid orange;
    }
</style>

<div class="sample-summary-box">
    相対単位を組み合わせたサンプルボックスです
</div>

ブラウザ表示

上のサンプルのように、パーセント・em・remを組み合わせることで、親要素に応じた幅や文字サイズの調整が柔軟に行えます。相対単位は「ページ全体の見やすさ」と「要素ごとの調整」が同時に行いやすく、レスポンシブデザインの基礎をしっかり支える役割を持っています。さらに、vwやvhを用いることで、画面に合わせてダイナミックに変化するレイアウトを作ることができ、閲覧者にとってより直感的で快適な体験を提供できます。

これらの相対単位を場面に応じて使い分ければ、スマートフォンでもパソコンでも、自然で安定したデザインを実現できるようになります。とくに、近年はデバイスごとの画面比率が多様化しており、固定的なピクセル指定では対応しきれない場面が増えています。相対単位を理解して使いこなすことで、ページの読みやすさを保ちつつ、デザインの自由度も高まり、初心者でも本格的なレイアウトに挑戦できるようになります。今回学んだ基礎を活かして、次はより複雑なレイアウトやメディアクエリなどにも挑戦してみると、さらに理解が深まり、デザインの幅が広がるでしょう。

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

生徒

「相対単位って最初は難しそうに感じていましたが、どんな場面で使うのかが分かって理解しやすくなりました！」

先生

「そうでしょう。パーセント、em、rem、vw、vhの特徴を知るだけで、レイアウトの組み方が大きく変わりますよ。」

生徒

「特にremは便利ですね。文字サイズを統一しやすいので、ページ全体のバランスが取りやすそうです。」

先生

「いいところに気づきましたね。remは初心者にも扱いやすい単位なので、積極的に使っていくと良いですよ。vwやvhもぜひ試してみてください。」

生徒

「はい、いろいろな単位を組み合わせて、もっと見やすくてきれいなページを作ってみたいです！」

先生