- HOME
- > BLOG CATEGORY
- 【jQuery】レスポンシブデザインでPC画像とスマホ画像を切り替える方法

- お知らせ
- NEW 2023.11.23 【Photoshop】水彩風のテクスチャー作成ついて解説
- お知らせ
- 2023.11.16 【Photoshop】写真の一部を消す加工ついて解説
- お知らせ
- 2023.11.09 【Photoshop】鉛筆風フォントの作成について解説
こんな方に読んでほしい
[記事の内容]
以前でしたら、
スマートフォンよりPCの方を考えてデザインをする
現在でしたら、
PCよりスマートフォンの方を考えてデザインする時代になってきております。
私もブログを書いてますが、スマートフォンが73.6%、PCが26.4%
約7割の方がスマートフォンで見てくれてますね!ありがとうございます。
約7割も、やはりSNSの普及が要因なのではないでしょうか。
でわ、本題に入って行きましょう。
<img src="../pc_img.jpg" alt="PC画像" class="pc_img">
<img src="../sp_img.jpg" alt="スマートフォン画像" class="sp_img">
html記述してる際にクラス名に注目してください。
PCの場合:class=”pc_img”
スマートフォンの場合:class=”sp_img”
このクラス名は次のCSSにてご説明いたします。
/* PCで見た際にはpc画像を表示する */
.pc_img {
display: block;
}
/* PCで見た際にはスマートフォン画像は非表示する */
.sp_img {
display: none;
}
@media screen and (max-width:736px) {
/* スマートフォンで見た際にはpc画像は非表示する */
.pc_img {
display: none;
}
/* スマートフォンで見た際にはsp画像を表示する */
.sp_img {
display: block;
}
}
<img src="../pc_img_pc.jpg" alt="PC画像" class="switch" />
最初にご紹介したCSSを使う場合とは違い、
注目するポイントは2点です。画像のパスに_pcとクラス名にswitchを記述しております。
またスマートフォン用は今回は記述いたしましせん。
$(function() {
// 切り替える対象にclass属性。
var $elem = $('.switch');
// 切り替えの対象のsrc属性の末尾の文字列。
var sp = '_sp.';
var pc = '_pc.';
// 画像を切り替えるウィンドウサイズ。
var replaceWidth = 768;
function imageSwitch() {
// ウィンドウサイズを取得する。
var windowWidth = parseInt($(window).width());
// ページ内にあるすべての`.switch`に適応される。
$elem.each(function() {
var $this = $(this);
// ウィンドウサイズが768px以上であれば_spを_pcに置換する。
if(windowWidth >= replaceWidth) {
$this.attr('src', $this.attr('src').replace(sp, pc));
// ウィンドウサイズが768px未満であれば_pcを_spに置換する。
} else {
$this.attr('src', $this.attr('src').replace(pc, sp));
}
});
}
imageSwitch();
// 動的なリサイズは操作後0.2秒経ってから処理を実行する。
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
imageSwitch();
}, 200);
});
});
今回はこれで以上です。
2022.05.24
2022.05.10
2022.05.06
2022.04.26
![]() |
【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート) 新品価格 |
2023.11.23
2023.11.16
2023.11.09
2023.10.26
2023.10.12
2023.09.28
2023.06.15
2022.06.30
2020.03.22
2020.03.06
© 2023 shu-naka-blog