CSS Advent Calendar 2025

雰囲気でCSSを使っている方向け。2025年12月の今、新たに実務で使えるCSSをキャッチアップしよう。

Last updated at 2025-12-03Posted at 2025-12-03

最初に

CSSの新機能追加のニュースを見て便利そうだと感じでも、実際に実務で使えるのはいつなんだ？と臆してしまうのが正直なところだと思います。

今回は「Baseline」を前提に、最近使っても大丈夫になったと思われる機能についてまとめています。

Baseline（Web Platform Baseline）について詳しく知りたい方は、こちらの記事をぜひご参照ください。

Baselineには大きく2つの段階があります。

Newly available これは主要ブラウザのほぼ全てにおいて、最新バージョンでは使えるようになった機能になります。MDNやCan I useでは青いアイコンが設定されています。
Widely available これは主要ブラウザを利用する多くの人が使えるようになった機能です。Newly availableになってから30ヶ月（2年半）以上経過していることが目安になります。MDNやCan I useでは緑のアイコンが設定されています。

下記のようなScssのような書き方が、CSSでもできるようになっています。

.foo {
    margin-top: 10em;
    & .bar {
        margin-bottom: 20em;
    }
}

補足すると上のコードは、下記のコードと同じ意味になります。

.foo {
    margin-top: 10em;
}
.foo .bar {
    margin-bottom: 20em;
}

& 入れ子セレクターは、Baseline 2023でNewly availableになっています。

一方で下記のような書き方はCSSではできないので要注意です。

.component {
    &__child-element {
    }
}

かつてCSSでは、子要素によって親要素が変わるという仕組みはありませんでした。:has()を使うことによって下記のように、子供に img を持つ h1 の、h1 にスタイルを当てるということが可能になっています。（もはやh1の中の見出しを画像見出しにするケースも少ないとは思いますが。）

h1:has(img) {
    margin-bottom: 0;
}

# :has()は、Baseline 2023でNewly availableになっています。

:is() と :where() は一見似ています。

h1:is(.foo .bar) {
    margin-top: 10em;
}
h1:where(.foo .bar) {
    margin-bottom: 10em;
}

は、下記のコードとほぼ同じになります。

h1.foo,
h1.bar {
    margin-top: 10em;
}
h1.foo,
h1.bar {
    margin-bottom: 10em;
}

「ほぼ」と書いたのは、正確に言うと詳細度が異なります。

:is() は、引数の中で最も高い詳細度が維持されます。

:where() は、詳細度は0になります。つまり基本のスタイルを調整して、あとから個別カスタマイズしたいときなどに使い勝手が良いです。

:is() と :where() は、Baseline Widely availableです。

カードを並べるようなレイアウトで、1つのカードに上から「画像」「タイトル」「本文」「ボタン」みたいなレイアウトはよく登場すると思います。

その際、上のカードのパターンだとFlexbox と、最下段にmargin-top: auto; とかを使って、各要素の高さをどうにかして揃えるということをしていたはずですが、「タイトル」が複数行のものを許容しようとすると「本文」の上部が揃わないということが発生していたはずです。

subgridを使うと2箇所以上の高さ可変の要素を許容することができるようになるため、カードレイアウトの制御がかなりしやすくなりました。

subgridは、Baseline 2023でNewly availableになっています。

下記のように書くとページ内リンクのスムーススクロールがCSSだけで完結出来ます。

.foo {
  scroll-behavior: smooth;
}

ページ内リンクは、通常だといきなりジャンプしてしまい、自分のいる位置を見失いがちですが、スムーススクロールを入れると自動スクロールしていることがユーザーに伝わるため、体験が良くなります。

scroll-behaviorは、Baseline Widely availableです。

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  overflow: hidden;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.child {
  scroll-snap-align: start;
  height: 100vh;
}

こんな感じに書くと div.child が、良い感じにスライドして、ちゃんと頭出しされるというスタイルです。肝は scroll-snap-typ と scroll-snap-align。JavaScriptを使わなくても吸着っぽい動きができるようになります。

上記の例だと上下のスライドですが、ちゃんと調整すれば左右のスライドにも適用化です。

CSS Scroll Snapは、Baseline Widely availableです。

State of CSS 2025 の Features の項を眺めていても Baseline の緑、青、オレンジが出てきます。

使いやすいもの、使いづらいもの等もありますが、必ずしも緑や青になったからといって使われているわけではなく、中には使い所が理解できれば、便利な機能が実務で使えるようになっていたりもします。

たまにMDNやI can use等を覗いで、ぜひ実務お役立てください。