こんにちは。
最近は寒かったり暑かったりでよくわからない天気ですね。
梅雨なのかな?虫も多くなってきたようで、この前は飼っている犬のモフモフ頭に小さな虫が絡まっていてビビりました。
 
本日は、レスポンシブ対応でスマホサイトをつくる際に使える超便利なpictureタグの使い方を紹介したいと思います!
HTML5.1以降、新規に追加された候補画像であるsource要素とimg要素をまとまるためのタグになります。
 
さっそく、使用例を。

 
mediaで画面幅を、srcsetで画像を指定し、その指定された領域で任意の画像が出せるようになります。
また、最後にimgをおくことで、picture・source未対応のブラウザでもimgの画像は表示できる仕組みになっています。
レスポンシブ対応の際にイメージの出し分けをhtmlで出来るのはたいへん助かります!
 
参考文献:HTML5プロフェッショナル認定試験 対策テキスト

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。