CSSのすすめ

こんにちは。masaです。
CSSをやっていると、新しいプロパティや機能を発見した時、それが有用だと大いなる喜びがあります。
喜びすぎて飛び跳ねたい衝動に駆られることもしばしばです。
さて、今回はここ数年で導入されたCSSの新しいプロパティや機能の中でも特に注目すべきものをいくつか紹介します。

1.「:is()」と「:where()」セレクタ

複数のセレクタを簡潔に記述できる擬似クラスです。

・「:is()」は指定されたセレクタの中でマッチするものを選択します。
・「:where()」も同様ですが、「:is()」と違って優先度が低く設定されるので、他のスタイルに影響を与えにくくなっています。

CSS記述例

:is(h1, h2, h3) {
  font-size: 2rem;
}

:where(.class1, .class2, .class3) {
  margin: 0;
}

2.「clamp()」関数

「clamp()」は、あるプロパティの値を、最小値・推奨値・最大値の範囲内に収めるために使用します。
主にレスポンシブデザインにおいて、動的にサイズを調整する場合に便利です。

CSS記述例

/* フォントサイズの例 */
font-size: clamp(1rem, 2vw, 3rem);

この例では、フォントサイズは1remから3remの範囲で、ビューポートの幅に応じて動的に変化します。

3.「aspect-ratio」プロパティ

「aspect-ratio」プロパティは、要素の縦横比を簡単に指定するためのものです。
これまでは、padding hackなどを使っての調整が必要でしたが、このプロパティを使うことで簡単に実装できます。

CSS記述例

/* 16:9 の比率を適用 */
.element {
  aspect-ratio: 16 / 9;
}

4.「scroll-snap」プロパティ

「scroll-snap」は、スクロール中に特定の位置で「ピタっ」と止まるスナップ効果を持たせることができます。
ギャラリーやスライダーのようなページを制作する際に便利そうですね。

CSS記述例

.container {
  scroll-snap-type: x mandatory;
}

.item {
  scroll-snap-align: start;
}

5.「container」クエリ

これまでのメディアクエリはビューポート（ウィンドウ）の幅に基づいてスタイルを変更していましたが、「container」クエリは要素の親コンテナのサイズに基づいてスタイルを変更できる新しい仕組みです。
これにより、コンポーネントベースのレイアウト設計がより柔軟に行えます。

CSS記述例

@container (min-width: 600px) {
  .element {
    font-size: 2rem;
  }
}

6.「env()」関数

「env()」は、デバイスから提供される値を参照するための機能です。
例えば、スマートフォンのノッチ（カメラ領域など）を避けるために使用されます。

CSS記述例

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

7.「accent-color」プロパティ

フォーム要素やインターフェースのアクセントカラーを簡単に変更できるプロパティです。
ユーザーインターフェースの一貫性を保ちながら、デザインのカスタマイズが可能になります。

CSS記述例

input[type="checkbox"] {
  accent-color: #ff6347;
}

8.「backdrop-filter」プロパティ

「backdrop-filter」を使用すると、要素の背後にあるコンテンツに対してフィルター効果を適用できます。
例えば、背景をぼかしてフォーカスを与えるような視覚効果を作り出せます。

CSS記述例

.element {
  backdrop-filter: blur(5px);
}

おわりに

いかがでしたか？
これらのプロパティや機能を活用することで、インタラクティブなUIの実装が簡素化され、デザインの自由度も向上すること間違いなしです。
とても便利で、知ると使ってみたいものばかりですよね。
そしてやはり、Web開発者としては常に最新の技術を学び続けることが重要だと痛感します。
ではまた、次回に乞うご期待！