--- title: "モダンHTMLとCSSはJS無しでどこまでリッチなUIが組めるのか調べたら凄かった" description: "JavaScriptゼロでモーダル、ツールチップ、スクロール連動、排他アコーディオンまで実現！モダンHTML/CSSの劇的進化がすごい" publishedAt: "2026-09-20T00:00:00.000Z" tags: ["HTML","CSS","Web"] --- import { BaselineStatus } from 'astro-embed'; ## 最近のWeb開発といえば 今新しくサイトやWebアプリを立ち上げようとしたら、間違いなくUIライブラリやフレームワークを使うでしょう。 実際筆者も、初歩の初歩的なHTML/CSS/JSから入り、その後すぐに:icon[nextjs]**Next.js**, :icon[tailwind]**Tailwind CSS**, :icon[shadcn-ui]**shadcn/ui** といったスタックでサイトを作っていました。（ぶっちゃけ、まともに `document.getElementById` や `addEventListener` を手書きした記憶がほとんどありません） その後、:mark[SSR] や :mark[SSG] といったレンダリングの変遷を追う中で:icon[astro]**Astro** に出会い、 **ゼロJS（Zero-JS by default）** という思想に大きな衝撃を受けました。（当サイトもAstro製です） また、昨今のWeb標準の進化を追っていると「最近のCSSは半分ぐらいJS化している」「HTML属性だけでモーダルが作れるようになった」という話を耳にする機会が増えました。 そこで湧いてきたのが、:mark[なら、本当にJavaScriptを1行も書かずにどこまでリッチなUIが組めるのか？]{color="blue"} という純粋な疑問です。 実際に調べてみたところ、タイトルが驚き屋になってしまうくらいネイティブ機能が進化していて凄かったので、最近の便利そうなものを共有していきたいと思います。 ## HTML標準機能の進化 かつては数十行のJavaScriptを書いていたUIパターンが、今や**HTMLタグと属性だけ**で完結します。 ### Popover API: 属性だけで作れるツールチップとポップアップ ツールチップやドロップダウンメニュー、トースト通知などを実装するとき、かつては以下のような処理を手書きしたり、ライブラリに頼り切っていました。 - `z-index` の階層管理 - 要素の外側をクリックしたときに閉じる（Light Dismiss） - :kbd[ESC] キーを押したときに閉じる - スクリーンリーダー対応や初期フォーカスの移動 これらすべてを、ブラウザがネイティブ処理してくれます。 ```html

これだけで外側クリックやESCキーで閉じられます！

``` > [!TIP] > `popover` 属性が付いた要素は、ブラウザの **「Top Layer（最前面レイヤー）」** に描画されるため、親要素の `overflow: hidden` や `z-index` に遮られる心配がありません。 > ※なお、Popover APIは背景を不活性化しない「ノンモーダル（Non-modal）」なUIです。背景の操作をブロックする真のモーダルダイアログを作りたい場合は、`` 要素と `.showModal()` を組み合わせるか(JSが必要)、今後のHTML仕様（`command` / `commandfor` 等）に注目です。 ### `
`: 排他アコーディオン FAQセクションなどでよくある「1つ開くと他のアコーディオンが閉じる」アコーディオンUI。 `
` や `` タグは以前からありましたが、これまで `
` 要素単体では排他制御ができず、JavaScriptでクリックイベントを拾って他の要素の `open` 属性を外す必要がありました。 しかし、モダンブラウザでは `
` に **`name` 属性** を付与するだけで排他制御が可能になりました。 ```html
Q1: JavaScriptは本当に不要ですか？

UIの表示切り替えやアニメーションであればHTML/CSSだけで完結します。

Q2: 古いブラウザの対応はどうすればいいですか？

Polyfillを利用するか、プログレッシブエンハンスメントとして提供します。

