HTML での独自のネイティブ アコーディオン。

?インデックス

1. はじめに
2. HTML5 のアコーディオン
3. HTML5 の専用アコーディオン
4. そして、使用できますか?
5. 参考文献
6. 結論

---

1. はじめに

個人的には、HTML がインターネット全体で最も重要なマークアップ言語であると考えています。Web ページを開くときは、その構造が HTML で書かれていることを保証します。

HTML はそれほど重要ではないと考える人も多いかもしれませんが、HTML は現代の Web 全体の基礎であり、そのため、私たちが使用できる新しい API から、知っておくべきシンプルだが重要な機能まで、HTML は常に進化し続けています。

2. HTML5 のアコーディオン

HTML のアコーディオンは、各アコーディオンを表す詳細タグとネストされた概要タグを使用して記述されます。
専用アコーディオンが登場する前は、ネイティブ HTML のみを使用して各アコーディオンの動作を独立させることは不可能でした。これは、複数のアコーディオンを同時に開くことができることを意味します。例を見てみましょう:

この例では、デフォルトの動作であるアコーディオンを同時に開くことができることがわかります。

3. HTML5 の専用アコーディオン

2024 年 9 月以降、JavaScript を使用せずに専用のアコーディオンをネイティブに作成できるようになりました。

独自のアコーディオンでは、概要タグを 1 つだけ開くことができるため、これを実現するための JS コードを記述することなく UI が改善されます。

これを実現するには、同じ値を持つ name 属性を各概要タグに追加するだけです。
例を見てみましょう:

この例では、各サマリーに name="learn-css" があり、アコーディオンを排他的にすることができます。

4. そして、私は使用できますか?

この機能は次のブラウザ バージョンで利用できることがわかります:

Can I Use に問い合わせることで同様のことが確認され、この投稿の公開日の時点でブラウザの 89.13% がカバーされています。

5. 参考文献

• https://developer.chrome.com/docs/css-ui/exclusive-accordion?hl=es-419

6. 結論

私たちが最もよく使用するツールの最新の開発状況を把握することは非常に重要です。これらの新機能は作業を容易にし、何度も節約することができます。

私の Twitter アカウントに概要を投稿します:

---

あなたが興味を持ちそうな私の著者のその他の投稿:

クイック ガイド: Git で適切なコミット メッセージを作成するためのヒント?

クリスチャン・フェルナンド・2024年12月20日

#git #github #gitlab #スペイン語

SSH キーを作成して Windows 上の Github に接続するにはどうすればよいですか? ?

Cristian Fernando ・2024 年 12 月 13 日

#github #git #スペイン語 #gitlab

git でコミット間を移動するにはどうすればよいですか? ?

Cristian Fernando ・ 2024 年 11 月 29 日

#git #github #スペイン語 #初心者

以上がHTML での独自のネイティブ アコーディオン。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。