JSを一切使わずに、アクセシビリティに配慮したアコーディオンを作れますか？

はい、 detailsタグとsummaryタグを使うのが最もモダンで推奨される方法です。ブラウザ標準の機能を利用するため、WAI-ARIAの設定を自分で行わなくてもスクリーンリーダーに対応できます。実装の詳細は detailsとsummaryタグを使う方法を参照してください。

inputタグ（チェックボックス）を使った手法が「非推奨」なのはなぜですかな？

本来、入力フォームとして使うタグをナビゲーションの開閉に使用するのは、 HTMLのセマンティクス（意味付け）的に不適切だからです。IE対策が不要な現代では、 detailsタグや <a href="https://ginneko-atelier.com/blog/entry315/?data_structure=faq#javascriptjquery%E4%B8%8D%E4%BD%BF%E7%94%A8%E3%82%82%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%82%82%E8%80%83%E6%85%AE%E3%81%97%E3%81%A4%E3%81%A4%E3%83%AA%E3%83%83%E3%83%81%E3%81%AB%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E5%AE%9F%E8%A3%852021-01-05%E7%B7%A8%E9%9B%86">JSとCSSを組み合わせた手法を選ぶのが2026年のスタンダードです。

高さ（height）が可変のコンテンツを滑らかにアニメーションさせるコツは？

CSSのみで実装する場合、 height: auto はアニメーションしないため、 max-height を使用します。ただし、より厳密でカクツキのない動作を求めるなら、 <a href="https://ginneko-atelier.com/blog/entry315/?data_structure=faq#javascriptjquery%E4%B8%8D%E4%BD%BF%E7%94%A8%E3%82%82%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%82%82%E8%80%83%E6%85%AE%E3%81%97%E3%81%A4%E3%81%A4%E3%83%AA%E3%83%83%E3%83%81%E3%81%AB%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E5%AE%9F%E8%A3%852021-01-05%E7%B7%A8%E9%9B%86">JSで要素の正確な高さを取得してインラインスタイルで制御する手法が最も美しく仕上がります。

CSS アニメーションで軽量アコーディオンメニュー（コードサンプルあり）

Q: JSを一切使わずに、アクセシビリティに配慮したアコーディオンを作れますか？

はい、 detailsタグとsummaryタグ を使うのが最もモダンで推奨される方法です。ブラウザ標準の機能を利用するため、WAI-ARIAの設定を自分で行わなくてもスクリーンリーダーに対応できます。実装の詳細は detailsとsummaryタグを使う方法 を参照してください。

Q: inputタグ（チェックボックス）を使った手法が「非推奨」なのはなぜですかな？

本来、入力フォームとして使うタグをナビゲーションの開閉に使用するのは、 HTMLのセマンティクス（意味付け） 的に不適切だからです。IE対策が不要な現代では、 detailsタグ や <a href="https://ginneko-atelier.com/blog/entry315/?data_structure=faq#javascriptjquery%E4%B8%8D%E4%BD%BF%E7%94%A8%E3%82%82%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%82%82%E8%80%83%E6%85%AE%E3%81%97%E3%81%A4%E3%81%A4%E3%83%AA%E3%83%83%E3%83%81%E3%81%AB%E3%82%A2%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E5%AE%9F%E8%A3%852021-01-05%E7%B7%A8%E9%9B%86">JSとCSSを組み合わせた手法 を選ぶのが2026年のスタンダードです。

公開日:: 2019.02.11
メンテナンス日:: 2026.03.20

# CSS

FAQ

JSを一切使わずに、アクセシビリティに配慮したアコーディオンを作れますか？: はい、 detailsタグとsummaryタグ を使うのが最もモダンで推奨される方法です。ブラウザ標準の機能を利用するため、WAI-ARIAの設定を自分で行わなくてもスクリーンリーダーに対応できます。実装の詳細は detailsとsummaryタグを使う方法を参照してください。

inputタグ（チェックボックス）を使った手法が「非推奨」なのはなぜですかな？: 本来、入力フォームとして使うタグをナビゲーションの開閉に使用するのは、 HTMLのセマンティクス（意味付け） 的に不適切だからです。IE対策が不要な現代では、 detailsタグや JSとCSSを組み合わせた手法を選ぶのが2026年のスタンダードです。

高さ（height）が可変のコンテンツを滑らかにアニメーションさせるコツは？: CSSのみで実装する場合、 height: auto はアニメーションしないため、 max-height を使用します。ただし、より厳密でカクツキのない動作を求めるなら、 JSで要素の正確な高さを取得してインラインスタイルで制御する手法が最も美しく仕上がります。