メディアクエリでデバイスごとに画像サイズを調整する方法！初心者でもわかるレスポンシブ対応完全ガイド

メディアクエリでデバイスごとに画像サイズを調整する方法

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

生徒

「パソコンの画面で作ったホームページをスマートフォンで見ると、写真のサイズが大きすぎてはみ出てしまうのですが、どうすればいいですか？」

先生

「それはメディアクエリという仕組みを使うことで、スマホやタブレットやパソコンなど、それぞれの画面の大きさに合わせて写真の大きさを自動的に変えることができるようになりますよ。」

生徒

「プログラミング未経験の私でも、画面のサイズごとに写真を上手に調整するやり方を自分で使いこなせるようになるでしょうか？」

先生

「それでは、基本的な仕組みから具体的な書き方までを順番に楽しく見ていきましょう！」

1. メディアクエリの基礎知識とレスポンシブデザインの重要性

現代のインターネットの世界では、自宅で使う大きなパソコンから、外出先で手軽に見るスマートフォンやタブレットまで、実に多様な電子機器を通じてウェブサイトが閲覧されています。このようなどの端末で見ても画面の表示が綺麗に最適化される仕組みのことをレスポンシブデザインと呼び、その中心的な役割を担うのがメディアクエリというCSSの強力な機能です。メディアクエリを活用すると、見ている人の画面の横幅の広さを自動的に察知し、その条件にぴったり合ったデザインの指示を切り替えることができるようになります。プログラミング未経験でパソコンの操作に不慣れな方であっても、基本的なキーワードや仕組みを一つずつ順番に学んでいくことで、どんな画面サイズでも美しく表示されるウェブページを自分の手で作り上げることができるようになります。

2. パソコンとスマートフォンで画像サイズを切り替える基本の書き方

メディアクエリを使って画面の幅ごとに写真の大きさを変更する際、まずは基本となる構文のルールをしっかりと覚えることが大切です。CSSのコードの中に専用の条件式を書き、指定した横幅よりも狭くなったときや広くなったときに、画像タグの幅や高さを変えるための指示を記述していきます。例えば、普段は大きく表示されている写真を、スマートフォンのような小さな画面のときだけは画面いっぱいに収まるように小さく調整するといったことが自由自在に行えるようになります。初期状態の設定と画面の幅に応じた切り替えの設定を組み合わせることで、ユーザーにとって見やすく親切なホームページを簡単に構築することが可能になります。


<style>
    .mq-sample-img {
        width: 300px;
        height: 150px;
        object-fit: cover;
    }
    @media (max-width: 600px) {
        .mq-sample-img {
            width: 150px;
            height: 100px;
        }
    }
</style>

<div style="border: 1px solid #ddd; padding: 10px;">
    <img src="/img/sample150-100.jpg" alt="基本メディアクエリ画像" class="mq-sample-img rounded">
</div>

ブラウザ表示

3. マックスウィズを使ってスマホ表示のときに画像を自動縮小する方法

メディアクエリの条件設定で最も頻繁に使われるのが、マックスウィズと呼ばれる、指定した数値以下の画面幅のときに効力を発揮する便利なプロパティです。ウィズとは横幅を意味する言葉であり、マックスウィズと組み合わせることで、例えば画面の横幅が六百ピクセルより小さくなった場合にのみ写真のサイズをギュッと縮小させるといった細かい調整を行うことができます。スマートフォンでホームページを見たときに、写真が大きすぎて画面からはみ出してしまい横スクロールが発生してしまうという失敗を防ぐために、この設定は欠かせない非常に重要なテクニックとなっています。初心者の方であっても、この条件の書き方さえ覚えてしまえば、スマホ対応の美しいウェブデザインを自信を持って作れるようになります。


<style>
    .mq-max-box img {
        width: 250px;
        height: 150px;
        object-fit: cover;
    }
    @media (max-width: 768px) {
        .mq-max-box img {
            width: 120px;
            height: 80px;
        }
    }
</style>

<div class="mq-max-box" style="border: 1px solid #ddd; padding: 10px;">
    <img src="/img/sample150-100.jpg" alt="マックスウィズ画像" class="rounded">
