CSSの幅指定をマスター！%・vw・emで可変レイアウトを作る方法

幅を%・vw・emなどで指定して可変にする方法

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

生徒

「パソコンで見るとちょうどいい幅なのに、スマホで見ると画面からはみ出したり、逆に小さすぎたりして困っています。」

先生

「それは、幅を『px（ピクセル）』などの固定の数字だけで決めてしまっているからかもしれませんね。」

生徒

「固定じゃない決め方があるんですか？画面の大きさに合わせて自動で変わってほしいです！」

先生

「ありますよ！%、vw、emといった『相対単位』を使えば、どんな画面サイズでも柔軟に伸び縮みするレイアウトが作れます。さっそく学んでいきましょう！」

1. CSSの幅指定における「相対単位」の重要性

Webサイトを作るとき、最も基本となる単位は「px（ピクセル）」です。これは「画面上の点」の数で大きさを決める、定規で測るような固定の指定方法です。しかし、現代のインターネット環境では、巨大なモニターを持つパソコンから、片手で持てる小さなスマートフォンまで、画面の大きさがバラバラです。全ての画面で「300px」と固定してしまうと、スマホでは広すぎたり、パソコンでは寂しく見えたりします。

そこで重要になるのが「相対単位（そうたいたんい）」です。これは「何かと比較して決まる大きさ」のことです。例えば、「親の箱に対して半分」や「画面の幅全体に対して1割」といった具合に指定します。これを使うことで、画面サイズが変わってもレイアウトが崩れず、常に最適な見た目を保つことができるようになります。これがレスポンシブデザインの基礎となる考え方です。

2. 親要素を基準にする「%」の使い方

「%（パーセント）」は、初心者の方にとって最も馴染みのある単位かもしれません。CSSにおけるパーセント指定は、「その要素が入っている親要素（外側の箱）の幅」を基準にします。例えば、親の箱が400pxであれば、その中の要素を「50%」に指定すると200pxになります。

この指定の素晴らしいところは、親の箱が伸び縮みすれば、中の要素も自動的に計算し直されてサイズが変わる点です。Webページ全体を100%として、左側を70%、右側を30%といった具合に分ければ、どんな大きな画面でも常に「7対3」の比率を維持した美しいレイアウトが完成します。


<style>
    .parent-container {
        width: 100%;
        background-color: #ddd;
        padding: 10px;
    }
    .child-box {
        width: 60%; /* 親の幅に対して60%の大きさに伸び縮みします */
        background-color: #007bff;
        color: white;
        padding: 20px;
        text-align: center;
    }
</style>

<div class="parent-container">
    <div class="child-box">親に対して60%の幅</div>
</div>

ブラウザ表示

3. 画面の幅を基準にする「vw」の活用法

「vw（ブイダブリュー）」は、「Viewport Width（ビューポート・ウィズ）」の略です。ビューポートとは、今見ているブラウザの表示領域、つまり「窓のサイズ」のことです。%との最大の違いは、外側の箱がどんなサイズであっても関係なく、「今見ている画面そのものの横幅」を100として計算する点です。

例えば「100vw」と指定すれば、どんな環境でも画面いっぱいの横幅になります。画面を横に分割してデザインしたいときや、画面の端から端まで画像を表示させたいときに非常に重宝します。スマホでもパソコンでも、「画面の半分くらいの存在感を持たせたい」ときは「50vw」と書くだけで解決します。非常に直感的で使いやすい単位です。


<style>
    .full-width-box {
        width: 50vw; /* 画面全体の横幅の半分になります */
        background-color: #28a745;
        color: white;
        padding: 15px;
        margin-bottom: 10px;
    }
</style>

<div class="full-width-box">画面幅の50%（50vw）</div>
<p>画面のサイズを変えても、常に画面の半分をキープします。</p>

ブラウザ表示

4. 文字の大きさを基準にする「em」で余白を整える

