HTML・CSS最新技術10選【2024〜2026年版】｜新機能・トレンド・実務での使い方

みなさんこんにちは！マークアップエンジニアのあらかわです。

私事ですが、今年に入り2人目の育休から復帰しました。2024年に産休に入り、2026年に復帰したので、約2年のブランクです。

久しぶりの仕事復帰は正直かなり不安で、あんなにスラスラ書いていたHTMLでさえ「あれ、どう書くんだっけ…？」と手が止まることも。

そして何より、「この2年でHTML・CSSってどこまで進化したの？」という疑問がありました。

そんなとき頼りになるのが、AIです。

2024年当時は、業務でAIを使う機会はまだ多くありませんでしたが、この2年で開発スタイルは大きく変わりましたよね。

今回はAIを活用して、2024年〜2026年にかけてのHTML・CSS最新技術を整理してみました！同じくブランクのある方や、HTML・CSSを学習中の方にも、新しい発見があれば嬉しいです。

2024年から2026年にかけての【HTML・CSSの最新技術】を教えて！どんなタグやプロパティが追加されたの？

おまかせください。それでは、私が厳選した【HTML・CSS最新技術ベスト10】を見ていきましょう。

2026年のHTML・CSS 最新トレンド

まず押さえてえておきたい2026年時点のHTML・CSSトレンドはこの3つ！

これまでJavaScriptを使わなければできなかったことや、複雑なハックが必要だったレイアウトの多くが、今やHTMLとCSSで実現できるようになっています。

つまり、「マークアップだけでかなりリッチなUIが作れる時代」になっているということです。

JavaScriptに頼らなくていいのは、とても嬉しいですね！（苦手）

技術① 【HTML】dialog（モーダルUI）

「dialog」要素を使うと、モーダルウィンドウや確認ダイアログを手軽に実装できます。
背景の操作を無効化する「モーダル状態」が実現でき、フォーカス管理やEscキーでの閉じる動作もブラウザ側で処理されます。

実装方法

HTML

<!-- command="show-modal" でdialogを開く、commandforでdialogのidを指定する -->
<button command="show-modal" commandfor="my-dialog">利用規約を確認</button>
<dialog id="my-dialog">
  <h2>利用規約</h2>
  <p>こちらが利用規約の内容です。</p>
  <!-- command="close" でdialogを閉じる  -->
  <button command="close" commandfor="my-dialog">閉じる</button>
</dialog>

CSS

/* ::backdropで背景オーバーレイをカスタマイズ */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

これだけでモーダルUIが実装できます。
ただしcommand属性は比較的新しい機能のため、古い環境も考慮する場合は showModal() や close() を使ったJSでの制御が必要です。

HTML

<button id="open-btn">利用規約を確認</button>
<dialog id="my-dialog">
  <h2>利用規約</h2>
  <p>こちらが利用規約の内容です。</p>
  <!--
    form method="dialog" でフォーム送信時にdialogを閉じる。
    閉じる前に処理を挟みたい場合は、JSで close() を実行。
  -->
  <form method="dialog">
    <button>閉じる</button>
  </form>
</dialog>

JavaScript

// showModal() でモーダル表示
document.getElementById('open-btn').addEventListener('click', () => {
  document.getElementById('my-dialog').showModal();
});

対応ブラウザ（2026年5月時点）

• dialog：Chrome 37以降／Safari 15.4以降／Firefox 98以降
• command属性：Chrome 135以降／Safari 26.2以降／Firefox 144以降

参照元
dialog：MDN Web Docs、Can I Use
command属性：MDN Web Docs、Can I Use

技術② 【HTML】details / summary（アコーディオンUI）

「details / summary」要素は、JavaScriptなしでアコーディオンUIを実装できます。
さらに「name属性」を使うと、複数のdetailsをグループ化して「同時に1つだけ開く」排他アコーディオンも、HTMLだけで実現できます。

実装方法

HTML

<!-- 同じname値のdetailsは「1つだけ開く」グループになる -->
<details name="faq">
  <summary>返品はできますか？</summary>
  <p>はい、商品到着後30日以内であれば可能です。</p>
</details>
<details name="faq">
  <summary>送料はいくらですか？</summary>
  <p>5,000円以上のお買い上げで送料無料です。</p>
</details>

CSS

