Web制作者は知っておくと便利！ブラウザにすでにサポートされているCSSの新機能を使ったテクニックのまとめ

サイト構築 -CSS

Post on:2023年4月6日

はじめに

フロントエンドのすべてのデベロッパーが知っておく必要があるCSSの新機能について、それぞれ簡単に解説します。

コンテナクエリの使用方法
scroll-snapによるエクスペリエンスの作り方
CSS Gridによるposition: absolute;の回避方法
簡単に円を実装する方法
カスケードレイヤーの使い方
論理プロパティを使用してより少ないリソースでより多くを達成する

これらのCSSの新機能はすべてのブラウザにサポートされており、すぐに今日から使用できるテクニックです。

コンテナクエリの使用方法

コンテナクエリは10年連続でもっとも実装のリクエストが多かったCSSの機能です。2023年現在、主要ブラウザの安定版にサポートされ、幅のクエリで使用できるようなりました。

CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。

コンテナクエリを使用するには、最初に親要素にcontainerプロパティを与えます。コンポーネントは親の幅に応じて変化するので、ページ全体ではなく、影響を受けるエリアのみを再描画するようにブラウザに伝える必要があります。containerプロパティを使用して、そのことを事前にブラウザに知らせることができます。inline-sizeという値は、親の幅の変更にのみに反応することを意味しています。

クエリには@containerを使用します。

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

.panel {

container: layers-panel / inline-size;

}

.card {

padding: 1rem;

}

@container layers-panel (min-width: 20rem) {

.card {

padding: 2rem;

}

コンテナクエリの動作は下記のデモをご覧ください。
2つのパネルのカラーは、デフォルトでピンク、親要素の幅が20rem以下でシアンに変わります。

See the Pen
Container queries and grid demo by web.dev (@web-dot-dev)
on CodePen.

コンテナクエリは、すべてのブラウザにサポートされています。

@containerのサポートブラウザ

コンテナクエリ（サイズ）のサポートブラウザ

コンテナクエリについて詳しくは、下記をご覧ください。

CSS コンテナクエリ（@container）の基礎知識と便利な使い方を解説

scroll-snapによるエクスペリエンスの作り方

最適に調整されたスクロールのエクスペリエンスは、他とは一線を画すものです。scroll-snapはデフォルトのスクロールUXに合わせながら、意味のある停止ポイントを提供するのに最適な方法です。

scroll-snapを使用するには、overflowプロパティをvisible以外の値（scroll, auto）で使用します。

あとは、スクロールコンテナにscroll-snap-type（スクロールの方向を設定）を設定し、子アイテムにscroll-snap-align（スナップの位置）とscroll-snap-stop（スナップ位置を「通り過ぎる」ことを許可するかどうか）を設定します。

.snaps {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.snap-target {
  scroll-snap-align: center;
}

.snap-force-stop {
  scroll-snap-stop: always;
}

.snaps {

overflow-x: scroll;

scroll-snap-type: x mandatory;

overscroll-behavior-x: contain;

}

.snap-target {

scroll-snap-align: center;

}

.snap-force-stop {

scroll-snap-stop: always;

}

実際の動作は下記のデモをご覧ください。
上から順にscroll-snap-alignが、start, center, endに設定されています。

See the Pen
Snap Align - start, center, & end by web.dev (@web-dot-dev)
on CodePen.

scroll-snapは、すべてのブラウザにサポートされています。

scroll-snap-typeのサポートブラウザ

scroll-snap-alignのサポートブラウザ

scroll-snap-stopのサポートブラウザ

overscroll-behaviorのサポートブラウザ

scroll-snapについて詳しくは、下記をご覧ください。

CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説

CSS Gridによるposition: absolute;の回避方法

セルが1つのCSS Gridで、position: absolute;を回避する方法です。要素を重ねた後は、justifyやalignで配置をします。

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

.pile {

display: grid;

place-content: center;

}

.pile > * {

grid-area: 1/1;

}

下記のデモでは、セルが1つのCSS Gridで要素が積み重なり、アニメーション化されています。

See the Pen
Grid pile by web.dev (@web-dot-dev)
on CodePen.

CSS Gridは、すべてのブラウザにサポートされています。

gridのサポートブラウザ

position: absolute;についてさらに詳しく知りたい場合は、下記をご覧ください。

モダンCSSによる絶対配置（position: absolute;）の削減

簡単に円を実装する方法

CSSで円を実装する方法はたくさんありますが、aspect-ratioを使用する方法が間違いなくもっとも最小限の方法です。

aspect-ratioは、アスペクト比を設定できるCSSのプロパティです。aspect-ratio: 1;は1:1のアスペクト比になり、幅と高さが1:1で描画されます。これにborder-radius: 50%;で正円になります。

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

.circle {

inline-size: 25ch;

aspect-ratio: 1;

border-radius: 50%;

}

実際の動作は下記のデモをご覧ください。円のサイズはinline-sizeで設定できます。

See the Pen
Quick circle by web.dev (@web-dot-dev)
on CodePen.

aspect-ratioは、すべてのブラウザにサポートされています。

aspect-ratioのサポートブラウザ

aspect-ratioについて詳しく知りたい場合は、下記をご覧ください。

CSS aspect-ratioプロパティの基礎知識、便利な使い方、実装に必要なプログレッシブエンハンスメント

カスケードレイヤーの使い方

カスケードレイヤー@layerを使用すると、CSSの詳細度とスタイルの順序をカスケード内で明示的にレイヤー化（階層化）できます。この機能により、後で作成されたバリアントや見つかったバリアントを元のバリアントと一緒にカスケード内の正しい場所に挿入するのにも役立ちます。

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

/* file buttons.css */

@layer components.buttons {

.btn.primary {

…

}

さらに、まったく別のファイルで他のランダムなタイミングで読み込まれたバリアントを追加して、最初からそこにあったかのようにすることもできます。

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

/* file video-player.css */

@layer components.buttons {

.btn.player-icon {

…

}

実際の動作は下記のデモをご覧ください。
新しいスタイルをcomponents.buttonsレイヤーにある残りのスタイルと一緒に配置します。

See the Pen
@layer variant organization by web.dev (@web-dot-dev)
on CodePen.

@layerは、すべてのブラウザにサポートされています。

@layerのサポートブラウザ

@layerについてさらに詳しく知りたい場合は、下記をご覧ください。

CSSの新機能カスケードレイヤー「@layer」CSSをレイヤー化して扱え、今までの実装方法が大きく変わる！

論理プロパティを使用してより少ないリソースでより多くを達成する

CSSのこの新しいボックスモデルを覚えておけば、言語による書き方やドキュメントの方向に合わせて左右のマージンやパディングを変更する必要はなくなります。

padding-leftやmargin-topなどの物理プロパティの使用をやめて、padding-inlineやmargin-blockやinset-inlineなどの論理プロパティを使用すると、ブラウザが適切な方向にしてくれます。

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}