MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペ！おしゃれなQ&A（よくある質問）デザイン4選

【HTML/CSS】コピペ！おしゃれなQ&A（よくある質問）デザイン4選

CSS
下線あり、枠線あり、白背景とシャドウの3つのスタイルで表示されたアコーディオン型Q&Aのデザイン例
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なおしゃれなQ&A/FAQ/よくある質問用デザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、Q&A/FAQ以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

おしゃれな素材デザイン集

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock
Code Stock

リスト型のQ&A/FAQ

ここでは、以下のリスト型のQ&A/FAQデザイン例を記載しています。

リスト型のQ&A/FAQデザイン
  • 回答に背景色あり

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もQ&A/FAQリストページでは選択式でご用意しました。

調整項目一覧
  • 背景色
  • 文字色

ご興味があれば「Q&A/FAQリスト一覧ページ」を一読ください。

Code Stock
QA | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 List type リスト型のQ&A これはどのようなテンプレートですか？ 回答に背景を付けたシンプル…

回答に背景色あり

これはどのようなテンプレートですか？
回答に背景を付けたシンプルなQ&Aリストです。
どのような特徴がありますか？
背景色があることで質問と回答の区別がつきやすく、回答が長文になっても違和感を与えないデザインになります。
HTMLコード表示
<dl class="qa-1">
  <dt>これはどのようなテンプレートですか？</dt>
  <dd>回答に背景を付けたシンプルなQ&Aリストです。</dd>
  <dt>どのような特徴がありますか？</dt>
  <dd>背景色があることで質問と回答の区別がつきやすく、回答が長文になっても違和感を与えないデザインになります。</dd>
</dl>
CSSコード表示
.qa-1 dt {
  margin-bottom: 1em;
  color: #333333;
  font-weight: 600;
}

.qa-1 dt::before,
.qa-1 dd::before {
  margin-right: .4em;
}

.qa-1 dt::before {
  content: "Q.";
}

.qa-1 dd {
  margin: 0 0 2.5em;
  padding: 1em 1.5em;
  background-color: #f2f2f2;
  color: #333333;
}

.qa-1 dd::before {
  content: "A.";
}

アコーディオン型のQ&A/FAQ

ここでは、以下のアコーディオン型のQ&A/FAQデザイン例を記載しています。

アコーディオン型のQ&A/FAQデザイン
  • 下線あり
  • 枠線あり
  • 白背景 & シャドウ

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もQ&A/FAQリストページでは選択式でご用意しました。

調整項目一覧
  • 背景色
  • 文字色
  • 下線の色
  • 形状：四角, 角丸
  • 枠線の色

ご興味があれば「Q&A/FAQリスト一覧ページ」を一読ください。

Code Stock
QA | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 List type リスト型のQ&A これはどのようなテンプレートですか？ 回答に背景を付けたシンプル…

下線あり

これはどのようなテンプレートですか？

下線付きの、アコーディオンとして開閉できるQ&Aリストです。

どのような特徴がありますか？

開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。

HTMLコード表示
<details class="qa-2">
  <summary>これはどのようなテンプレートですか？</summary>
  <p>下線付きの、アコーディオンとして開閉できるQ&Aリストです。</p>
</details>
<details class="qa-2">
  <summary>どのような特徴がありますか？</summary>
  <p>開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。</p>
</details>
CSSコード表示
.qa-2 {
  max-width: 1200px;
  margin: 0 auto 1em;
  border-bottom: 2px solid #d6dde3;
}

.qa-2 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-2 summary::before,
.qa-2 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-2 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-2 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-2[open] summary::after {
  transform: rotate(225deg);
}

.qa-2 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-2[open] p {
  transform: none;
  opacity: 1;
}

.qa-2 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}

枠線あり

これはどのようなテンプレートですか？

枠線付きの、アコーディオンとして開閉できるQ&Aリストです。

どのような特徴がありますか？

開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。

HTMLコード表示
<details class="qa-3">
  <summary>これはどのようなテンプレートですか？</summary>
  <p>枠線付きの、アコーディオンとして開閉できるQ&Aリストです。</p>
</details>
<details class="qa-3">
  <summary>どのような特徴がありますか？</summary>
  <p>開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。</p>
</details>
CSSコード表示
.qa-3 {
  max-width: 1200px;
  margin: 0 auto 1em;
  border: 1px solid #d6dde3;
  border-radius: 5px;
}

.qa-3 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-3 summary::before,
.qa-3 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-3 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-3 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-3[open] summary::after {
  transform: rotate(225deg);
}

.qa-3 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-3[open] p {
  transform: none;
  opacity: 1;
}

.qa-3 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}

白背景 & シャドウ

これはどのようなテンプレートですか？

白背景＆シャドウの、アコーディオンとして開閉できるQ&Aリストです。

どのような特徴がありますか？

開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。

HTMLコード表示
<details class="qa-4">
  <summary>これはどのようなテンプレートですか？</summary>
  <p>白背景＆シャドウの、アコーディオンとして開閉できるQ&Aリストです。</p>
</details>
<details class="qa-4">
  <summary>どのような特徴がありますか？</summary>
  <p>開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。</p>
</details>
CSSコード表示
.qa-4 {
  max-width: 1200px;
  margin: 0 auto 1em;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 4px rgb(0 0 0 / 12%), 0 2px 3px -2px rgba(0 0 0 / 18%);
  background-color: #ffffff;
}

.qa-4 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.qa-4 summary::before,
.qa-4 p::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}

.qa-4 summary::before {
  color: #75bbff;
  content: "Q";
}

.qa-4 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: '';
  transition: transform .5s;
}

.qa-4[open] summary::after {
  transform: rotate(225deg);
}

.qa-4 p {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333333;
  transition: transform .5s, opacity .5s;
}

.qa-4[open] p {
  transform: none;
  opacity: 1;
}

.qa-4 p::before {
  color: #ff8d8d;
  line-height: 1.2;
  content: "A";
}

よくある質問（FAQ）

Q&Aを開閉させるためにJavaScript（jQuery）などのプログラムは必要ですか？

いいえ、必要ありません。

当記事で紹介している開閉式のQ&Aデザインは、HTMLの<details>と<summary>タグ、またはCSSのみを利用しているため、JavaScriptなしのコピペでそのまま動作します。

HTMLとCSSのコードはどこにコピペすればいいですか？

HTMLコードは、よくある質問を表示させたい記事の本文中（カスタムHTMLブロックなど）に貼り付けます。

CSSコードは、WordPressテーマの「追加CSS」や子テーマのスタイルシートに貼り付けてください。

「Q」と「A」の文字色や背景色を自分のサイトに合わせて変更できますか？

はい、簡単に変更可能です。

CSSコード内にあるbackground-color（背景色）やcolor（文字色）のカラーコード（例：#2589d0）をお好みの色に書き換えてご使用ください。

最初から回答（A）の領域を「開いた状態」にしておくことは可能ですか？

可能です。

<details>タグを使用しているデザインの場合、HTMLコードを<details open>のようにopen属性を追記するだけで、最初から開いた状態に設定できます。

「＋」「－」や「▼」などの開閉アイコンを、別の画像に変更することはできますか？

変更可能です。

デフォルトのアイコンをCSSのappearance: none;やlist-style: none;で非表示にした上で、擬似要素（::beforeや::after）のbackground-imageやcontentを使って、好きなアイコン画像やFontAwesomeを指定してください。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次