/* 開いているときのsummaryをスタイリング */
details[open] summary {
  color: #2563eb;
  font-weight: bold;
}
/* デフォルトの三角マーカーを消す */
summary {
  list-style-type: none;
}
/* Safari 18.4未満向け */
summary::-webkit-details-marker {
  display: none;
}

対応ブラウザ（2026年5月時点）

• details / summary：すべての主要ブラウザで対応済み
• name属性：Chrome 120以降／Safari 17.2以降／Firefox 130以降

参照元
details / summary：MDN Web Docs、Can I Use
name属性：MDN Web Docs、Can I Use

技術③ 【HTML】Popover API ＋ 【CSS】Anchor Positioning

「Popover API」は、クリックで動的に開閉する小さな表示エリア（ポップオーバー）をHTMLだけで実装できます。
さらにCSSの「Anchor Positioning」を組み合わせると、ボタンなど特定の要素を基準にしてポップオーバーの表示位置を指定することができます。

実装方法

HTML

<!-- popovertarget属性で、表示するポップオーバーのidを指定 -->
<button class="help-btn" popovertarget="my-popover">ヘルプ</button>
<!-- popover属性をつけるだけで、最上位に表示される -->
<div id="my-popover" class="popover" popover>
  ここにポップオーバーの内容が入ります。
</div>

CSS

/* Anchor Positioningでボタンの下に配置 */
.help-btn {
  anchor-name: --btn;
}
.popover {
  position-anchor: --btn;
  position-area: bottom;
}

なお、マウスオーバー型のツールチップ用に「popover="hint"」という値も用意されていますが、2026年5月時点でSafariは未対応となっています。（Chrome 133・Firefox 149以降は対応済み）

対応ブラウザ（2026年5月時点）

• Popover API：Chrome 114以降／Safari 17以降／Firefox 125以降
• Anchor Positioning：Chrome 125以降／Safari 26以降／Firefox 147以降

参照元
Popover API：MDN Web Docs、Can I Use
Anchor Positioning：MDN Web Docs、Can I Use

技術④ 【CSS】:has() 疑似クラス

「:has()」は、子要素や兄弟要素の状態を条件にして、親要素のスタイルを変えられる疑似クラスです。
長らくCSS界で要望の多かった「親セレクタ」がついに実現しました。

実装方法

CSS

/* 画像を含むカードだけ、padding を増やす */
.card:has(img) {
  padding: 1rem;
}
/* 不正な入力を含むフォームグループに、エラー表示 */
.form-group:has(:invalid) {
  border-left: 4px solid crimson;
  background: #fff5f5;
}
/* チェックボックスがチェックされたら、ページ全体をダークモードに */
body:has(#dark-toggle:checked) {
  --bg: #111;
  --text: #fff;
}

対応ブラウザ（2026年5月時点）

Chrome 105以降／Safari 15.4以降／Firefox 121以降

参照元：MDN Web Docs、Can I Use

技術⑤ 【CSS】Container Queries（コンテナクエリ）

「Container Queries（コンテナクエリ）」は、画面幅ではなく親コンテナの幅を基準にスタイルを切り替えられるCSS機能です。
コンポーネント(※)自身が「自分が置かれた場所の広さ」に応じてレイアウトを変えられます。

※コンポーネントとは：ボタンやカードなど、使い回しを前提にした部品のこと

実装方法

HTML

<div class="card-wrapper">
  <article class="card">
    <img src="thumb.jpg" alt="">
    <div class="card-body">
      <h3>記事タイトル</h3>
      <p>記事の概要…</p>
    </div>
  </article>
</div>

CSS

/* 親要素にコンテナを指定 */
.card-wrapper {
  container-type: inline-size;
}
/* 親コンテナが400px以上のときだけ、横並びに */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

対応ブラウザ（2026年5月時点）

Chrome 105以降／Safari 16以降／Firefox 110以降

参照元：MDN Web Docs、Can I Use

▼コンテナクエリはこちらの記事でも詳しく紹介しています。

2024/02/14

CSSの新機能　コンテナクエリを試してみた！

技術⑥ 【CSS】text-wrap: balance / pretty

「text-wrap: balance」は、見出しなど短いテキストの行末をきれいに揃えるプロパティです。
「text-wrap: pretty」は、長文の最終行に1単語だけ残る状態（日本語の場合は1文字）を防いで、本文の読みやすさを向上させます。

実装方法

CSS

