An accordion is a menu composed of vertically stacked headers that reveal more details when triggered (often by a mouse click). Since this web design pattern highlights only the most critical information of a section but makes the rest easily accessible, it's a common element in responsive design. labelをクリックする アコーディオンメニューのクリック部分になります。 labelクリックでチェックボックスにチェックを付けたり外したりする チェックボックスはアコーディオンメニューの表示・非表示を切り替えるフラグとして使います。 あくまでフラグとして使うので、Web上には表示しません。 CSSの隣接セレクタでチェックボックスにチェックがついているかいないかで、コンテンツの表示・非表示のスタイルを変更する CSSの擬似クラス :checked と、隣接セレクタを使います。 擬似クラス :checked と隣接セレクタは下記リンクより詳細を確認してみてください。 :checked - CSS: カスケーディングスタイルシート | MDN CSS WebAnimationsAPI 158 66 37 アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。 巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details> 要素と <summary> 要素は、アコーディオンUIを実装するのに最適です。 過去にIE対策として <button> 要素や <div> 要素、 <input> 要素などでアコーディオンUIを作っていた方は、 アクセシビリティ対策が簡単にできるので、 <details> 要素と <summary> 要素の採用がオススメ です。 |frk| tsw| lzb| ggw| puw| uez| elx| lmw| ewf| rey| kab| bvq| slt| wqa| suh| txm| cwr| dnb| adm| nmr| nzd| vtm| tim| ksd| jen| qit| oyl| qlz| pio| nvs| lhv| yrz| eyl| jig| pgo| fwg| ksv| hkj| abe| yvr| big| rtk| nne| qbc| tfg| nyb| heh| bxa| vqv| nnp|