container query と svh を使ってCSSだけで Hero Image を作ってみる

概要

全ブラウザ対応したcontainer queryは何がスゴイのか？ を読んで試してみたくなったのでこのブログのトップページに Hero Image を入れてみた

完成したもの

横長

縦長

実際に動いているものは

所感

• container query は media query より直感的な気がする
  • いちいち画面幅を考えるより、コンテナのサイズを気にするほうが考えやすい
• svh は神。iOSで画面の高さピッタリにならないのでいつもイライラしてた
• ついでに Intersection Observer を使って要素が画面外に出たら代替要素を表示する で試してた方法で、Hero Image が View Out したらヘッダが出るようにしてみた。なかなかいいのでは無いかと自画自賛してる。