h1, h2, h3 {
  text-wrap: balance;
}
.article-body p {
  text-wrap: pretty;
}

対応ブラウザ（2026年5月時点）

• balance：Chrome 114以降／Safari 17.5以降／Firefox 121以降
• pretty：Chrome 117以降／Safari 26以降／Firefoxは未対応

参照元：MDN Web Docs
balance：Can I Use、pretty：Can I Use

技術⑦ 【CSS】@starting-style

「@starting-style」は、要素が最初に表示される瞬間のスタイルを定義できるCSS機能です。
これにより、display: none から表示するときの「ふわっと登場するアニメーション」が、JSを使わずCSSだけで実現できます。

実装方法

CSS

/* dialog が開いたときの最終状態 */
dialog[open] {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s, transform 0.3s;
}
/* 開く瞬間の開始スタイル */
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.95);
  }
}

なお、@starting-style は display: none → display: block の開くアニメーションのみ対応しています。
display: block → display: none の閉じるアニメーションを実現するには transition-behavior: allow-discrete を併用する必要があります。

transition-behavior: allow-discrete

CSS

/* dialog が閉じたときの状態（デフォルト） */
dialog {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 0.3s,
    transform 0.3s,
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
}
/* 開いたときの最終状態 */
dialog[open] {
  opacity: 1;
  transform: scale(1);
}
/* 開く瞬間の開始スタイル */
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: scale(0.95);
  }
}

対応ブラウザ（2026年5月時点）

• @starting-style：Chrome 117以降／Safari 17.5以降／Firefox 129以降
• transition-behavior: allow-discrete ：Chrome 117以降／Safari 17.4以降／Firefox 129以降

参照元
@starting-style：MDN Web Docs、Can I Use
transition-behavior: allow-discrete ：MDN Web Docs、Can I Use

技術⑧ 【CSS】scrollbar-*（scrollbar-color / scrollbar-width）

「scrollbar-color」と「scrollbar-width」は、スクロールバーの色や太さをCSS標準仕様で指定できるプロパティです。
これまで Chrome/Safari 用の ::-webkit-scrollbar で書く必要があった処理が、シンプルな2行に置き換えられます。

実装方法

CSS

.scrollbar {
  scrollbar-color: #888 #f0f0f0;
  scrollbar-width: thin;
}
/* ルートに指定すれば、ページ全体のスクロールバーに適用 */
:root {
  scrollbar-color: #555 #fafafa;
}

対応ブラウザ（2026年5月時点）

Chrome 121以降／Safari 26.2以降／Firefox 64以降

参照元：MDN Web Docs、Can I Use

技術⑨ 【CSS】View Transitions API（ページ遷移アニメーション）

「View Transitions API」は、ページ遷移やコンテンツの切り替えに、ネイティブアプリのようなスムーズなアニメーションを付けられる機能です。
SPAだけでなく、MPAにも対応しています(※)。

※SPA、MPAとは
・SPA（Single Page Application）：1つのページ内でコンテンツが切り替わるタイプのサイト
・MPA（Multi Page Application）：通常のページ遷移を使った一般的なWebサイト

実装方法

SPAの場合

HTML

<!-- ボタンクリックで画像を切り替える例 -->
<button id="toggle-btn">画像を切り替え</button>
<img id="hero" src="image-a.jpg" alt="">

JavaScript

document.getElementById('toggle-btn').addEventListener('click', () => {
  // startViewTransition のコールバック内でDOMを更新する
  document.startViewTransition(() => {
    document.getElementById('hero').src = 'image-b.jpg';
  });
});

MPAの場合

① ページ遷移時のクロスフェード：共通CSSに @view-transition を書くだけでOK

CSS

@view-transition {
  navigation: auto;
}

② 商品一覧から詳細ページへの遷移演出（①に追加して）

HTML

<!-- 一覧ページ・詳細ページ両方の画像に同じクラスを付ける -->
<img class="product-image" src="product.jpg" alt="">

CSS

/* 共通の名前を付ける */
.product-image {
  view-transition-name: product;
}

対応ブラウザ（2026年5月時点）

• SPA：Chrome 111以降／Safari 18以降／Firefox 144以降
• MPA：Chrome 126以降／Safari 18.2以降／Firefoxは未対応

参照元：MDN Web Docs
SPA：Can I Use、MPA：Can I Use

