HTMLでこんなことができる

HTMLでこんなことができる HTMLは、かつてJavaScriptの領域だった多くの機能を吸収しています。このページでは、HTMLだけで実現できる動的な機能のいくつかをリストアップしています。 更新 2026-08-20: このページは元々、HTML Day 2026の間に1時間でHTMLを祝い、書くために作成しましたが、その後、一部の機能のブラウザ実装が著しく不足している、あるいはアクセシビリティのニーズを満たしていない点をより良く表現し、強調するために編集しました。ですので、ぜひ試してみてください。ただし、できる限りアクセシブルにしてください！ popover 2025年1月より利用可能 Chrome 114+ Edge 114+ Firefox 125+ Opera 100+ Safari 17+ Chrome Android 114+ Firefox for Android 125+ Opera Android 76+ Safari on iOS 17+ Samsung Internet 23+ WebView Android 114+ ライトディスミス、Escキーでのクローズ、z-indexの管理なしでポップオーバーを最前面に表示できます。すべてHTMLのpopoverとpopovertarget属性で管理されます。(MDN) ポップオーバーのトグル JavaScript不要、モダンブラウザの魔法です。Webの仕様を策定し、ブラウザを構築してくれた素晴らしい人々のおかげです！ <button popovertarget="example-popover">ポップオーバーをトグル</button> <div id="example-popover" popover> <p>JavaScript不要、モダンブラウザの魔法です。Webの仕様を策定し、ブラウザを構築してくれた素晴らしい人々のおかげです！</p> </div> dialog 2022年3月より利用可能 Chrome 37+ Edge 79+ Firefox 98+ Opera 24+ Safari 15.4+ Chrome Android 37+ Firefox for Android 98+ Opera Android 24+ Safari on iOS 15.4+ Samsung Internet 3+ WebView Android 37+ ここではpopoverと同様のことが行われていますが、今回はモーダルダイアログボックス専用の要素です。(MDN) 後述のcommand / commandForで、ダイアログ要素を開閉できる、より最近実装された機能（いつか他の多くのJavaScript不要の機能にも役立つでしょう！）を参照してください。 ポップオーバーのトグル ここでもpopover属性が多くの作業をこなしています！ 閉じる <button popovertarget="example-dialog">ポップオーバーをトグル</button> <dialog id="example-dialog" popover> <p><code>&lt;form method="dialog"&gt;</code> だけでHTMLで閉じられ、<code>popover</code>属性で開かれます。</p> <button popovertarget="example-dialog" popovertargetaction="hide">閉じる</button> </dialog> このページの方針とは少し異なりますが、JavaScriptでダイアログ要素を操作する方法の短いスニペットを含めたいと思います。 ダイアログを開く これは.showModal()で開かれ、.close()で閉じられます。どちらもJavaScriptから呼び出されます。 閉じる JSで操作するダイアログのコードを表示 <button id="example-dialog-js-open">ダイアログを開く</button> <dialog id="example-dialog-js"> <p>これは<code>.showModal()</code>で開かれ、<code>.close()</code>で閉じられます。どちらもJavaScriptから呼び出されます。</p> <button id="example-dialog-js-close">閉じる</button> </dialog> document.getElementById("example-dialog-js-open").addEventListener("click", () => { document.getElementById("example-dialog-js").showModal() }) document.getElementById("example-dialog-js-close").addEventListener("click", () => { document.getElementById("example-dialog-js").close() }) グループ化 <details> 2025年9月より利用可能 Chrome 120+ Edge 120+ Firefox 130+ Opera 106+ Safari 17.2+ Chrome Android 120+ Firefox for Android 130+ Opera Android 80+ Safari on iOS 17.2+ Samsung Internet 25+ WebView Android 120+ 共有されたname属性は、複数の<details>要素を排他的なアコーディオンに変換します。1つを開くと、他のものは自動的に閉じます。魔法です！(MDN) 最初のもの 2番目のもの 最初のもの 2番目のもの <details name="example-group"> <summary>最初の</summary> <p>2番目のもの開いて、これが自動的に閉じるのを見てください。</p> </details> <details name="example-group"> <summary>2番目</summary> <p>最初のものは今隠れています。</p> </details> command & commandfor 2025年12月より利用可能 Chrome 135+ Edge 135+ Firefox 144+ Opera 120+ Safari 26.2+ Chrome Android 135+ Firefox for Android 144+ Opera Android 89+ Safari on iOS 26.2+ Samsung Internet 29+ WebView Android 135+ 単一のポップオーバーを制御する個別のHTMLボタン。スクリプトなし。(MDN) 注: 現在までに、show-modal、close、request-close、toggle-popover、show-popover、hide-popoverのみがブラウザで安定して実装されています。将来的には、値の増減、メディア要素との対話、テキストのコピーなどを行うためのinvokersがサポートされることが期待されます。 開く 閉じる show-popoverはこのポップオーバーを開き、hide-popoverは閉じます！ 閉じる <button command="show-popover" commandfor="example-command-popover">開く</button> <button command="hide-popover" commandfor="example-command-popover">閉じる</button> <dialog id="example-command-popover" popover> <p><code>show-popover</code>はこのポップオーバーを開き、<code>hide-popover</code>は閉じます！</p> <button command="hide-popover" commandfor="example-command-popover">閉じる</button> </dialog> ネイティブ入力ピッカー 2017年3月より利用可能 Chrome: カラー 20+, レンジ 4+, 日付 20+ Edge: カラー 14+, レンジ 12+, 日付 12+ Firefox: カラー 29+, レンジ 23+, 日付 57+ Opera: カラー 12+, レンジ 11+, 日付 11+ Safari: カラー 12.1+, レンジ 3.1+, 日付 14.1+ Chrome Android: カラー 25+, レンジ 57+, 日付 25+ Firefox for Android: カラー 27+, レンジ 52+, 日付 57+ Opera Android: カラー 12+, レンジ 11+, 日付 11+ Safari on iOS: カラー 12.2+, レンジ 5+, 日付 5+ Samsung Internet: カラー 1.5+, レンジ 7+, 日付 1.5+ WebView Android: カラー 4.4+, レンジ 4.4+, 日付 4.4+ ブラウザに組み込まれたカラー、レンジ、日付ピッカー。(MDN: Color Input, MDN: Range Input, MDN: Color Input) 警告！これらの要素の一部は、まだ未完成のように感じられます。今後数年間でフォーム要素がさらに改善されることを期待していますが、現時点では、ブラウザで提供されている実装はまだ不十分です。使用する際は非常に注意してください。これらの要素のデフォルトのブラウザスタイルはブラウザ間で大きく異なり、アクセシビリティ体験は非常に貧弱になることが予想されます。多くの落とし穴に注意してください！ カラー レンジ 日付 <label> カラー <input type="color" value="#5f8aa6" autocomplete="off"> </label> <label> レンジ <input type="range" min="0" max="100" value="50" autocomplete="off"> </label> <label> 日付 <input type="date" autocomplete="off"> </label> <datalist> 2019年3月より利用可能 Chrome 20+ Edge 12+ Firefox 4+ Opera 9.5+ Safari 12.1+ Chrome Android 33+ Firefox for Android 79+ Opera Android 20+ Safari on iOS 12.2+ Samsung Internet 2+ WebView Android 4.4.3+ ドロップダウンライブラリ不要のネイティブオートコンプリート候補。(MDN) 警告！入力タイプ全体でのサポートはまだ非常にまばらで、ブラウザでの実装にも多くの問題があります。詳細はAdrian Roselli氏のUnder-Engineered Comboboxenを参照してください。現時点では、これを使用するのは避けて、今後数年間で改善されるか様子を見るのが良いかもしれません。 お気に入りのHTML要素 <label> お気に入りのHTML要素 <input type="text" id="example-datalist-input" list="example-datalist" autocomplete="off"> </label> <datalist id="example-datalist"> <option value="a"> <option value="abbr"> <option value="address"> <!-- ... --> </datalist> loading="lazy" 2022年3月より利用可能 Chrome 77+ Edge 79+ Firefox 75+ Opera 64+ Safari 15.4+ Chrome Android 77+ Firefox for Android 79+ Opera Android 55+ Safari on iOS 15.4+ Samsung Internet 12+ WebView Android 77+ この画像は、ビューポートの近くに来るまで読み込みを遅延させます。IntersectionObserverは一切不要です。(MDN) <img src="/images/avatar@2x.jpeg" loading="lazy" width="200" height="200" alt="Chris Burnell’s avatar."> hidden until-found 2025年12月より利用可能 Chrome 102+ Edge 102+ Firefox 148+ Opera 88+ Safari 26.2+ Chrome Android 102+ Firefox for Android 148+ Opera Android 70+ Safari on iOS 26.2+ Samsung Internet 19+ WebView Android 102+ 下のフラグメントリンクにナビゲートすると、隠されたセクションが表示されます。ブラウザはhidden="until-found"を自動的に削除します。(MDN) 注: これはまだかなり新しく、ブラウザのデフォルト検索とはうまく連携しますが、例えばスクリーンリーダーの検索実装とはあまりうまく連携しません。それでも、