知っておきたい！クリエイティブを加速するCSSの新機能3選

千葉県船橋市のWeb制作会社ノベルティ、動画クリエーター兼エンジニアの川島です。

ウェブサイト制作には欠かせないCSSですが、日々進化を遂げていることをご存知ですか？

つい知っているものばかりを多用してしまいがちですが、実は2023年にはデザイン実装の幅を広げる新しい便利なCSSの機能がたくさん登場しています。

本記事では、制作現場で実際に使用可能な最新CSSセレクタ/CSSルールを3つ紹介していきます。

1. :has() セレクタ

:has()セレクタは、CSSにおける強力な新機能で、特定の子要素を持つ親要素のスタイルを動的に変更できるセレクタです。

これにより、子要素の状態や存在に応じて親要素のデザインを調整することができます。

従来、同様の機能を実現するにはJavaScriptを用いてDOM操作を行う必要がありましたが、:has()を使用することで、純粋にCSSだけで視覚的な効果を追加できるようになります。

article:has(h2) {
  border: 1px solid blue;
}

この例では、article 要素の中に h2 要素が含まれている場合に限り、article 要素に青い枠線が表示されます。

例えば、ニュースサイトやブログなどで、見出しが含まれる記事にだけ特定のスタイルを適用したい場合に有効です。

これにより、ページ全体のデザインに統一感を持たせながら、動的にスタイルを変更できる柔軟なデザインが可能となります。

2. CSSコンテナクエリ

従来のメディアクエリ（@media）は、画面全体のサイズに基づいてスタイルを適用するため、コンポーネントの中の個々の要素に対応するデザインが難しい場合がありました。

CSSコンテナクエリ（@container）は、この制約を克服する新しい機能で、要素自体のサイズや親要素のコンテナサイズに応じてスタイルを変更できます。

これにより、特定の要素やコンポーネントがページ内で占めるスペースに応じたデザインをよりきめ細かく設定することができます。

@container (min-width: 300px) {
  .item {
    font-size: 1.2em;
  }
}

このコードは、コンテナの幅が300ピクセル以上になった場合に、.item の文字サイズを1.2emに設定します。

これにより、例えばサイドバーやカードの大きさに合わせてフォントサイズを調整することで、様々なサイズのコンポーネントに対応した一貫性のあるデザインが可能になります。

3. スクロールタイムラインルール

スクロールタイムラインルールは、ユーザーのスクロールに連動してアニメーションさせるCSSルールです。

これにより、今まではJSを使用しなければ実現させられなかったようなユーザーのページスクロールに応じ変化させるようなアニメーションを簡単に実装することができるようになりました。

@scroll-timeline {
  --timeline: root scroll 1s linear;
}

div {
  animation: fade-in 1s both;
  animation-timeline: var(--timeline);
}

この例では、ユーザーがページをスクロールすると、div 要素が「フェードイン」するアニメーションが発生します。

@scroll-timeline はスクロールの進行状況に基づいてアニメーションのタイミングを設定し、より動的でインタラクティブなデザインを実現します。

例えば、商品一覧ページで商品が表示される際、ユーザーがスクロールするごとに商品がスライドインして表示されるアニメーションを作成できます。このようにして、ユーザーに対して「新しい商品が次々に現れる」感覚を与えることができます。

また、物語やストーリーを伝えるようなページで、スクロールに応じて背景画像やテキストがフェードイン・フェードアウトしたり、パララックス効果と組み合わせることで、没入感のある体験を提供できます。

まとめ

いかがだったでしょうか。

これらの新しいCSS機能を積極的に取り入れることで、よりインタラクティブでなWeb体験を提供し、訪問者の関心を引き付けることができます。

千葉県船橋市のWeb制作会社ノベルティでは、Webサイト制作をはじめ、Webプロモーション支援やアプリケーション開発など、幅広いサポートをご提供しています。Web制作やシステム開発をご検討中の方は、ぜひノベルティにご相談ください！

お問い合わせはこちらから