``` 同じ `name="faq"` を持たせるだけで、ブラウザが勝手にグループ化して排他オープンしてくれます。 ## CSSの進化(?)JS化(?)：モダンCSS HTMLだけでなく、CSSの進化も著しいです。かつて「JS必須」と言われていたUIの振る舞いが、CSSプロパティ数行で書けるようになってきています。 ### `:has()` 擬似クラス: 親セレクタと状態管理 親要素を選択できる `:has()` 擬似クラスが主要ブラウザで使えるようになったことで、CSSだけで状態に応じたUI切り替えがかなり柔軟にできるようになりました。 ```css /* ポップオーバーが開いている間、背景のスクロールを固定する */ body:has([popover]:popover-open) { overflow: hidden; } /* チェックボックスの状態に応じて親カードのデザインを変える */ .card:has(input[type="checkbox"]:checked) { border-color: var(--color-primary); background-color: var(--color-primary-subtle); } ``` 子要素のチェック状態やフォーカス状態（`:focus-within`）を起点にして、親要素やページ全体（`body`）のスタイルを直接制御できます。 ### Scroll-driven Animations: スクロール連動をハイパフォーマンスに実行 ページ上部の読了プログレスバーや、スクロールに応じたヘッダーの縮小、セクションのフェードイン。 これらを実装するために `window.addEventListener('scroll')` や `IntersectionObserver` を駆使していた処理も、CSSだけで宣言的に記述できます。 ```css /* 読了率スクロールバー */ .progress-bar { scale: 0 1; transform-origin: left; animation: grow-progress linear; animation-timeline: scroll(); } @keyframes grow-progress { to { scale: 1 1; } } ``` > [!NOTE] > `animation-timeline` はブラウザの **コンポジタスレッド（Compositor Thread）** で処理されるため、メインスレッドのJS実行にブロックされず、滑らかにアニメーションします。 :::details[コンポジタスレッドの解説] > [!TIP] > **コンポジタスレッド（Compositor Thread）とは？** > > ブラウザの内部処理は、主に **「メインスレッド」** と **「コンポジタスレッド」** に分かれています。 > > - **メインスレッド**: JavaScriptの実行、HTML/CSSのパース、スタイル計算、レイアウト（リフロー）、ペイントなど、Webページの大部分の処理を一手に引き受けています。重いJavaScriptが動いているとメインスレッドが塞がり、スクロールやアニメーションがカクつく原因（Jank）になります。 > - **コンポジタスレッド**: メインスレッドから渡された描画レイヤー（Layer）をGPUと連携して合成し、画面に出力する独立したスレッドです。 > > 従来のJavaScriptによるスクロール連動（`window.addEventListener('scroll')` 等）はメインスレッドで実行されるため、メインスレッドが忙しいとカクつきが発生します。一方、`animation-timeline: scroll()` などのScroll-driven Animationsは、**メインスレッドを介さずコンポジタスレッドとGPUだけで直接アニメーションを更新できる**ため、JavaScriptの実行負荷に左右されず滑らかな描画を維持できます。 > > - [Chrome for Developers: Inside look at modern web browser (part 3)](https://developer.chrome.com/blog/inside-browser-part3/) > - [web.dev: Stick to Compositor-Only Properties and Manage Layer Count](https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count) ::: > [!NOTE] > ※Firefoxではまだ標準有効化されていないため、現時点の実務ではプログレッシブエンハンスメント（対応ブラウザでのみ滑らかに動く装飾）としての活用が安全です。 ### CSS Anchor Positioning: 要素追従と位置補正 ツールチップやドロップダウンメニューを特定要素の真下に配置し、画面端で見切れる場合は自動で反転（フリップ）させる。 これまで `Popper.js` や `Floating UI` などの計算ライブラリに頼りがちだったアンカー追従が、CSS Anchor Positioning でネイティブ対応しつつあります。 ```css /* アンカー（基準となるボタン） */ .trigger-btn { anchor-name: --menu-trigger; } /* ドロップダウンメニュー */ .dropdown-menu { position: fixed; position-anchor: --menu-trigger; position-area: bottom center; /* アンカーの真下に自動配置 */ position-try-fallbacks: flip-block; /* 画面下端にはみ出る場合は自動で上に反転 */ } ``` > [!NOTE] > ※クロスブラウザ対応が必要な本番環境では、OddBird社製の Polyfill を併用するか、段階的な導入を検討してください。 ### `@starting-style` & `allow-discrete`: `display: none` からのアニメーション 「`display: none` から `display: block` に切り替えるときにCSSトランジションが効かない」問題。フロントエンドを触ったことがある人なら、一度は頭を抱えた経験があるはずです。 `@starting-style` と `transition-behavior: allow-discrete` を使うことで、要素が表示された直後（最初のフレーム）のスタイルをCSSで明示的に定義できるようになりました。 ```css [popover] { opacity: 0; transform: translateY(-10px); /* overlay と display を allow-discrete でトランジション可能にする */ transition: opacity 0.3s ease, transform 0.3s ease, display 0.3s allow-discrete, overlay 0.3s allow-discrete; } /* ポップオーバーが開いた状態 */ [popover]:popover-open { opacity: 1; transform: translateY(0); } /* 表示された最初のフレームのスタイル */ @starting-style { [popover]:popover-open { opacity: 0; transform: translateY(-10px); } } ``` > [!TIP] > Top Layer要素（Popoverやdialog）を閉じる際のアニメーションには、`transition` に `overlay 0.3s allow-discrete` を含めるのがポイントです。これがないと、閉じた瞬間に要素がTop Layerから即座に外れてしまい、非表示アニメーションが途中で途切れる現象が起きます。 ### `field-sizing: content`: `