CSSメディアクエリで実現！PCとスマホで画像を切り替える方法

2025年7月15日

スマホとPC、どちらにも見やすい画像を表示したい！

ホームページを作成していると、こんな悩みが出てくることがあります。

「パソコンだとちょうどいい画像が、スマホでは小さすぎて読めない…」

たとえば、細かい文字が含まれる画像や、横長の図表などは、パソコンでは綺麗に見えても、スマホではつぶれてしまいがちです。そんなときに活躍するのが、メディアクエリを使った画像切り替えのテクニックです。

PAGEKitの「オリジナルCSS」機能と組み合わせれば、同じページ内でスマホ用・PC用の画像を自由に出し分けることができます。

オリジナルCSSとは？

PAGEKitのテンプレートは、初期状態でも整ったデザインが用意されており、初心者でも手軽にホームページを作成できます。その反面、「細かい部分をもう少し変えたい」と思っても、通常の操作では難しい場面もあります。

そんなときに便利なのが、「オリジナルCSS」機能です。

この機能を使えば、テンプレートの構造を壊すことなく、自分だけのカスタマイズを加えることができます。背景色や文字サイズの調整、特定要素の非表示など、幅広い編集が可能です。

メディアクエリとは？

CSSにおけるメディアクエリとは、「画面のサイズや種類に応じてデザインを切り替える」ための仕組みです。

たとえば下記のように記述すると、画面の幅が950px以下の場合（スマホやタブレットなど）に限って、特定のCSSが適用されます。

@media screen and (max-width: 950px) {
.sp-img { display: block; }
.pc-img { display: none; }
}

このように、画像ごとにクラスを設定しておけば、画面サイズによって表示を切り替えることができます。

実践ステップ：画像切り替えのやり方

それでは、実際にスマホ用とPC用の画像を切り替える手順を見ていきましょう。

1．編集ページを開く

まずは画像を表示するページの編集画面を開きます。

2．画像を2枚挿入する

パソコン用の画像と、スマホ用に最適化した画像の2枚をページ内に挿入します。並べて配置しておいて構いません。

3．HTML部分編集でクラス名を付ける

それぞれの画像を選択し、「HTML部分編集」ボタンをクリックします。

< img class="pc-img" style="width: 100%;" src="パソコン用画像のURL" border="0" />
< img class="sp-img" style="width: 100%;" src="スマホ用画像のURL" border="0" />

上記のように、パソコン用画像には「class="pc-img"」という形でクラス名を付与します。

一方、スマホ用画像には「class="sp-img"」というクラス名を記入します。

4．編集を保存して終了する

「保存」ボタンを押して編集を終了します。

5．「背景・カラー」からデザイン編集へ進む

次に、「デザイン編集」画面を開き、「背景・カラー」の編集画面へ進みます。

6．「オリジナルCSS」→「編集」をクリック

「オリジナルCSS」の項目を見つけ、「編集」ボタンをクリックします。

7．オリジナルCSSにメディアクエリを記述

.pc-img { display: block;}
.sp-img { display: none;}

@media screen and (max-width: 950px) {
.pc-img { display: none; }
.sp-img { display: block; }
}

この記述により、パソコンで閲覧する場合はpc-imgが表示され、スマホサイズの画面ではsp-imgに切り替わるようになります。

8．CSSの編集を保存

「設定」ボタンでCSSの編集を終了します。

9．「オリジナルCSSを利用する」にチェックを入れて保存

最後に、「オリジナルCSSを利用する」にチェックを入れて、「変更を反映する」ボタンをクリックします。

表示を確認してみよう

設定が完了したら、実際にページをプレビューしてみましょう。パソコンとスマホで表示される画像が切り替わっているかどうか確認してください。

もし切り替わらない場合は、以下の点をチェックしてみてください。

クラス名が間違っていないか？
CSSの記述にスペルミスがないか？
キャッシュが影響していないか？

応用アイデア：画像だけじゃない！

このメディアクエリのテクニックは、画像だけでなく他の要素にも応用可能です。

スマホ時だけ文字サイズを小さくする
スマホ時は一部のボタンを非表示にする
レイアウトの幅を変える

まずは画像から始めて、慣れてきたら他のカスタマイズにもぜひチャレンジしてみてください。

ホームページかんたん作成のPAGEKit（ページキット）

ホームページを作るのは、むずかしそう。そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。まずは一度、実際の使いやすさを体験してみませんか？

サンプルを作ってみる！