



HTML・CSSでつくるQ&A(FAQ)・よくある質問4選
ECサイトやブログなどでよく見かける「よくある質問」。今回はそんな想定問答を載せるのに使える「Q&Aリスト」のデザインスニペットをまとめました。シンプルなものからアコーディオンとして開閉できるものまで、どれもコピペだけで導入することが可能です。
リスト型のQ&A

回答に背景色
step1
デザインを調整する
- これはどのようなテンプレートですか?
- 回答に背景を付けたシンプルなQ&Aリストです。
- どのような特徴がありますか?
- 背景色があることで質問と回答の区別がつきやすく、回答が長文になっても違和感を与えないデザインになります。
step2
HTMLをコピペする
HTML
<dl class="qa-008">
<dt>これはどのようなテンプレートですか?</dt>
<dd>回答に背景を付けたシンプルなQ&Aリストです。</dd>
<dt>どのような特徴がありますか?</dt>
<dd>背景色があることで質問と回答の区別がつきやすく、回答が長文になっても違和感を与えないデザインになります。</dd>
</dl>
step3
CSSをコピペする
CSS
.qa-008 dt {
margin-bottom: 1em;
color: #333333;
font-weight: 600;
}
.qa-008 dt::before,
.qa-008 dd::before {
margin-right: .4em;
}
.qa-008 dt::before {
content: "Q.";
}
.qa-008 dd {
margin: 0 0 2.5em;
padding: 1em 1.5em;
background-color: #f2f2f2;
color: #333333;
}
.qa-008 dd::before {
content: "A.";
}
アコーディオン型のQ&A

下線付き
step1
デザインを調整する
これはどのようなテンプレートですか?
下線付きの、アコーディオンとして開閉できるQ&Aリストです。
どのような特徴がありますか?
開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。
step2
HTMLをコピペする
HTML
<details class="qa-006">
<summary>これはどのようなテンプレートですか?</summary>
<p>下線付きの、アコーディオンとして開閉できるQ&Aリストです。</p>
</details>
<details class="qa-006">
<summary>どのような特徴がありますか?</summary>
<p>開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。</p>
</details>
step3
CSSをコピペする
CSS
.qa-006 {
max-width: 500px;
margin-bottom: 5px;
border-bottom: 2px solid #d6dde3;
}
.qa-006 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-006 summary::before,
.qa-006 p::before {
position: absolute;
left: 1em;
font-weight: 600;
font-size: 1.3em;
}
.qa-006 summary::before {
color: #75bbff;
content: "Q";
}
.qa-006 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-006[open] summary::after {
transform: rotate(225deg);
}
.qa-006 p {
position: relative;
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 3em 1.5em;
color: #333;
transition: transform .5s, opacity .5s;
}
.qa-006[open] p {
transform: none;
opacity: 1;
}
.qa-006 p::before {
color: #ff8d8d;
line-height: 1.2;
content: "A";
}

枠線付き
step1
デザインを調整する
これはどのようなテンプレートですか?
アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。
これはどのようなテンプレートですか?
アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。
step2
HTMLをコピペする
HTML
<details class="qa-001">
<summary>これはどのようなテンプレートですか?</summary>
<p>アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。</p>
</details>
<details class="qa-001">
<summary>これはどのようなテンプレートですか?</summary>
<p>アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。</p>
</details>
step3
CSSをコピペする
CSS
.qa-001 {
max-width: 500px;
margin-bottom: 7px;
border: 1px solid #d6dde3;
border-radius: 5px;
}
.qa-001 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-001 summary::before,
.qa-001 p::before {
position: absolute;
left: 1em;
font-weight: 600;
font-size: 1.3em;
}
.qa-001 summary::before {
color: #75bbff;
content: "Q";
}
.qa-001 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-001[open] summary::after {
transform: rotate(225deg);
}
.qa-001 p {
position: relative;
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 3em 1.5em;
color: #333;
transition: transform .5s, opacity .5s;
}
.qa-001[open] p {
transform: none;
opacity: 1;
}
.qa-001 p::before {
color: #ff8d8d;
line-height: 1.2;
content: "A";
}

白背景×シャドウ
step1
デザインを調整する
これはどのようなテンプレートですか?
白背景にシャドウを付けた、アコーディオンとして開閉できるQ&Aです。
どのような特徴がありますか?
コンパクトに見せられるので、質問の数が多い場合などにおすすめです。
step2
HTMLをコピペする
HTML
<details class="qa-007">
<summary>これはどのようなテンプレートですか?</summary>
<p>白背景にシャドウを付けた、アコーディオンとして開閉できるQ&Aです。</p>
</details>
<details class="qa-007">
<summary>どのような特徴がありますか?</summary>
<p>コンパクトに見せられるので、質問の数が多い場合などにおすすめです。</p>
</details>
step3
CSSをコピペする
CSS
.qa-007 {
max-width: 500px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgba(0 0 0 / 5%);
background-color: #fff;
}
.qa-007 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-007 summary::before,
.qa-007 p::before {
position: absolute;
left: 1em;
font-weight: 600;
font-size: 1.3em;
}
.qa-007 summary::before {
color: #75bbff;
content: "Q";
}
.qa-007 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-007[open] summary::after {
transform: rotate(225deg);
}
.qa-007 p {
position: relative;
transform: translateY(-10px);
opacity: 0;
margin: 0;
padding: .3em 3em 1.5em;
color: #333;
transition: transform .5s, opacity .5s;
}
.qa-007[open] p {
transform: none;
opacity: 1;
}
.qa-007 p::before {
color: #ff8d8d;
line-height: 1.2;
content: "A";
}