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（ビューポート幅）」の略称で、ブラウザの表示領域（画面全体の幅）を基準にしてサイズを決める単位です。2026年現在のモダンなWebデザインでは、スマホやタブレット、PCなど、あらゆるデバイスで直感的にレイアウトを調整するために欠かせない知識となっています。

最大の特徴は、「1vw ＝画面幅の1%」として計算される点です。例えば、幅を「100vw」に設定すれば、どんな画面サイズでもぴったり横幅いっぱいに表示されます。

初心者が迷いやすいポイント：「%」との違い
「%」は、その要素が入っている「親要素の箱」の大きさを基準にします。対して「vw」は、親要素がどれだけ小さくても、常に「ブラウザの画面全体の幅」を基準にするという違いがあります。

以下のサンプルで、画面の半分（50vw）を占めるボックスの動きを確認してみましょう。ブラウザの横幅を広げたり狭めたりすると、それに合わせてボックスの大きさもリアルタイムに変化します。


<style>
    .responsive-box {
        width: 50vw; /* 画面の横幅のちょうど半分 */
        background-color: #ffcccb;
        padding: 20px;
        text-align: center;
        border: 2px solid #ff5f5f;
        margin-bottom: 10px;
    }
</style>

<div class="responsive-box">
    <p>このボックスは常に画面幅の50%です</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
</div>

ブラウザ表示

このように、vwを使うと「スマホで見ると画像がはみ出す」といったトラブルを防ぎやすくなります。文字サイズ（font-size）にvwを適用して、画面の大きさに合わせて文字を拡大縮小させるテクニックも非常に人気があります。

3. media query（メディアクエリ）を使った画面ごとのレイアウト調整

media query（メディアクエリ）とは、Webサイトを見る人の「画面サイズ（横幅）」を判断して、デザインを自動的に切り替える仕組みのことです。2026年現在のWeb制作において、スマホとパソコンの両方で見やすく表示させる「レスポンシブデザイン」には欠かせない最も重要な技術です。

イメージとしては、「画面の大きさに合わせて、ホームページが自動で着替える」ようなものです。例えば、「画面が狭いスマホで見るときは文字を読みやすく大きくし、画面が広いパソコンで見るときは横に並べて表示する」といった指示を、たった一つのファイルで出すことができます。これにより、どのデバイスから見てもプロフェッショナルで使い勝手の良いサイトが実現します。


<style>
/* 共通のスタイル（基本の設定） */
.responsive-card {
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transition: 0.3s;
    background-color: #f8f9fa;
    border: 2px solid #dee2e6;
}

/* 画面幅が600px以下のとき（スマホ向け） */
@media (max-width: 600px) {
    .responsive-card {
        background-color: #ffe0e6; /* 薄いピンク */
        font-size: 16px;
        border-color: #ff85a2;
    }
    .responsive-card::after {
        content: "【現在はスマホ表示サイズです】";
        display: block;
        margin-top: 10px;
        font-weight: bold;
    }
}

/* 画面幅が601px以上のとき（タブレット・PC向け） */
@media (min-width: 601px) {
    .responsive-card {
        background-color: #e0f7fa; /* 薄い水色 */
        font-size: 24px;
        border-color: #4dd0e1;
    }
    .responsive-card::after {
        content: "【現在はPC・タブレット表示サイズです】";
        display: block;
        margin-top: 10px;
        font-weight: bold;
    }
}
</style>

<div class="responsive-card">
    画面の横幅を動かすと、デザインが変わります
</div>

ブラウザ表示

※上記のサンプルでは、@media (max-width: 600px) という記述で「横幅が600pxまではこのスタイルを適用する」という命令を出しています。この「切り替わるポイント」のことをブレイクポイントと呼びます。まずはこの基本を押さえるだけで、どんな画面サイズにも対応できる柔軟なサイト作りへの第一歩を踏み出せます。

4. %・vw・media queryの使い分け：レスポンシブの極意

Webデザインにおいて、要素の大きさを決める「単位」の選択は非常に重要です。2026年現在の検索エンジン（Google）は、単にスマホ対応しているだけでなく、「あらゆる画面サイズでコンテンツが最適に配置されているか（ユーザー体験の質）」を厳格に評価します。

初心者が迷いやすい「%」「vw」「メディアクエリ（media query）」の3つについて、具体的な使い分けと現場で使えるサンプルコードを見ていきましょう。

① %（パーセント）

「親要素」が基準です。箱（親）の中での比率を決めたいときに使います。サイドバーやカラム分けに最適です。

② vw（ビューポート幅）

「画面の横幅全体」が基準です。親要素を無視して画面いっぱいに広げたい大きな画像や背景に適しています。

③ media query

