よくある質問（Q&A）のCSS素材

開くときのなめらかな動きは、新しいブラウザの仕組み（::details-content）を使っています。対応していないブラウザでは、動きなしでパッと開きます。

開くときのなめらかな動きは、新しいブラウザの仕組み（::details-content）を使っています。対応していないブラウザでは、動きなしでパッと開きます。

開くときのなめらかな動きは、新しいブラウザの仕組み（::details-content）を使っています。対応していないブラウザでは、動きなしでパッと開きます。

開くときのなめらかな動きは、新しいブラウザの仕組み（::details-content）を使っています。対応していないブラウザでは、動きなしでパッと開きます。

同じ name を付けた <details> は、1つ開くと他が自動で閉じます（JavaScript不要）。古いブラウザでは複数開いたままになるだけで、使うのに困りません。

上のボタンでカテゴリを切り替えます。質問は data-cat に書いたカテゴリ名で分けています。ボタンの data-cat="all" はすべて表示です。

入力した言葉が質問か答えに含まれるものだけを表示します。質問が多いページに向いています。

開くときのなめらかな動きは、新しいブラウザの仕組み（::details-content）を使っています。対応していないブラウザでは、動きなしでパッと開きます。

HTMLの最後にある <script type="application/ld+json"> は、検索エンジンに「これはよくある質問です」と伝えるための情報（FAQPageの構造化データ）です。画面に出ている質問・答えと同じ文にしてください。表示は普通の開閉と同じです。