SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.01.15
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【jQuery】レスポンシブデザインでPC画像とスマホ画像を切り替える方法
についての解説になります!

こんな方に読んでほしい

  • CSS・jQueryを学び始めた方へ
  • PCとスマホ画像を別々にデザインしたい。
  • PC画像とスマホ画像を切り替える方法についての解説になります。

レスポンシブデザインで画像を切り替える必要性とは

以前でしたら、
スマートフォンよりPCの方を考えてデザインをする
現在でしたら、
PCよりスマートフォンの方を考えてデザインする時代になってきております。

私もブログを書いてますが、スマートフォンが73.6%PCが26.4%
約7割の方がスマートフォンで見てくれてますね!ありがとうございます。
約7割も、やはりSNSの普及が要因なのではないでしょうか。
でわ、本題に入って行きましょう。

CSSを使ってPC画像とスマートフォン画像を切り替える方法とは

準備するものはPC画像とスマートフォン画像

  • PC画像pc_img.jpg
  • SP画像sp_img.jpg

HTML記述方法

<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にてご説明いたします。

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;
}
}

デモサイトはこちら

メリット
  • 記述方法が簡単ですが、クラス名の付け忘れにはお気を付けてください。
デメリット
  • 毎回、htmlにPC用、スマートフォン用を記述しなければならない。

jQueryを使ってPC画像とスマートフォン画像を切り替える方法とは

準備するものはPC画像とスマートフォン画像

  • PC画像pc_img_pc.jpg
  • SP画像sp_img_sp.jpg

HTML記述方法

<img src="../pc_img_pc.jpg" alt="PC画像" class="switch" />
注目ポイント
・画像名の「_pc _sp」に注目 ・クラス名の「switch」に注目

最初にご紹介したCSSを使う場合とは違い、
注目するポイントは2点です。画像のパスに_pcとクラス名にswitchを記述しております。
またスマートフォン用は今回は記述いたしましせん。

jQuery記述方法


$(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);
  });
});

デモサイトはこちら

メリット
  • htmlにPC用とスマートフォン用に記述しなくよい。
デメリット
  • jQueryの記述が長いですよね、コピペして使用してください。
  • 複数jQueryを使用すると干渉する恐れあり。

まとめ

今回はこれで以上です。

POINT
  • クラス名の付け忘れにはお気を付けてください。
  • PC画像とスマートフォン画像を用意した際に、間違った情報アップしないように!
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top