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

未分類


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

  • 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>