</div>

ブラウザ表示

4. ミニウィズを使ってパソコン表示のときに画像を大きく調整する方法

マックスウィズとは反対に、指定した数値以上の広い画面のときだけに特定のデザインを適用させたい場合に活躍するのが、ミニウィズという条件指定の仕組みです。ミニウィズを使用することで、例えばスマートフォンの小さな画面を基準にして標準の画像サイズを小さく設定しておき、パソコンなどの大きな画面で見られたときだけ写真をダイナミックに大きく表示させるといったアプローチが可能になります。このように、小さな画面を優先してデザインを組み立てていく考え方をモバイルファーストと呼び、現在のウェブ制作において非常に主流となっている効率的な制作手法です。一つのプロパティの言葉の意味を正しく理解し、画面の広さに応じた変化を自由にコントロールできるようになりましょう。


<style>
    .mq-min-box img {
        width: 120px;
        height: 120px;
        object-fit: cover;
    }
    @media (min-width: 768px) {
        .mq-min-box img {
            width: 200px;
            height: 200px;
        }
    }
</style>

<div class="mq-min-box" style="border: 1px solid #ddd; padding: 10px;">
    <img src="/img/sample120-120.jpg" alt="ミニウィズ画像" class="rounded">
</div>

ブラウザ表示

5. パーセント指定とマックスウィズを組み合わせて画像を柔軟に変形させるコツ

デバイスの画面サイズが変わるたびに画像が綺麗に伸び縮みするようにするためには、固定のピクセル数ではなく、パーセント単位を使った柔軟なサイズ指定とメディアクエリを上手に組み合わせるのがとても効果的です。例えば、画像の幅を親要素に対して百パーセントに設定しておき、さらにマックスウィズプロパティでこれ以上は大きくならないという上限のサイズを決めておくことで、どんなに画面の大きさが変わっても写真が崩れることなく綺麗にフィットするようになります。固定値だけに頼らないこの柔軟な設計方法を取り入れることで、ユーザーがどんな端末からアクセスしてきても常に最適な見栄えを保つことができるため、ワンランク上の高品質なホームページを仕上げることが可能になります。


<style>
    .mq-flexible-container {
        max-width: 400px;
        border: 1px solid #ddd;
        padding: 10px;
    }
    .mq-flexible-container img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
</style>

<div class="mq-flexible-container">
    <img src="/img/sample150-100.jpg" alt="柔軟変形画像サンプル" class="rounded">
</div>

ブラウザ表示

6. 実践的なWeb制作で役立つメディアクエリ活用の注意点とSEO対策

ここまでの学習内容をしっかりと振り返りながら、実際のブログ記事やホームページ制作の現場において、メディアクエリを使用して画像サイズを調整する際の重要な注意点とSEO対策のポイントを整理していきましょう。スマートフォン用とパソコン用で画像を切り替える際、過剰に大きな画像ファイルをそのままスマートフォンに読み込ませてしまうと、ページの表示速度が遅くなってしまい検索エンジンの評価に悪影響を及ぼす原因になります。そのため、適切な軽さに最適化された画像を使用しつつ、それぞれの端末ごとに最適な表示サイズをメディアクエリで指定することが大切です。また、検索エンジンが画像の内容を正しく認識できるように必ず適切なalt属性を記述し、ユーザービリティの向上と検索順位アップの効果をしっかりと両立させましょう。基本の書き方を正しく理解し、日々のウェブ制作の中で実際に手を動かして試しながら、自分だけの素敵なレスポンシブデザインを楽しく作り上げていきましょう。


<style>
    .mq-practice-box img {
        width: 180px;
        height: 120px;
        object-fit: cover;
    }
    @media (max-width: 500px) {
        .mq-practice-box img {
            width: 100px;
            height: 70px;
        }
    }
</style>

<div class="mq-practice-box" style="border: 1px solid #ddd; padding: 10px; background: #fff;">
    <img src="/img/sample150-100.jpg" alt="実践仕上げサンプル画像" class="rounded">
</div>

ブラウザ表示