概要を見たい人はここをクリック!
コンテンツ詳細。
通常時は折りたたまれています。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac rutrum odio. Suspendisse volutpat varius nulla, sit amet posuere neque accumsan sit amet. In facilisis turpis vel ligula fermentum, ut consequat magna pharetra. Praesent sit amet nulla ligula.
通常時は折りたたまれています。
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac rutrum odio. Suspendisse volutpat varius nulla, sit amet posuere neque accumsan sit amet. In facilisis turpis vel ligula fermentum, ut consequat magna pharetra. Praesent sit amet nulla ligula.
<details> <summary>概要を見たい人はここをクリック!</summary> <div> コンテンツ詳細。<br> 通常時は折りたたまれています。<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac rutrum odio. Suspendisse volutpat varius nulla, sit amet posuere neque accumsan sit amet. In facilisis turpis vel ligula fermentum, ut consequat magna pharetra. Praesent sit amet nulla ligula. </div> </details>
<details>要素と<summary>要素を使用することで、アコーディオン型のUIを簡単に作成することができます。
ユーザビリティの利点
実装が簡単になるだけではなく、ユーザビリティの向上にもつなげることができます。
・キーボード操作: <details>要素はtabキーでのフォーカスが可能で、space/enterキーでの開閉が行えます。
・サイト内検索: サイト内検索で単語がヒットすると自動でアコーディオン部分が開かれます。