Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

デバイスサイズで画像の入れ替えをする。Jsを使わずに

画像入れ替え

レスポンシブデザインに対応させる為、デバイス毎に表示する画像を変えたい事もあるでしょう。JavaScriptを使用した方法もありますが、HTMLだけの方法をご紹介します。場合によってはCSSで多少の調整は必要になりますが、画像の入れ替え自体はHTMLだけです。

INDEX

Picture

メディアクエリをそのまま書けます。

<picture>
  <source media="(max-width: 575.98px)" srcset="img/sp.png"> <!--以下なら-->
  <source media="(max-width: 767.98px)" srcset="img/tb.png"> <!--以下なら-->
  <img src="img/pc.png"> <!--それ以外なら-->
</picture>

575.98px以下ならsp.png / 767.98px以下ならtb.png / それ以外ならpc.png

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

CAPTCHA

INDEX
閉じる