技術⑩ 【CSS】Scroll-driven Animations（スクロール駆動アニメーション）

「Scroll-driven Animations」は、スクロール位置に連動してアニメーションを動かせるCSS機能です。
これまでJSライブラリで実装していたスクロール演出が、CSSだけで書けるようになりました。

実装方法

①要素がビューポートに入ったらフェードイン

CSS

.reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

②ページ全体のスクロール量に連動した進捗バー

CSS

.progress-bar {
  animation: progress linear;
  animation-timeline: scroll();
  /* 進捗バーのスタイリング */
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: #2563eb;
}
@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

対応ブラウザ（2026年5月時点）

Chrome 115以降／Safari 26以降／Firefoxは設定フラグで実験的に対応

参照元：MDN Web Docs、Mozilla Connect、Can I Use

ブラウザ対応まとめ・実務優先度ランキング

順位	技術名	実務可否	実務優先度	一言コメント
1	:has()	◎	高	JS削減効果が大きい
2	Container Queries	◎	高	コンポーネント設計の必需品
3	dialog	◎	高	フォーカス管理もおまかせ
4	details / summary	◎	高	FAQページで即戦力
5	Popover API ＋ Anchor Positioning	◎ ＋ ○	高	即戦力だがAnchorは慎重に
6	text-wrap: balance / pretty	◎ / △	中	1行追加で見出しが整う
7	@starting-style	◎	中	Popover/dialogと相性◎
8	scrollbar-*	○	中	iOSでは効かない点に注意
9	View Transitions API	◎ / △	中	未対応ブラウザはスキップ
10	Scroll-driven Animations	△	中	フォールバック必須

実務優先度の根拠について、「高」に分類した5つは、主要ブラウザで安定して対応済みで、実務での使用頻度・効果が高い技術です。

これらは追加コストがほぼゼロでUI品質や実装効率が上がるため、優先的に取り入れるのがおすすめです。

「中」に分類した5つは、機能面の魅力は大きいものの、ブラウザ対応にばらつきがあったり、フォールバック設計が必要だったりするため、案件の要件に応じて判断しましょう。

おすすめ｜まずはこの3つから始めよう

10個の技術を一度に覚えるのは大変ですよね。
そこで、まず最初に取り入れるのにおすすめな3つを以下の条件でピックアップしました！

【1. details / summary】

• FAQページで即戦力
• HTMLだけで完結するので、JSが苦手でもすぐ使える

【2. :has() 】

• フォームのバリデーション表示や、特定条件のスタイル切り替えに役立つ
• 「親セレクタが書ける」感覚をまず体感してみよう

【3. text-wrap: balance】

• h1〜h3に1行追加するだけで、見出しの折り返しが整う
• 導入コストが低く、効果も分かりやすい

この3つから慣れていって、徐々にContainer QueriesやView Transitionsなどに広げていくのがおすすめです。

2026年のHTML・CSS設計はどう変わるか

今回紹介した10個の新機能に共通するのは、これまでJSで実装していたUIロジックが、HTML・CSS側に降りてきているという流れです。 それにより、設計面でも3つの大きな変化があります。

【1. JSの責務軽減】

:has() やPopoverのように、スタイル切り替えや表示制御がCSSで完結するため、JSはデータ処理やビジネスロジックに集中できます。

【2. コンポーネントの自律化】

Container Queries（コンテナクエリ）によって、コンポーネントが置かれた場所のサイズに応じて、自分で見た目を変えられるようになりました。これによって、再利用性が大きく向上します。

【3. アクセシビリティの標準化】

dialog や details のようなネイティブ要素を使えば、フォーカス管理やキーボード操作がブラウザ側で担保されるので、独自実装より安全に作れます。

「マークアップ＝HTMLを書くだけ」だった時代から、「マークアップ＝UIロジックの一部を担う」時代へ。それが2026年のHTML・CSS設計の方向性です。

いかがでしたか？10個の技術の中でも、まずは『details / summary』『:has()』『text-wrap: balance』の3つを試してみてください。学習コストが低いのに、効果はすぐ実感できますよ。

ありがとう！これで2年分の遅れを一気に取り戻せた気がします。まずは自社サイトのFAQページを details に書き換えるところから始めてみます！

素晴らしい一歩です。応援しています！

※この記事はAIの出力をもとに、筆者がブラウザ情報の照合・動作確認をして作成しています。