pictureタグを使う

画面幅に合わせて異なる画像を表示できるタグに
<picture>タグがあります。

今のところ、レスポンシブでの使い方しか思い当たりませんが、
PC時とSP時で別々の画像を表示できるので、とても便利ですね。

で、これのいいところは
CSSの＠mediaで指定すると
画像を２枚とも読み込まなくてはならないところを、
これなら１枚で済むため、効率的だ、とか。

なるほどね。

こちらの動画を参考にしました。

学校で習ったのは間違っていた

で、コードステップの練習課題で
初めてこのpictureタグがでてきたのですが、
これ、学校で習っていたので、
その時のコードをまんま貼り付けたら・・・

なんと、バリデーションツールでエラーがでてしまいました。

バリデーションツールについて

https://fifties-blog.genzaburow.com/archives/4480

えぇ〜〜〜っ！！

学校で習ったやつだぞ？

貼り付けたコードはこれ、

<!–641px以上の時に表示したい画像の指定–>

<!–640px以下の時に表示したい画像の指定–>

</picture>

で、間違いは

<img> 要素には media 属性を使用できません。media 属性は、<link> 要素や<source> 要素で使用されるもので、画像には適用できません。

なんだとか。ｂｙ　GPTセンセー

CHATGPTセンセーの正解例は

<picture>

  <!– 641px以上の時に表示したい画像の指定 –>

  <source media=”(min-width: 641px)” srcset=”img/pc.jpg” sizes=”100vw”>

  <!– 640px以下の時に表示したい画像の指定 –>

  <source media=”(max-width: 640px)” srcset=”img/sp.jpg” sizes=”100vw”>

  <!– 代替テキストを指定 –>

  <img src=”img/default.jpg” alt=””>

</picture>

でした。

・・・・というわけで、
多分これは学校の先生が間違っていたね。

そんなことも有るんだね。

今回の参考サイト
https://ics.media/entry/13324/

ま、また一つ勉強になりましたな。