2026年のHTML・CSSで押さえておきたい変更点

CSS
2026.06.25

2026年のHTML・CSSでは、JavaScriptやSassに頼っていた処理の一部を、標準のHTML・CSSだけで書ける場面が増えています。

特にCSSでは、コンテナクエリ、CSS Nesting、@layer、:open、contrast-color() など、レイアウトやUIを作るための機能が増えています。

HTMLでは、popover属性のように、簡単な開閉UIをHTMLだけで作れる機能も使いやすくなっています。

この記事では、2026年時点で押さえておきたいHTML・CSSの変更点を紹介します。

Baselineを見て使える機能を判断する

新しいHTML・CSSの機能を見るときは、Baselineを確認すると判断しやすくなります。

Baselineは、その機能が主要ブラウザでどれくらい使えるかを示す目安です。

MDNやweb.devでは、機能ごとにBaselineの対応状況が表示されています。

新しい機能を使う前に、以下のような表示を確認します。

Baseline Newly available
Baseline Widely available
Limited availability

「Newly available」は、主要ブラウザの最新バージョンでは使える状態です。

「Widely available」は、より広い環境で使いやすい状態です。

実際のサイトで使う場合は、対象ユーザーのブラウザ環境も確認しておきます。

CSS Nestingで入れ子のCSSを書ける

CSS Nestingは、CSSを入れ子で書ける機能です。

これまではSassやSCSSで使うことが多かった書き方ですが、現在は標準のCSSでも使えるようになっています。

従来のCSSでは、次のようにセレクタを毎回書いていました。

.card {
  padding: 20px;
  border: 1px solid #ddd;
}

.card h2 {
  font-size: 24px;
}

.card p {
  line-height: 1.8;
}

CSS Nestingを使うと、関連するスタイルをまとめて書けます。

.card {
  padding: 20px;
  border: 1px solid #ddd;

  h2 {
    font-size: 24px;
  }

  p {
    line-height: 1.8;
  }
}

.card の中で使う見出しや本文のスタイルを、ひとまとまりで管理できます。

ただし、入れ子を深くしすぎると読みづらくなります。

.card {
  .inner {
    .content {
      .title {
        font-size: 24px;
      }
    }
  }
}

このように階層が深くなると、あとから修正しにくくなります。

CSS Nestingは、関連するスタイルをまとめたいときに使うのが扱いやすいです。

コンテナクエリで親要素の幅に合わせたCSSを書ける

コンテナクエリは、画面全体の幅ではなく、親要素などのコンテナのサイズに応じてCSSを変える機能です。

従来は、レスポンシブ対応で @media を使うことが多くありました。

@media (max-width: 768px) {
  .card {
    flex-direction: column;
  }
}

@media は画面幅を基準にします。

一方、コンテナクエリは、要素が置かれている場所の幅を基準にできます。

.article-list {
  container-type: inline-size;
}

