画面サイズ別にレイアウトを切り替えるテクニック！初心者でもできるレスポンシブWebデザイン

画面サイズ別にレイアウトを切り替えるテクニック

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

生徒

「パソコンで見ると横に並んでいるメニューが、スマホで見ると縦に並んでいるサイトを見かけました。どうやって切り替えているんですか？」

先生

「それは『メディアクエリ』というCSSの技術を使って、画面の幅ごとにデザインを指示しているからですよ。」

生徒

「画面の大きさを自動で判別してくれるんですか？なんだか難しそうですが、私にも書けますか？」

先生

「書き方はとてもシンプルです。条件を指定するだけで、デザインを自由自在に操れるようになりますよ。具体的な方法を見ていきましょう！」

1. 画面サイズに合わせて見た目を変える理由とは？

最近は、スマートフォン、タブレット、ノートパソコン、大きなデスクトップモニターなど、インターネットを見るための道具が非常にたくさんあります。これを「デバイス」と呼びます。それぞれの画面の大きさ（画面サイズ）はバラバラです。パソコン用に作った広い画面のデザインを、そのままスマホの小さな画面で表示すると、文字が小さすぎて読めなかったり、ボタンが押しにくかったりします。

そこで、画面サイズ別にレイアウトを切り替える必要が出てきます。これを「レスポンシブデザイン」と呼び、現代のホームページ作りでは欠かせない技術となっています。見ている人の画面サイズに合わせて「今はスマホだから縦並びにしよう」「今はパソコンだから横に並べよう」とCSSで命令を出してあげるのです。これにより、どんなデバイスでも使いやすいサイトになります。

2. メディアクエリの基本的な書き方を学ぼう

画面サイズを判定してデザインを切り替えるために使うのが「メディアクエリ（Media Queries）」です。CSSの中に「@media」という特別な呪文を書きます。これを使うことで、「もし画面の幅が〇〇ピクセル以下だったら、このデザインにしてね」という条件付きの命令ができるようになります。

例えば、スマホで見ているときだけ背景の色を変えたり、文字の大きさを変えたりすることが可能です。初心者のうちは、難しいことを考えずに「条件に当てはまったときだけ発動する特別な指示書」だと考えてください。この指示書をCSSの下の方に書き加えるだけで、サイトはぐっと使いやすくなります。


<style>
.box-sample {
    background-color: lightgray;
    padding: 20px;
    text-align: center;
}

/* 画面の横幅が600px以下のときだけ適用されるルール */
@media (max-width: 600px) {
    .box-sample {
        background-color: gold;
        font-weight: bold;
    }
}
</style>

<div class="box-sample">
    画面を横に狭くしてみてね！600px以下になると色が変わるよ！
</div>

ブラウザ表示

3. ブレイクポイントの考え方を知ろう

レイアウトを切り替える基準となる画面の横幅のことを「ブレイクポイント」と呼びます。例えば、「スマホとタブレットの境目はどこにするか？」「タブレットとパソコンの境目はどこにするか？」といった境界線のことです。この数値に決まりはありませんが、一般的にスマホなら480px以下、タブレットなら768pxから1024pxあたりが目安にされます。

初心者の人は、まずは「768px」という数字を覚えておくと便利です。これはiPadなどのタブレットの幅によく使われる数字です。768pxより小さければスマホ、それより大きければパソコンやタブレット、といった具合にざっくり二つのグループに分けて考えることから始めましょう。細かく分けすぎると管理が大変になるので、最初はシンプルに二段階くらいから挑戦するのがおすすめです。

4. 横並びを縦並びに変える実践テクニック

最もよく使われるのが、パソコンでは横に並んでいたメニューや画像を、スマホでは縦に並べ替えるテクニックです。これには以前に学習した「フレックスボックス（flexbox）」や「グリッドレイアウト（grid）」が役立ちますが、メディアクエリを使えばその設定を解除したり、方向を変えたりできます。

例えば、パソコン用には横並びの命令を出し、スマホ用のメディアクエリの中では縦に並ぶように命令を上書きします。これにより、スマホの狭い画面でも画像が小さくなりすぎず、上から順番に大きく表示されるようになります。以下のコードで、実際にどのように切り替わるか見てみましょう。


<style>
.flex-menu {
    display: flex; /* パソコンでは横並び */
    gap: 10px;
}
.menu-item {
    flex: 1;
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
}

/* 画面が768px以下のときの指示 */
@media (max-width: 768px) {
    .flex-menu {
        flex-direction: column; /* 縦並びに変更！ */
    }
}
</style>

