タグのメディアクエリを使って画像をPC版とSP版切り分ける

HTMLプログラム言語CSSフロントエンド

kitada

公開日2020.08.06

更新日2021.04.21

main_img

HTMLの<picture>ピクチャータグを使えば、CSSやJavaScriptを使わなくても、画像をレスポンシブに切り替えることができる。

https://code-kitchen.dev/html/picture/

⇒読み込まれる画像が1枚で済む

従来のPC版とSP版で用意してcssで表示/非表示で切り分ける方法は、display:noneにしても画像自体はPC版もSP版も読み込まれてしまう。

※IE11では非対応になる問題、picturefill.jsを使う事で解消される。

IE11でもpicture要素を使えるようにするポリフィル「Picturefill.js」

【更新履歴】: 2020.08.06　記事を公開しました。
2020.10.02　IE11対応について追記。

最新記事: タグマネージャーの設定（随時更新）

2021.11.09 WEB・APPSEO対策

mori; メルマガの開封・クリックをGoogleアナリティクスで測定する方法

2021.10.19 WEB・APPテクニックSEO対策

mori; 横スクロールサイトがかっこいいサイト

2021.10.18 WEB・APPテクニックアイデア

mori

カテゴリー: WEB・APP(94); アニメーション(7); テクニック(44); アイデア(17); SEO対策(11)

タグ: UX・UI デザインバックエンドフロントエンド ECサイトサーバー・ドメイン SNS ツール PHP SEO Webツール note JavaScript GoogleTagManager Git Facebook ショップサーブオウンドメディア CSS SearchConsole VScode Instagram お名前ドットコムカラーミー CMS HTML GoogleAnalytics XD プログラム言語 Twitter heteml EC-CUBE WordPress 操作方法アプリ画像関係 Python VBA データベース MySQL Ruby Shopify

メンバー: kitada(29); mori(23); nakano(7); nishimura(31); hatori(7); watanabe(2); titan-suzuki(0)

月別アーカイブ