スマートフォンのモック
四角形のアイコン
丸いアイコン
四角形のアイコン&背景色あり

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

  • HTML
  • CSS
  • カラー調整対応
  • レスポンシブ対応
  • アコーディオン対応

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

リスト型のQ&A

リスト型のQ&Aの四角形のアイコンver

四角形のアイコン

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1
デザインを調整する
これはどのようなテンプレートですか?
カラフルなQ&Aリストです。
どのような特徴がありますか?
色のおかげで、質問と回答が区別しやすくなっています。
step2
HTMLをコピペする
HTML
<dl class="qa-005">
    <dt>これはどのようなテンプレートですか?</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか?</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>
step3
CSSをコピペする
CSS
.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';
}
リスト型のQ&Aの丸いアイコンver

丸いアイコン

step1
デザインを調整する
これはどのようなテンプレートですか?
カラフルなQ&Aリストです。
どのような特徴がありますか?
色のおかげで、質問と回答が区別しやすくなっています。
step2
HTMLをコピペする
HTML
<dl class="qa-003">
    <dt>これはどのようなテンプレートですか?</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか?</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>
step3
CSSをコピペする
CSS
.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';
}
リスト型のQ&Aの四角形のアイコン&背景色ありver

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

step1
デザインを調整する
これはどのようなテンプレートですか?
カラフルなQ&Aリストです。
どのような特徴がありますか?
色のおかげで、質問と回答が区別しやすくなっています。
step2
HTMLをコピペする
HTML
<dl class="qa-002">
    <dt>これはどのようなテンプレートですか?</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか?</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>
step3
CSSをコピペする
CSS
.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';
}
リスト型のQ&Aの丸いアイコン&背景色ありver

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

step1
デザインを調整する
これはどのようなテンプレートですか?
カラフルなQ&Aリストです。
どのような特徴がありますか?
色のおかげで、質問と回答が区別しやすくなっています。
step2
HTMLをコピペする
HTML
<dl class="qa-004">
    <dt>これはどのようなテンプレートですか?</dt>
    <dd>カラフルなQ&Aリストです。</dd>
    <dt>どのような特徴がありますか?</dt>
    <dd>色のおかげで、質問と回答が区別しやすくなっています。</dd>
</dl>
step3
CSSをコピペする
CSS
.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

アコーディオン型のQ&Aの枠線付きver

枠線付き

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: 5px;
    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 #777;
    border-right: 3px solid #777;
    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";
}
アコーディオン型のQ&Aの下線付きver

下線付き

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 #777;
    border-right: 3px solid #777;
    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";
}