PCの時、スマホの時、タブレットの時で画像を切替えたい時がありますよね。
CSSで「display:none;」と「display:block;」で切り替えもできますが、HTML上では２つimgタグが必要になります。
１つ２つなら大丈夫ですが、多くなってくると見るだけで嫌になりそうです。
そこで今回はJavascriptを使用し、横巾で画像を切り会える方法を紹介します。
今回はJavaScriptを使用することでHTML上では１つの記述で、classを追加するだけで専用の画像に切り換わるようにしていきます。
JavaScriptで横幅によって画像を切り替える方法
まずは今回の完成コード
画像に名前をつける
切り替えたい画像の名前は必ず
PCで使用する場合「○○_pc.png」
SPで使用する場合「○○_sp.png」
としてください。
○○の名前は
同一のものにしてください。
ブレイクポイントについて
４行目の数字を変更することでブレイクポイントを変更できます。
仕様に合わせて変更してください。
現状はPCとSPのみですが、if文を追加することでタブレットやもっと細かく設定可能です。
ABOUT ME
