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.

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note