北上研究所

2025年06月19日　検証の感想

Kitakami Yuma Project.のyumaです。

今回は前回の検証や前々回の結果の感想を書きたいと思います。
何を検証したかについては前々回の日記や前回の日記をご覧ください。

いや～HTMLって奥が深いですね。
あと企業のサイトすら本来の使い方じゃない使い方をしてるんですね。

まあYouTubeやAmazonだって完璧に正しいソースかと言われたら違いますからね。
本来の使い方とは違う使い方をするのも仕方ないでしょう。
実際Amazonはそれで不具合が起きていたという。

とりあえず気になっていたことは全て解決しましたし、これで安心して使えますね。
まあここまで大掛かりにやる必要はなかったと思いますが(笑)

個人的にmedia="(max-width:数値)"とmedia="(min-width:数値)"で微妙に異なるのは驚きましたね～。
media="(min-width:数値)"だと数値と同じ位置で切り替わらないので今後はmedia="(max-width:数値)"を積極的に使っていきたいと思います。

というか色んなサイトを見ましたが、ほとんどのサイトがmedia="(max-width:数値)"を使ってるのでこっちにした方が良いでしょう。

ところで今後、どっちのパターンを使いましょうかね。
仕組み的には正しいパターンB、公式サイトなどでも用いられるパターンA。

正しさを求めるならばパターンBでしょう。
ですが今後もパターンAでやっていきたいと思います。

理由はブラウザごとによる挙動の違いがあるからです。
特に大きい画像を読み込み直してくれないSafariみたいなのがいるからです。

そういや一番最初の日記でも<picture>タグに触れてたんですよね。
当時は使ったことない新技術だった<picture>タグが、今はもうたくさん使って何となくでも使えるようになったのは感慨深いですね。

僕が初めて<picture>タグを使ったのはこのサイトのトップページなんですよね。
当時はAVIFとWebPを切り替えて高速化するために使ったんでしたっけ。

とりあえず今後も頑張って行きたいと思います。
それではまた。