CSS よくある質問/Q&A/FAQ デザインテンプレート
WEBサイトのFAQ、Q&A、よくある質問でよく使われるデザインのサンプルを紹介します。
作成した時のポイントは以下です。
- 質問がひと目で分かる視認性
- 質問と回答の違いが明確
スタンダードなアコーディオンFAQ
罫線でデザインをしたスタンダードなアコーディオンFAQです。
特徴
- レスポンシブ
- 罫線で区切り
- アコーディオンはJavascriptを使用
- Javascriptオフ時は全展開
デモ
See the Pen
FAQ1 by kura (@kuranopen)
on CodePen.
コード
See the Pen
FAQ1 by kura (@kuranopen)
on CodePen.
ボックス型のアコーディオンFAQ
ボックス型のメリハリのあるアコーディオンFAQ。
特徴
- レスポンシブ
- ボックスで区切り
- アコーディオンはJavascriptを使用
- Javascriptオフ時は全展開
デモ
See the Pen
FAQ2 by kura (@kuranopen)
on CodePen.
コード
See the Pen
FAQ by kura (@kuranopen)
on CodePen.
