沖縄も遂に梅雨に入りましたね！
雨に濡れて風邪引かないように気をつけましょう！
さて、今回はHTML５で追加されたimgタグに追加する値のsrcset属性が便利なので紹介します。
srcsetタグでできることはratinaのディスプレイで表示する際に大きい画像に自動的に変更されたり、画面サイズに合わせて表示を変えたりと様々なことに使うことができます。
普通imgタグを書くときは、
<img src=”abcd.jpg” alt=”イメージ”>
で表示させたい画像を指定して行くのが普通の使い方なのですが、これにsrcsetタグを指定して画面サイズを指定していく事ができます。
画面サイズが４００ｐｘ以下や８００ｐｘ以下はちょっと縦長のに変えたりや用途が様々あります。
例えば、、、、、
<img src=”abcd.jpg” srcset=”abcd-m.jpg 600w, abcd-l.jpg 800w” alt=”イメージ”>
こうすることによって、600px以下ではabcd-m.jpg 800px 以降もしくは以上は
abcd-l.jpgが表示されます。
画像を数種類用意しないと行けないですが自分の表示させたい画像をスムーズに切り替える事ができます。
まだ使えないブラウザのバージョンが時々あるので、もうちょいバージョンアップが進めば主流で使えそう！と思いました！！