2022/11/11 (更新日: 2022/11/12)

表示する画像を横幅によって切り替える

実装方針は何個かありそうだったのでまとめてみました。

HTMLで対応する。
JSで対応する。
CSSで対応する。

今回は改修業務でHTMLで区切って対応するのが一番楽そうなのでHTMLで対応する方法でいきたいと思います。（JSやCSSで統一してレスポンスが組み込まれている場合は、同様に実装が好ましいと思います。）

画像でリンクをしたい場合も考慮したコードが下記picutureタグの中はhrefタグが動作しないので、hrefタグはpictureタグの外側に実装する。

     
    <a href="http://" target="_blank">
      <picture>
        <source
          media="(max-width: 375px)"　<!-- 幅375px以下なら表示(スマフォ) -->
          srcset="/img/sp1.jpg"
        ></source>
        <source
          media="(max-width: 768px)"  <!-- 幅768px以下なら表示(タブレット) -->
          srcset="/img/sp2.jpg"
        ></source>
        <img src="/img/menergia_banner/pc.jpg"></img>　<!-- それ以外なら表示 -->
      </picture>
    </a>