こんにちは。前原です。
前回の記事の続きです。
→前回の記事
【part1】レスポンシブでも安心！pictureタグで画像置換
前回は「pictureタグというのがあって、レスポンシブにおすすめだよ。」
という内容で、具体的な解説は省いていました。
というわけでまずは使い方を見ていきましょう。
以下がpictureタグを使ったソースです。
ウィンドウサイズを可変させながら以下の画像を見てみてください。
あるブレイクポイントを機に、パッパッと画像が切り替わりますね。
これはcssのメディアクエリーとか、jsを使ってるわけではありません。
htmlソースのみで実行しています。
では、ソースを見ていきましょう。
<picture>
<source media="(min-width: 730px)" srcset="http://cocorofukuoka-com.check-xserver.jp/wp-content/uploads/2017/09/720_500.jpg">
<source media="(min-width: 510px)" srcset="http://cocorofukuoka-com.check-xserver.jp/wp-content/uploads/2017/09/500_260.jpg">
<source media="(min-width: 310px)" srcset="http://cocorofukuoka-com.check-xserver.jp/wp-content/uploads/2017/09/300_300.jpg">
<img src="http://cocorofukuoka-com.check-xserver.jp/wp-content/uploads/2017/09/300_300.jpg" alt="素晴らしい福岡の海と橋の夜景">
</picture>
cssのメディアクエリーの経験がある方なら、「min-width: 730px」の記述にピンと来ると思います。
ウィンドウサイズを変更させると、この「min-width: 730px」とかをブレイクポイントとし、画像が自動で切り替わるということですね。
そして最後、「min-width: 310px」よりも小さいサイズ、つまり、「309px以下のウィンドウサイズ」にすると、最後にimgタグの画像が表示されるというわけです。
でも、320px以下の端末はほぼ無いため、一見imgタグは不要に思えます。
でも、alt要素とかを記述する必要があるため、imgタグは必須です。
pictureタグは画像を表示させる意味がありますから。