「画面幅の境界線」でルールを変える仕組みです。スマホでは1段、PCでは3段といった構造変化に必須です。

以下のサンプルでは、画面の大きさに応じて変化するボックスを作成しています。実際にどう動くかコードを確認してみましょう。


<style>
    /* 親要素の定義 */
    .container-sample {
        width: 100%;
        background-color: #f8f9fa;
        padding: 20px;
    }

    /* %を使った指定：親要素の半分 */
    .box-percent {
        width: 50%;
        background-color: #0d6efd;
        color: white;
        padding: 10px;
        margin-bottom: 10px;
    }

    /* vwを使った指定：画面幅の20% */
    .box-vw {
        width: 20vw;
        background-color: #198754;
        color: white;
        padding: 10px;
        margin-bottom: 10px;
    }

    /* メディアクエリ：画面が600px以下のときに色と幅を変える */
    @media (max-width: 600px) {
        .box-responsive {
            width: 100%;
            background-color: #dc3545;
            font-size: 14px;
        }
    }
    
    /* PCなど広い画面のとき */
    @media (min-width: 601px) {
        .box-responsive {
            width: 300px;
            background-color: #ffc107;
            color: black;
        }
    }
</style>

<div class="container-sample">
    <div class="box-percent">これは親要素の50%幅です</div>
    <div class="box-vw">これは画面幅の20vwです</div>
    <div class="box-responsive">
        スマホで見ると赤色（100%）、<br>
        PCで見ると黄色（300px）になります
    </div>
</div>

ブラウザ表示

このように、固定の数値（px）ではなく相対的な単位を組み合わせることが、モダンなWeb制作の第一歩です。文字サイズについても、media queryを使って「スマホでは読みやすく大きく、PCではバランスよく」といった微調整を行うことで、Googleからも評価される（SEOに強い）サイト構造を構築できます。

5. 実務でよくあるレスポンシブ対応の具体例

Web制作の現場で頻繁に使われる、具体的で汎用性の高いレスポンシブ対応のパターンを3つ紹介します。プログラミング未経験の方でも、以下のコードをコピーして数値を変えるだけで、スマートフォンとパソコンの両方で綺麗に見えるページが作れます。

① 画像を画面幅に合わせて自動調整する（フルリキッド）

写真などの画像を「width: 100%;」に指定すると、親要素（外側の枠）の幅いっぱいに広がります。画面が小さいスマホでは小さく、大きなPCでは枠に合わせて表示されるため、画像がはみ出す心配がありません。


<style>
.responsive-img {
    width: 100%;    /* 横幅を親要素に対して100%にする */
    height: auto;   /* 高さを自動調整して比率を維持する */
}
</style>

<div style="width: 80%; margin: 0 auto;">
    <p>この画像は画面の幅に合わせて伸び縮みします。</p>
    <img src="/img/sample150-100.jpg" alt="サンプル画像" class="responsive-img">
</div>

ブラウザ表示

② 押しやすいボタンサイズと可変幅の両立

スマホでボタンが小さすぎると押しにくいため、「min-width（最小幅）」を設定して、指でタップしやすいサイズを確保しつつ、「vw（画面幅に対する割合）」を使って画面サイズに応じた柔軟な変化を持たせます。


<style>
.flexible-btn {
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    /* 画面幅の30%の大きさにしつつ、最低でも200pxは確保する */
    width: 30vw;
    min-width: 200px;
}
</style>

<a href="#" class="flexible-btn">詳しくはこちら</a>

ブラウザ表示

③ 記事の読みやすさを守る最大幅とメディアクエリ

PCの大画面で文章が横に長すぎると視線移動が大変で疲れてしまいます。そこで「max-width（最大幅）」で広がりを抑え、さらに「メディアクエリ」を使って、スマホの時だけ読みやすい文字サイズに自動で切り替える手法が一般的です。


<style>
.article-box {
    max-width: 600px; /* パソコンで見てもこれ以上広がらない */
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    font-size: 18px;  /* 基本の文字サイズ */
}

/* 画面幅が480px以下（スマホ）の時の設定 */
@media (max-width: 480px) {
    .article-box {
        font-size: 14px; /* スマホでは文字を少し小さくして収まりを良くする */
    }
}
</style>

<div class="article-box">
    <p>メディアクエリを使うことで、デバイスごとに最適なレイアウトを提供できます。これにより、ユーザーはどの端末からアクセスしてもストレスなく記事を読むことが可能になります。</p>
</div>

ブラウザ表示

このように、固定値ではなく「%」や「vw」といった相対的な単位を使い、必要に応じて「メディアクエリ」で微調整を加えるのが、現代のSEOでも重視されるモバイルフレンドリーなサイト制作のコツです。

2026年最新スキルアップ・実践セミナー