進化するHTML5 IMGタグ

沖縄も遂に梅雨に入りましたね!
雨に濡れて風邪引かないように気をつけましょう!

さて、今回はHTML5で追加されたimgタグに追加する値のsrcset属性が便利なので紹介します。
srcsetタグでできることはratinaのディスプレイで表示する際に大きい画像に自動的に変更されたり、画面サイズに合わせて表示を変えたりと様々なことに使うことができます。

普通imgタグを書くときは、
<img src=”abcd.jpg” alt=”イメージ”>
で表示させたい画像を指定して行くのが普通の使い方なのですが、これにsrcsetタグを指定して画面サイズを指定していく事ができます。

画面サイズが400px以下や800px以下はちょっと縦長のに変えたりや用途が様々あります。
例えば、、、、、
<img src=”abcd.jpg” srcset=”abcd-m.jpg 600w, abcd-l.jpg 800w” alt=”イメージ”>
こうすることによって、600px以下ではabcd-m.jpg 800px 以降もしくは以上は
abcd-l.jpgが表示されます。
画像を数種類用意しないと行けないですが自分の表示させたい画像をスムーズに切り替える事ができます。

まだ使えないブラウザのバージョンが時々あるので、もうちょいバージョンアップが進めば主流で使えそう!と思いました!!

関連記事

  1. Adobe XD(Preview版)をインストールしてみた!

  2. Khan Academy 日本語

  3. WooCommerce 支払い方法 追加(その1)

  4. MacBook ProとiPhoneとThings

  5. 美浜ハローウィンイベント

  6. WordPress 動的にIDを振る方法(移動ナビ用)