CSSのレスポンシブ対応！初心者でもわかるサイズを可変にする方法（%・vw・media query）

レスポンシブ対応でサイズを可変にする方法（%・vw・media query）

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

生徒

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

先生

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

生徒

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

先生

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

1. %（パーセント）を使った相対的なサイズ指定

CSSで%（パーセント）を使うと、その要素を包んでいる「親要素（外側の箱）」の大きさを基準にしてサイズが決まります。

例えば、親要素の幅が300pxのとき、子要素に「width: 50%;」と指定すると、その幅は150pxになります。プログラミング未経験の方には、「マトリョーシカ」や「入れ物」をイメージすると分かりやすいでしょう。外側の箱の大きさが変われば、中に入っている要素もその比率を保ったまま一緒に伸び縮みします。

この指定方法の最大のメリットは、画面サイズが変わって親要素の幅が動的に変化しても、レイアウトのバランス（比率）が崩れないことです。特に、横に並べるメニューやコンテンツの幅を調整する際に非常によく使われます。


<style>
    /* 親要素（グレーの大きな箱） */
    .parent-box {
        width: 100%; /* 画面いっぱいに広がる */
        background-color: #f0f0f0;
        padding: 20px;
        box-sizing: border-box;
    }

    /* 子要素（緑色の可変する箱） */
    .child-box {
        width: 60%; /* 親要素の幅に対して60%の大きさに自動調整 */
        background-color: #90ee90;
        padding: 15px;
        border: 2px solid #2e8b57;
        text-align: center;
    }
</style>

<div class="parent-box">
    <div class="child-box">
        親要素の60%の幅です
    </div>
</div>

ブラウザ表示

上記の例では、外側のグレーの箱（親要素）の幅が変わると、中の緑色の箱も常にその6割の長さをキープします。「固定のpx（ピクセル）」で指定してしまうと画面からはみ出す原因になりますが、%を使うことで、どんなデバイスでも「ちょうどいい比率」を保つことができるようになります。

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>

ブラウザ表示