

### 概要

[全ブラウザ対応したcontainer queryは何がスゴイのか？](https://speakerdeck.com/tonkotsuboy_com/quan-burauzadui-ying-sita-container-queryhahe-gasugoinoka)  を読んで試してみたくなったのでこのブログのトップページに Hero Image を入れてみた

### 完成したもの

横長
![Imgur](https://i.imgur.com/pc5IkUO.png)

縦長
![Imgur](https://i.imgur.com/aDDrZ8j.png)

実際に動いているものは [https://tech-blog.homura10059.dev/](https://tech-blog.homura10059.dev/) から見れます

### 所感

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

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



### 概要

3カラム構成のページで各カラムの長さが違う場合に、例えば左カラムが画面外に出たら空いた部分に代替要素(ナビゲーションや back to top など)を出したいので [Intersection Observer](https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API) を使って実現できないか試した記録

### できたもの

<iframe height="300" style="width: 100%;" scrolling="no" title="Intersection Observer sample" src="https://codepen.io/o-hayato/embed/YzvJYbO?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/o-hayato/pen/YzvJYbO">
  Intersection Observer sample</a> by o-hayato (<a href="https://codepen.io/o-hayato">@o-hayato</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
- 左カラムが画面外に出たかどうかを監視して、代替要素を表示するようにした
- 代替要素は sticky にしてスクロールに追従するようにしてみた
- ついでに同じイベント拾ってヘッダも追従モードに切り替わるようにしてみた