@container (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

同じカードでも、広いエリアに置いた場合と、サイドバーのような狭いエリアに置いた場合で表示を変えられます。

部品単位でレスポンシブ対応を考えられるため、カード、商品一覧、記事一覧などで使いやすい機能です。

Container style queriesでスタイルを条件にできる

2026年の変更点として、Container style queriesも押さえておきたい機能です。

通常のコンテナクエリは、コンテナの幅や高さを条件にします。

Container style queriesでは、コンテナに設定されたスタイルを条件にできます。

たとえば、親要素に設定したカスタムプロパティを条件にして、子要素の見た目を変えるような使い方ができます。

.card-area {
  --theme: dark;
  container-name: card-area;
}

@container style(--theme: dark) {
  .card {
    background: #222;
    color: #fff;
  }
}

テーマや状態に応じて、CSS側で見た目を切り替えたい場合に使える機能です。

ただし、新しい機能なので、実際に使う前にブラウザ対応は確認しておきます。

@layerでCSSの優先順位を管理しやすくなった

@layer は、CSSの優先順位をレイヤーとして管理できる機能です。

CSSでは、あとから読み込まれたスタイルや、詳細度の高いセレクタが優先されます。

そのため、CSSが増えてくると、どのスタイルが優先されるのか分かりにくくなることがあります。

@layer を使うと、CSSを役割ごとに分けて優先順位を決められます。

@layer reset, base, components, utilities;

@layer base {
  body {
    font-family: sans-serif;
  }
}

@layer components {
  .button {
    padding: 12px 20px;
    border-radius: 6px;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}

先にレイヤーの順番を指定しておくと、CSSの管理がしやすくなります。

大きめのサイトや、CSSファイルが増えてきたサイトでは便利です。

:openで開いている要素にスタイルを当てられる

:open は、開いている状態の要素にスタイルを当てるためのCSS擬似クラスです。

たとえば、details 要素が開いているときだけ見た目を変えたい場合に使えます。

<details>
  <summary>詳しく見る</summary>
  <p>ここに詳細内容が入ります。</p>
</details>

details:open {
  border: 1px solid #333;
  padding: 16px;
}

これまでは、開閉状態に合わせてクラスを付けたり、JavaScriptで制御したりすることがありました。

:open を使うと、開いている状態に対するスタイルをCSSだけで書きやすくなります。

popover属性で簡単なポップオーバーを作れる

HTMLでは、popover 属性も押さえておきたい機能です。

popover を使うと、JavaScriptを書かなくても、簡単なポップオーバーを表示できます。

<button popovertarget="menu">メニューを開く</button>

<div id="menu" popover>
  <ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/about">このサイトについて</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</div>

button の popovertarget に、開きたい要素の id を指定します。

クリックすると、指定した要素がポップオーバーとして表示されます。

簡単なメニュー、補足説明、ヘルプ表示などで使いやすい機能です。

ただし、モーダルダイアログのように、画面全体の操作を止めたい場合は dialog 要素の方が向いています。

contrast-color()で文字色を自動調整できる

contrast-color() は、背景色に対して読みやすい文字色を選ぶためのCSS関数です。

たとえば、背景色が変わるボタンやラベルで、文字色の指定を自動化したい場合に使えます。

.badge {
  background-color: var(--badge-color);
  color: contrast-color(var(--badge-color));
}

背景色ごとに、白文字にするか黒文字にするかを手動で決める必要が減ります。

テーマカラーを切り替えるサイトや、ユーザーが色を選べるUIで便利です。

ただし、対応状況は確認してから使います。

新しいCSS単位が増えている

2026年には、文字の大きさや字形に関係するCSS単位も増えています。

代表的なものに、以下があります。

rcap
rch
rex
ric

ric は、日本語・中国語・韓国語などのCJK文字を扱うレイアウトで使いやすい単位です。

たとえば、日本語の文字幅を基準にして余白や幅を調整したい場合に使えます。

.note {
  padding-inline: 2ric;
}

英語だけでなく、日本語サイトの組版でも使える場面があります。

displayを2つの値で書ける

display は、2つの値で書く方法も使いやすくなっています。

たとえば、これまで次のように書いていたものがあります。

.box {
  display: inline-flex;
}

2つの値を使うと、次のように書けます。

.box {
  display: inline flex;
}

最初の inline は外側の表示形式、次の flex は内側の表示形式を表します。

つまり、その要素自体はインラインとして扱い、中の要素はflexレイアウトで並べる、という意味です。

inline-flex や inline-grid の意味を、より分かりやすく書ける形です。

2026年にHTML・CSSを学ぶならどこを押さえるか

2026年時点でHTML・CSSを学ぶなら、以下の機能は確認しておきたいところです。

CSS Nesting
@layer
コンテナクエリ
Container style queries
:open
popover属性
contrast-color()
新しいCSS単位
displayの2値構文

すべてを一度に使う必要はありません。

まずは、CSS Nesting、コンテナクエリ、@layer あたりから押さえると、普段のコーディングでも使いやすいです。

popover や :open は、メニューや開閉UIを作るときに役立ちます。

contrast-color() や新しいCSS単位は、色や文字まわりの調整を細かく行いたい場合に使えます。

まとめ

2026年のHTML・CSSでは、標準機能だけでできることが増えています。

CSS Nestingを使えば、関連するスタイルをまとめて書けます。

コンテナクエリを使えば、画面幅ではなく要素の幅に合わせたレスポンシブ対応ができます。

@layer を使えば、CSSの優先順位を管理しやすくなります。

popover や :open を使えば、開閉UIの実装もシンプルになります。

新しい機能を使うときは、MDNやweb.devでBaselineの対応状況を確認してから使うようにします。

タイトルとURLをコピーしました