モダンCSS機能についてv0でデモを作成しましたのでこちらに記録します。
学習用にv0でデモをつくりました。今回は、モダンなCSS機能のデモ学習の記録として、以下8つの機能について調査・テストを行った内容をまとめます。
① has()セレクター
has()セレクターは、親要素が子要素を特定の条件で持っているかどうかを判定できる新しい疑似クラスです。従来のCSSセレクターとは逆方向の関係(子要素→親要素)でスタイルを当てられるため、CSS設計の幅が広がります。
② Container Query
Container Queryは、要素の親コンテナのサイズや状態に応じてスタイリングを切り替えられる機能です。メディアクエリでは画面全体の幅や高さに依存しますが、Container Queryを使うとコンテナ単位で柔軟にレイアウトを制御できるようになります。
③ スクロール連動アニメーション
スクロールに合わせて要素のアニメーションが動的に変化する機能です。JavaScriptを併用する方法が一般的ですが、最近ではscroll-timelineなどのCSS機能によって、なるべくコードを少なくシンプルに実装できる可能性が注目されています。
④ CSS Trigonometry
CSS Trigonometryは、CSS内で三角関数（sin(), cos(), tan()など）を利用して、要素の座標計算や変形を行える機能です。複雑なアニメーションやレイアウトを、より宣言的に記述できることが期待されています。
⑤ offset-path:path()
要素をアニメーションさせる際に、その軌道（パス）を設定できるプロパティです。offset-pathにpath()を指定することで、任意のSVGパス上を要素が動くアニメーションをCSSのみで実現できます。
⑥ mask-composite
mask-compositeは、マスクレイヤー同士の合成方法を指定できるプロパティです。複数のマスクを組み合わせることで、より高度な視覚効果を実現できます。
⑦ CSSポップオーバー
新しいポップオーバーAPI（popover属性）は、HTMLとCSSを活用して簡易的なモーダルやツールチップを作成できる仕組みです。JavaScriptのコード量を大幅に減らし、アクセシビリティ向上も期待できます。
⑧ スクロールバーのスタイリング
scrollbar-colorやscrollbar-width、そしてWebKit系のベンダープレフィックス（::-webkit-scrollbar）を使って、ブラウザのスクロールバーをカスタマイズできます。デザインに合わせた微調整やブランディングに役立ちます。
CSSをコーディングすることは普段の仕事ではありませんが、今回学んだモダンCSSの機能は、UIを考えるときのアイデアソースとしてとても参考になりました。特にCSSポップオーバーのような簡易的なツールチップの実装方法や、Container Queryでの柔軟なデザイン切り替えは、UI設計を考えるうえで「こんなこともできるんだ」と新しい視点をもらえました。
デザインやUXを検討する立場として、こうした技術の可能性を理解しておくことは必須だと思いました。これからも少しずつ新しい技術に触れながら、日々の仕事に活かしていきたいです。