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

CSSのコンテナクエリ(@container)、カスケードレイヤー(@layer)、スクロールスナップ(scroll-snap)、アスペクト比(aspect-ratio)、論理プロパティ(inset-inline)など、覚えておくと便利なCSSのテクニックを紹介します。

これらのCSSの新機能はすべてのブラウザにすでにサポートされています。

ブラウザにすでにサポートされているCSSの新機能を使ったテクニックのまとめ

6 CSS snippets every front-end developer should know in 2023
by Adam Argyle

下記は各ポイントを意訳したものです。
※元サイト様のライセンスにもとづいて翻訳しています。

はじめに

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

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

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

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

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

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

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

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

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

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

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

@containerのサポートブラウザ

@containerのサポートブラウザ

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

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

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

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

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

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

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

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

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

実際の動作は下記のデモをご覧ください。
上から順に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-typeのサポートブラウザ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

gridのサポートブラウザ

gridのサポートブラウザ

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

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

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

簡単に円を実装する方法

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

aspect-ratioは、アスペクト比を設定できるCSSのプロパティです。aspect-ratio: 1;は1:1のアスペクト比になり、幅と高さが1: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のサポートブラウザ

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

aspect-ratioプロパティの知っておくと便利な使い方

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

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

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

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

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

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

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

@layerのサポートブラウザ

@layerのサポートブラウザ

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

CSSの新機能カスケードレイヤー「@layer」

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

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

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

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

実際の動作は下記のデモをご覧ください。

See the Pen
Logical properties example
by web.dev (@web-dot-dev)
on CodePen.

論理プロパティは、すべてのブラウザにサポートされています。

padding-inlineのサポートブラウザ

padding-inlineのサポートブラウザ

margin-blockのサポートブラウザ

margin-blockのサポートブラウザ

inset-inlineのサポートブラウザ

inset-inlineのサポートブラウザ

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

CSSのボックスモデルにおける古い方法とこれからの方法

CSSのボックスモデルにおける古い方法とこれからの方法 -論理プロパティにおける考え方

論理プロパティを徹底解説

CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど

sponsors

top of page

©2024 coliss