FAQカードデザインをHTMLとCSSだけで作る方法

この記事では、HTMLとCSSだけで実装できるFAQ（よくある質問）カードデザインを紹介します。
JavaScriptやプラグインを使わず、シンプルで動きのあるレイアウトを作る方法をわかりやすく解説します。

1 HTML構造

<div class="faq-container">
  <div class="faq-card">
    <div class="faq-question">HTMLとCSSだけでFAQは作れますか？</div>
    <div class="faq-answer">はい、可能です。構造をHTMLで作り、動きや装飾はCSSで十分に表現できます。</div>
  </div>

  <div class="faq-card">
    <div class="faq-question">JavaScriptを使わなくても動きが出せますか？</div>
    <div class="faq-answer">ホバーアニメーションや影の変化など、CSSのトランジション機能で自然な動きを作れます。</div>
  </div>

  <div class="faq-card">
    <div class="faq-question">レスポンシブ対応はできますか？</div>
    <div class="faq-answer">はい。CSSグリッドやメディアクエリを使えば、スマホでもきれいに表示されます。</div>
  </div>

  <div class="faq-card">
    <div class="faq-question">WordPressでも使えますか？</div>
    <div class="faq-answer">もちろんです。クラシックエディタやカスタムHTMLブロックに貼り付けるだけで反映されます。</div>
  </div>
</div>

2 汎用CSS

/* ------------------------------------------------ 
 * FAQカードデザイン                                
 * ------------------------------------------------ */

/* コンテナ */
.faq-container {
  display: grid; /* グリッドレイアウトを使用 */
  gap: 20px; /* 各カード間に20pxの余白を設定 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 280pxを最小幅として自動レスポンシブ配置 */
}

/* カード本体 */
.faq-card {
  border: 1px solid #ddd; /* 薄いグレーの枠線 */
  border-radius: 12px; /* 角を12px丸める */
  padding: 25px 20px; /* 上下25px・左右20pxの内側余白 */
  background: #fff; /* 背景色を白に設定 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーションを設定 */
}

/* ホバーで少し浮かせる */
.faq-card:hover {
  transform: translateY(-4px); /* 4px上に移動して浮く効果 */
  box-shadow: 0 6px 16px rgba(0,0,0,0.1); /* 影を付けて立体感を出す */
}

/* 質問文（下線付きリンク風） */
.faq-question {
  font-weight: bold; /* 太字で強調 */
  color: #004c80; /* 信頼感のある青色 */
  font-size: 1.05em; /* やや大きめの文字サイズ */
  text-decoration: underline; /* 下線を追加 */
  text-underline-offset: 4px; /* 下線と文字の距離を4px空ける */
  text-decoration-thickness: 2px; /* 下線をやや太くする */
  cursor: pointer; /* ホバー時にカーソルをポインターに変更 */
  margin: 0; /* 余白をリセット */
  line-height: 1.6; /* 行間を広めに設定 */
  display: inline-block; /* インラインブロックで下線を自然に */
  transition: color 0.3s ease, text-decoration-color 0.3s ease; /* 色の変更を滑らかに */
}

/* ホバー時に青色を濃くする */
.faq-question:hover {
  color: #0066cc; /* 文字色をより明るい青に変更 */
  text-decoration-color: #0066cc; /* 下線の色も変更 */
}

/* 回答文 */
.faq-answer {
  color: #555; /* 少し薄い黒で読みやすい色 */
  line-height: 1.6; /* 行間を広げて可読性を向上 */
  margin-top: 10px; /* 上に10pxの余白を追加 */
}

/* ＋マーク完全削除 */
.faq-card::after,
.faq-question::after {
  content: none !important; /* 擬似要素を完全に削除 */
  font-family: none !important; /* フォント指定もリセット */
}

3 実装のポイント

このFAQカードは、display: grid を使うことでレスポンシブに対応しています。
カードごとに.faq-cardを指定し、CSSのtransitionでホバーアニメーションを加えることで、
JavaScriptなしでも“ふわっと浮く”自然な動きを実現しています。

4 完成イメージ

5 代用プラグイン

WordPressの場合、「Accordion FAQ」や「Ultimate Blocks」を使うことで同様のレイアウトを実現できます。
しかし、HTML＋CSSだけで作るとプラグイン不要・軽量・自由度が高いのが大きなメリットです。

6 まとめ

FAQは、ユーザーの疑問をすぐに解消するために欠かせない要素です。
シンプルなHTMLとCSSだけでも、十分にデザイン性の高いFAQセクションを作成できます。
今回のコードをそのままコピペして、自分のサイト用にカスタマイズしてみてください。