2026年のCSS新機能まとめ:JavaScriptがいらなくなる日も近い?

Posted at 2026-07-17

ここ数年のCSSの進化スピードは凄まじく、「これJSでやってたやつじゃん!」という機能が次々とCSSだけで実現できるようになっています。2026年のキーワードはずばり 「脱JavaScript」。ツールチップ、スクロール連動アニメーション、状態に応じたスタイリングなど、これまでライブラリを入れて実装していたものがCSSネイティブで書ける時代になりました。

この記事では、2026年時点で注目すべきCSS新機能を、コード例つきでまとめます。

✅ = 主要ブラウザで利用可能
🚧 = 一部ブラウザで実装中(@supportsでのフォールバック推奨)

1. `if()` 関数:CSSに条件分岐がやってきた 🚧

CSSの値の中に直接条件分岐を書ける if() 関数が登場しました。カスタムプロパティの値に応じてスタイルを切り替えられます。

.button {
  background: if(
    style(--variant: primary): #0066ff;
    style(--variant: danger): #ff3333;
    else: #cccccc
  );
}

これまで「変数の値によってスタイルを変える」にはクラスの付け替えかJSが必要でしたが、宣言的に書けるようになります。

2. カスタム関数 `@function` 🚧

Sassの関数のようなものがネイティブCSSで定義できるようになりました。

:root {
  --box-size: 100px;
}

@function --half(--value) {
  result: calc(var(--value) / 2);
}

.box {
  width: var(--box-size);
}

.box-half {
  width: --half(var(--box-size));
}

calc() の組み合わせを何度も書いていた計算ロジックを共通化できます。プリプロセッサへの依存がまた一つ減りますね。

3. スクロール状態クエリ(scroll-state)🚧

要素が「stuck(固定中)」「snapped(スナップ中)」「scrollable(スクロール可能)」かどうかをCSSだけで判定してスタイルを変えられます。

.navbar-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

@container scroll-state(stuck: top) {
  .navbar {
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

「スクロールしてヘッダーが上部に固定されたら影をつける」という定番UIが、IntersectionObserverなしで実装できます。

4. `corner-shape`:border-radiusの次へ 🚧

角の形状を border-radius 以上に細かく制御できるプロパティです。

.card {
  border-radius: 24px;
  corner-shape: squircle; /* Appleっぽい滑らかな角丸 */
}

.tag {
  corner-shape: bevel; /* 斜めカット */
}

.sci-fi-panel {
  corner-shape: notch; /* 内側への切り欠き */
}

特に squircle(スーパー楕円)は、これまでSVGマスクで頑張って再現していた「iOSアイコンのような角丸」が1行で書けるようになる注目機能です。

5. カスタマイズ可能な `<select>` ✅(一部)

長年の悲願だった「selectボックスの見た目カスタマイズ」がついに可能に。

select {
  appearance: base-select;
}

select::picker(select) {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

これまでselectの装飾のためだけにUIライブラリを入れていたケースは多いはず。ネイティブ要素のままキーボード操作やアクセシビリティを保てるのが大きなメリットです。

6. `text-wrap: balance` / `pretty` ✅

見出しの最後の単語だけが孤立して改行される「泣き別れ」問題を解決します。

h1, h2, h3 {
  text-wrap: balance; /* 行ごとの文字量を均等に */
}

p {
  text-wrap: pretty; /* 本文の孤立行を防ぐ */
}

日本語でも効果があり、指定するだけでタイポグラフィの質が上がるお手軽機能です。

7. すっかり定着した「モダンCSS三種の神器」✅

2026年時点では以下の機能は全主要ブラウザ対応済みで、もはや「新機能」というより「使わないと損」な標準機能です。

コンテナクエリ

ビューポートではなく 親コンテナのサイズ に応じてスタイルを変えられます。コンポーネント設計と相性抜群です。

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 300px) {
  .card {
    display: grid;
    grid-template-columns: 120px 1fr;
  }
}

`:has()` セレクタ

「子の状態に応じて親をスタイリング」できる、いわゆる親セレクタです。

/* 画像を含むカードだけレイアウトを変える */
.card:has(img) {
  grid-template-rows: 200px auto;
}

/* 入力エラーがあるフォームグループを強調 */
.form-group:has(input:invalid) {
  border-color: red;
}

CSSネスト

Sassなしでネストが書けます。

.card {
  padding: 1rem;

  &:hover {
    background: #f3f4f6;
  }

  .title {
    font-weight: bold;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

実務に取り入れるコツ

@supports でフォールバックを書く — 🚧の機能はプログレッシブエンハンスメントとして導入するのが安全です。

@supports (corner-shape: squircle) {
  .card {
    corner-shape: squircle;
  }
}

JS実装済みのUIコンポーネントを1つ置き換えてみる — 既存のスクロール連動処理やアコーディオンをCSSに置き換えるのが一番の学習になります。
Can I Use / MDNで最新の対応状況を確認する — この分野は変化が速いので、実装前のチェックは必須です。

まとめ

2026年のCSSのテーマは「状態を知り、文脈を知り、レイアウトを賢くこなす」こと。数百行のJavaScriptが数行のCSSに置き換わるケースも珍しくなくなってきました。宣言的に書けるということは、コードがシンプルになるだけでなく、パフォーマンスやアクセシビリティの面でもブラウザネイティブの恩恵を受けられるということです。

まずは ✅ の機能から既存プロジェクトに取り入れて、🚧 の機能はサイドプロジェクトで素振りしておくのがおすすめです。

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

2026年のCSS新機能まとめ:JavaScriptがいらなくなる日も近い?

1. if() 関数:CSSに条件分岐がやってきた 🚧

2. カスタム関数 @function 🚧