HTML・CSSでつくるQ&A(FAQ)・よくある質問8選

2022/10/32023/2/23

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

リスト型のQ&A

回答に背景色

背景色：#f2f2f2
文字色：#333333

これはどのようなテンプレートですか？: 回答に背景を付けたシンプルなQ&Aリストです。
どのような特徴がありますか？: 背景色があることで質問と回答の区別がつきやすく、回答が長文になっても違和感を与えないデザインになります。

<dl class="qa-008">
    <dt>これはどのようなテンプレートですか？</dt>
    <dd>回答に背景を付けたシンプルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか？</dt>
    <dd>背景色があることで質問と回答の区別がつきやすく、回答が長文になっても違和感を与えないデザインになります。</dd>
</dl>

.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.";
}

四角形のアイコン

文字色：#333333
「Q」の色：#75bbff
「A」の色：#ff8d8d

これはどのようなテンプレートですか？: カラフルなQ&Aリストです。
どのような特徴がありますか？: 色のおかげで、質問と回答が区別しやすくなっています。

<dl class="qa-005">
    <dt>これはどのようなテンプレートですか？</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか？</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>

.qa-005 dt,
.qa-005 dd {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 1em 2em 1em 3.3em;
    color: #333333;
}

.qa-005 dt {
    font-weight: 600;
}

.qa-005 dd + dt {
    margin-top: 1em;
}

.qa-005 dt::before,
.qa-005 dd::before {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    border-radius: 7px;
    font-weight: 600;
    font-size: 1.1em;
    line-height: 40px;
    text-align: center;
}

.qa-005 dt::before {
    border: 2px solid #75bbff;
    color: #75bbff;
    content: 'Q';
}

.qa-005 dd::before {
    border: 2px solid #ff8d8d;
    color: #ff8d8d;
    content: 'A';
}

丸いアイコン

文字色：#333333
「Q」の色：#75bbff
「A」の色：#ff8d8d

これはどのようなテンプレートですか？: カラフルなQ&Aリストです。
どのような特徴がありますか？: 色のおかげで、質問と回答が区別しやすくなっています。

<dl class="qa-003">
    <dt>これはどのようなテンプレートですか？</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか？</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>

.qa-003 dt,
.qa-003 dd {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 1em 2em 1em 3.3em;
    color: #333333;
}

.qa-003 dt {
    font-weight: 600;
}

.qa-003 dd + dt {
    margin-top: 1em;
}

.qa-003 dt::before,
.qa-003 dd::before {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    border-radius: 50%;
    font-weight: 600;
    font-size: 1.1em;
    line-height: 40px;
    text-align: center;
}

.qa-003 dt::before {
    border: 2px solid #75bbff;
    color: #75bbff;
    content: 'Q';
}

.qa-003 dd::before {
    border: 2px solid #ff8d8d;
    color: #ff8d8d;
    content: 'A';
}

四角形のアイコン＆背景色あり

文字色：#333333
「Q」の色：#75bbff
「A」の色：#ff8d8d

これはどのようなテンプレートですか？: カラフルなQ&Aリストです。
どのような特徴がありますか？: 色のおかげで、質問と回答が区別しやすくなっています。

<dl class="qa-002">
    <dt>これはどのようなテンプレートですか？</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか？</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>

.qa-002 dt,
.qa-002 dd {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 1em 2em 1em 3.1em;
    color: #333333;
}

.qa-002 dt {
    font-weight: 600;
}

.qa-002 dd + dt {
    margin-top: 1em;
}

.qa-002 dt::before,
.qa-002 dd::before {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    border-radius: 7px;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
    line-height: 40px;
    text-align: center;
}

.qa-002 dt::before {
    background-color: #75bbff;
    content: 'Q';
}

.qa-002 dd::before {
    background-color: #ff8d8d;
    content: 'A';
}

丸いアイコン＆背景色あり

文字色：#333333
「Q」の色：#75bbff
「A」の色：#ff8d8d

これはどのようなテンプレートですか？: カラフルなQ&Aリストです。
どのような特徴がありますか？: 色のおかげで、質問と回答が区別しやすくなっています。

<dl class="qa-004">
    <dt>これはどのようなテンプレートですか？</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか？</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>

.qa-004 dt,
.qa-004 dd {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0;
    padding: 1em 2em 1em 3.1em;
    color: #333333;
}

.qa-004 dt {
    font-weight: 600;
}

.qa-004 dd + dt {
    margin-top: 1em;
}

.qa-004 dt::before,
.qa-004 dd::before {
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 40px;
    left: 0;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
    line-height: 40px;
    text-align: center;
}

.qa-004 dt::before {
    background-color: #75bbff;
    content: 'Q';
}

.qa-004 dd::before {
    background-color: #ff8d8d;
    content: 'A';
}

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

下線付き

下線の色：#d6dde3
文字色：#333333

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

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

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

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

<details class="qa-006">
    <summary>これはどのようなテンプレートですか？</summary>
    <p>下線付きの、アコーディオンとして開閉できるQ&Aリストです。</p>
</details>
<details class="qa-006">
    <summary>どのような特徴がありますか？</summary>
    <p>開閉できるおかげでコンパクトに見せることができます。質問の数が多い場合などにおすすめです。</p>
</details>

.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";
}

枠線付き

枠線の色：#d6dde3
文字色：#333333
形状四角角丸

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

アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。

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

アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。

<details class="qa-001">
    <summary>これはどのようなテンプレートですか？</summary>
    <p>アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。</p>
</details>
<details class="qa-001">
    <summary>これはどのようなテンプレートですか？</summary>
    <p>アコーディオンとして開閉できるQ&Aです。コンパクトに見せることができるので、質問の数が多い場合などにおすすめです。</p>
</details>

.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";
}

白背景×シャドウ

文字色：#333333
形状四角角丸

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

白背景にシャドウを付けた、アコーディオンとして開閉できるQ&Aです。

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

コンパクトに見せられるので、質問の数が多い場合などにおすすめです。

<details class="qa-007">
    <summary>これはどのようなテンプレートですか？</summary>
    <p>白背景にシャドウを付けた、アコーディオンとして開閉できるQ&Aです。</p>
</details>
<details class="qa-007">
    <summary>どのような特徴がありますか？</summary>
    <p>コンパクトに見せられるので、質問の数が多い場合などにおすすめです。</p>
</details>

.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";
}