Category : HTML5
マルチデバイス対応サイトを作る際に悩みがちなのが画像の扱い。
各デバイスに最適化してものを用意しないとサイト全体のデータ容量が大きくなってしまい、ユーザビリティ的にもSEO的にも良くありません。
デバイスごとに表示させる方法はjavascriptを用いた方法、CSSを用いた方法などいくつかのやり方がありますが、<picture>タグを用いればJSもCSSも使わずシンプルに実現させることが可能です。
例：
スマホ向け表示
上記例ではwidthが499ピクセル以上のデバイス上ではPC向けの画像(1行表示)の「textPC.gif」が表示され、それ以下のサイズのデバイスではスマホ向けの画像(2行表示)の「textSP.gif」が表示されます。
とても便利な<picture>要素ですが、デフォルトではIEには対応していません(お約束)。
IEに対応させるには対応するJSが必要です。
対応するJSをこちらからダウンロードしてください
ダウンロードしたフォルダから「picturefill.js」、または「picturefill.min.js」のどちらかをコピーし、任意の場所に格納し、<head>~</head>内に記述すれば準備完了です。
人気の記事 : 
