【サンプル10選】コピペで実装できるアコーディオンメニュー | ウィルラボ【HTML】シンプルなアコーディオンを実装する detailsタグ・summaryタグを使用すると、HTMLのみだけでアコーディオンの開閉を実現することができます。 タグについての詳細は＜ htmlのdetailsタグとsummaryタグでアコーディオンメニューを実装するメリット ＞をご覧ください。 detailsタグにopen属性を指定することで、はじめから開いた状態のアコーディオンを作成することも可能です。 【HTML/CSS】ホバー時・タブフォーカス時のスタイルを変える ホバーやタブフォーカス時のスタイルを変えることで、アコーディオンメニューの開閉状態をより明示的に示すことができます。 ホバー時は「:hover」、タブフォーカス時は「:focus-visible」擬似クラスを使用して、スタイルを変更しました。タブフォーカスはクリック時に動作させたくないので、今回は「:focus-vi