「em（エム）」は、少し特殊な単位です。これは「その要素に使われている文字の大きさ（font-size）」を「1」とする単位です。例えば、文字の大きさが16pxであれば、「2em」は32pxになります。一見すると幅の指定には不向きに思えるかもしれませんが、実はとても便利です。

なぜ便利かというと、文字の大きさに合わせて余白や幅を自動調整できるからです。例えば、ボタンの幅をemで指定しておけば、後から「文字を大きくしよう」とデザインを変更したとき、ボタンの枠も文字に合わせて自動的に大きくなってくれます。文字とはみ出しのバランスが崩れないため、メンテナンスが非常に楽になるスマートな指定方法です。


<style>
    .em-sample {
        font-size: 20px; /* 文字を20pxに設定 */
        width: 10em;     /* 20px × 10 = 200px相当の幅になります */
        background-color: #ffc107;
        padding: 10px;
        border: 1px solid #333;
    }
</style>

<div class="em-sample">
    文字の10倍の幅です
</div>

ブラウザ表示

5. 画像を可変にするテクニックとは？

Webサイトで使う画像も、可変にする必要があります。大きな写真をそのまま載せると、スマホの画面を突き抜けて左右にスクロールが必要になってしまいます。これを防ぐには、画像に対して「max-width: 100%;」という指定を使います。「最大でも親の幅までにしてくださいね」という命令です。

また、高さについても「height: auto;」としておくことで、横幅が縮んだときに高さも自動で計算され、写真が縦に伸びたり潰れたりするのを防げます。%やvwを使って親の箱を可変にし、その中の画像を「max-width: 100%」に設定するのが、プロの現場でも使われる最も基本的な「失敗しない画像表示」のルールです。


<style>
    .image-container {
        width: 50%; /* コンテナは親の半分 */
        border: 2px dashed #666;
        padding: 5px;
    }
    .flexible-img {
        max-width: 100%; /* コンテナからはみ出しません */
        height: auto;    /* 縦横比をキープします */
    }
</style>

<div class="image-container">
    <img src="/img/sample120-120.jpg" alt="可変画像" class="flexible-img">
    <p>枠を小さくしても画像ははみ出しません。</p>
</div>

ブラウザ表示

6. 指定を使い分けるコツと注意点

ここまで紹介した単位は、どれか一つだけを使うのではなく、場面に合わせて使い分けるのが正解です。例えば、サイト全体の大きな枠組みには「%」や「vw」を使い、ボタンの中の細かな余白や小さな幅の調整には「em」を使うといった具合です。使い分けができるようになると、CSSのコードがスッキリして、後から修正するのがとても簡単になります。

一つ注意したいのは、「何に対しての割合なのか」を常に意識することです。特に「%」は、親要素の設定を忘れていると、思い通りの幅にならないことがあります。「この箱の親は誰かな？」と確認する癖をつけると、プログラミング初心者の方でもすぐに可変レイアウトをマスターできますよ。まずは実際に、自分のブラウザの幅をマウスでぐりぐりと動かしながら、それぞれの単位がどう動くか試してみることが一番の勉強になります。

7. レスポンシブデザインを成功させるために

「可変にする」ということは、デザインに「遊び（余裕）」を持たせるということでもあります。画面幅が狭くなったときに文字が重ならないか、画像が小さくなりすぎて見えにくくないか。そういった配慮をしながら単位を選んでみましょう。pxという固定の概念から離れて、画面を「動くもの」として捉えることが、プロのWebデザイナーやエンジニアへの第一歩となります。

パソコンを初めて触る方にとっては、こうした単位の計算は少し難しく感じるかもしれません。しかし、今は電卓を使わなくてもCSSが自動で計算してくれる便利な時代です。まずは「%」で半分にしてみる、「vw」で画面いっぱいにしてみる、という簡単な実験から始めてみてください。自分で書いたコードが、画面の動きに合わせてスルスルと形を変える様子を見るのは、プログラミングの醍醐味の一つです。楽しみながら色々な単位に触れていきましょう！

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