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

生徒

「先生、スマホで見ると文字や画像が小さすぎたり、大きすぎてはみ出したりすることがあるんですけど、CSSで調整できますか？」

先生

「はい、それはレスポンシブ対応といって、画面の大きさに合わせてサイズを変える仕組みを作ることができます。CSSでは%やvw、そしてmedia queryを使う方法がありますよ。」

生徒

「なるほど！それぞれどういう意味なんですか？」

先生

「順番にわかりやすく解説していきますね。」

1. %を使ったレスポンシブなサイズ指定

CSSで%（パーセント）を使うと、親要素（外側の箱）の幅に対して相対的にサイズが決まります。例えば「幅: 50%」なら、親の半分の大きさになります。
これは水の入れ物に例えるとわかりやすいです。コップの半分まで水を入れるとき、コップが大きければ水の量も多く、小さければ少なくなります。%指定は、まさにその「入れ物基準」で大きさが決まるイメージです。


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

<div class="box">親要素の50%の幅で表示されます</div>

ブラウザ表示

2. vwを使った画面幅に応じたサイズ指定

vwは「viewport width（ビューポート幅）」の略で、画面全体の幅を基準にサイズを決める単位です。
1vwは画面幅の1%にあたります。つまり幅を「50vw」とすれば、常に画面幅の半分を占めるサイズになります。
%との違いは、%が「親要素」を基準にするのに対して、vwは「画面全体」が基準になるという点です。


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

<div class="vw-box">画面幅の50%で表示されます</div>

ブラウザ表示

3. media queryを使った画面ごとのレイアウト調整

media query（メディアクエリ）は、画面の大きさに応じてCSSを切り替える仕組みです。例えば「スマホでは1カラム表示、パソコンでは2カラム表示」というような調整が可能です。
簡単にいうと、服のサイズをS・M・Lと変えるように、画面サイズごとにスタイルを着替えさせるイメージです。


<style>
    .responsive-box {
        background-color: lightblue;
        padding: 10px;
    }

    /* 画面幅が600px以下のとき */
    @media (max-width: 600px) {
        .responsive-box {
            background-color: lightpink;
            font-size: 14px;
        }
    }

    /* 画面幅が601px以上のとき */
    @media (min-width: 601px) {
        .responsive-box {
            background-color: lightgreen;
            font-size: 20px;
        }
    }
</style>

<div class="responsive-box">画面の幅によって色や文字サイズが変わります</div>

ブラウザ表示