JavaScript

JavaScriptで横幅によって画像を切り替える方法

PCの時、スマホの時、タブレットの時で画像を切替えたい時がありますよね。
CSSで「display:none;」と「display:block;」で切り替えもできますが、HTML上では2つimgタグが必要になります。
1つ2つなら大丈夫ですが、多くなってくると見るだけで嫌になりそうです。
そこで今回はJavascriptを使用し、横巾で画像を切り会える方法を紹介します。
今回はJavaScriptを使用することでHTML上では1つの記述で、classを追加するだけで専用の画像に切り換わるようにしていきます。

JavaScriptで横幅によって画像を切り替える方法

まずは今回の完成コード

画像に名前をつける

切り替えたい画像の名前は必ず
PCで使用する場合「○○_pc.png」
SPで使用する場合「○○_sp.png」
としてください。
○○の名前は
同一のものにしてください。

ブレイクポイントについて

4行目の数字を変更することでブレイクポイントを変更できます。
仕様に合わせて変更してください。

現状はPCとSPのみですが、if文を追加することでタブレットやもっと細かく設定可能です。

ABOUT ME
シラツキ
当ブログは同人サークル「にんじんみるく」のシラツキが運営する個人ブログです。 同人誌即売会の情報やネタ、技術的な内容など様々なコンテンツを配信しています。 普段はwebサイト作ってる人インターネッツお絵かきマン。 Webサイトの制作、ECサイトの運営、ブログ、イラスト制作など色々やってます。 個人でWeb技術ブログ、趣味のブログ、YouTube活動中。

イラスト制作、webサイト制作、商品のご紹介など様々なお仕事を募集しております! 下記リンクよりお気軽にご連絡ください!

お仕事・ご依頼について

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)