エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
details・summaryタグで開閉アニメーション付きアコーディオンUIを作ろう
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
details・summaryタグで開閉アニメーション付きアコーディオンUIを作ろう
記事を読むうえでの注意点 一部おかしな記述があるかもしれません。 そのためもし間違いなどがありまし... 記事を読むうえでの注意点 一部おかしな記述があるかもしれません。 そのためもし間違いなどがありましたらご指摘いただけると幸いです。 FAQなんかのUIでよく使われる、クリックしたら関連するコンテンツがニュッと表示されるアレ。 みなさんは普段どのように実装されていますか? アコーディオンUIを実装するにあたって、マークアップに最適なタグとしてdetailsとsummaryがあると知りまして、このタグを使って実装してみたいと思います。 実装してみた まずは結論から。 実際に今回実装していくアコーディオンUIのソースコードはこちらです。 details・summaryタグは何が良いの? details summaryタグを使用しない実装では、アクセシビリティな実装をする場合、考慮する事項が多く、網羅しようと思うと工数がかかります。 ですが、details summary要素を使用することでアクセ