エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
details要素を使ってHTML/CSSのみでドロップダウンメニューを実装する
details要素、summary要素 <details> <p>コンテンツ</p> </details> <details> <summary>summary要素</s... details要素、summary要素 <details> <p>コンテンツ</p> </details> <details> <summary>summary要素</summary> <p>コンテンツ</p> </details> たったこれだけでアコーディオンメニューをつくることができる。 summary要素を指定しない場合は、デフォルトの文字列(日本語環境だと"詳細")が表示される。 「クリックしたら子要素のコンテンツを表示できる」という特性を利用して、ドロップダウンメニューを実装する。 details要素でドロップダウンメニューを実装する <details class="dropdown-menu"> <summary class="dropdown-title"> <img src="https://avatars0.githubusercontent.com/u/5305599