<div class="flex-menu">
    <div class="menu-item">メニュー1</div>
    <div class="menu-item">メニュー2</div>
    <div class="menu-item">メニュー3</div>
</div>

ブラウザ表示

5. 特定の要素を隠したり表示したりする方法

画面サイズによっては、「このボタンはスマホではいらないけれど、パソコンでは表示したい」といった場合や、逆に「スマホ専用のメニューボタン（ハンバーガーメニューなど）を表示したい」という場合があります。そのようなときは「display: none;」という命令を使います。

display: noneは、その要素を画面から消してしまう命令です。メディアクエリと組み合わせることで、「パソコンでは消しておき、スマホのときだけ表示する」といった出し分けが可能になります。これにより、画面のスペースが限られているスマホでも、情報を整理してスッキリ見せることができるようになります。


<style>
.pc-only {
    display: block; /* パソコンでは表示 */
    padding: 10px;
    background-color: #e2e3e5;
}
.sp-only {
    display: none; /* 最初は隠しておく */
    padding: 10px;
    background-color: #d1ecf1;
}

@media (max-width: 600px) {
    .pc-only {
        display: none; /* スマホでは隠す */
    }
    .sp-only {
        display: block; /* スマホのときだけ表示する */
    }
}
</style>

<div class="pc-only">�� パソコンで見ているときに表示されます</div>
<div class="sp-only">�� スマホで見ているときに表示されます</div>

ブラウザ表示

6. モバイルファーストでコードを効率化しよう

最近のプロの現場では「モバイルファースト」という考え方がよく使われます。これは、最初にスマホ用のシンプルなデザインを書き、後からメディアクエリを使ってパソコン用の豪華なデザインを付け足していく方法です。このとき、条件の書き方が「max-width（〇〇以下）」ではなく「min-width（〇〇以上）」に変わります。

スマホ用のデザインは縦に並べるだけのシンプルなものが多いので、最初にそれを基本として書くことで、全体のコードを短くスッキリさせることができます。初心者の人はどちらの書き方でも大丈夫ですが、「画面が広くなったときに、さらに命令を追加する」というモバイルファーストの方が、複雑なサイトを作るときに頭が整理されやすくなります。


<style>
.card-container {
    padding: 20px;
    background-color: #f8f9fa;
}
.photo-card {
    width: 100%; /* 基本はスマホ向けに幅100% */
    margin-bottom: 10px;
}

/* 画面が992px以上のとき、パソコン向けに調整 */
@media (min-width: 992px) {
    .photo-card {
        width: 300px; /* パソコンでは幅を固定 */
        display: inline-block; /* 横に並べる */
        margin-right: 10px;
    }
}
</style>

<div class="card-container">
    <img src="/img/sample150-100.jpg" class="photo-card" alt="写真">
    <img src="/img/sample150-100.jpg" class="photo-card" alt="写真">
    <img src="/img/sample150-100.jpg" class="photo-card" alt="写真">
</div>

ブラウザ表示

7. ブラウザの検証ツールで表示を確認するコツ

自分の書いたコードが、本当にスマホで正しく見えるか確認するのはとても大切です。でも、わざわざスマホにファイルを送って確認するのは大変ですよね。そんなときは、パソコンのブラウザにある「検証ツール」を使いましょう。画面を右クリックして「検証」を選ぶと、スマホのアイコンが表示されます。

これをクリックすると、パソコンの画面上で「iPhoneで見たとき」「Androidで見たとき」といったシミュレーションができます。また、画面の端をマウスで掴んで、自由に幅を伸び縮みさせることもできます。自分が設定したブレイクポイントの数値で、パッとデザインが切り替わる瞬間を自分の目で確認しながら微調整を行うのが、上達への一番の近道です。

8. 画像やフォントサイズのレスポンシブ対応

レイアウトの配置だけでなく、画像や文字の大きさも切り替えることが重要です。パソコンではちょうどよく見えていた大きな写真は、スマホでは画面の半分くらいを占領してしまいます。また、大きな見出し文字は、スマホだと改行されすぎて読みづらくなることもあります。

メディアクエリの中では、フォールバックの設定と同じように「font-size: 16px;」といった具合にサイズを上書きできます。スマホ向けには文字を少し小さく、画像は画面の幅いっぱいに、といった細かな配慮を積み重ねることで、サイトの完成度は一気にプロに近づきます。パソコン初心者の人も、まずは自分のサイトを「スマホで一番綺麗に見えるようにする」という目標で、メディアクエリを使いこなしてみましょう。

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