【CSS】レスポンシブで「dl dt dd」のQ&Aページを作る

シンプルな形式ですが、最初の「QとA」以外の文字にインデントが入るQ&Aページを「dl dt dd」を使って作ります。

レスポンシブなので、スマホで見ても「QとA」の下に文字が入らないようになっています。

◆まずはデモページをご覧ください。

◆HTML

<div class="qaContainer">
<dl>
<dt>質問文章</dt>
<dd>回答文章</dd>
<dt>質問文章</dt>
<dd>回答文章</dd>
<dt>質問文章</dt>
<dd>回答文章</dd>
</dl>
</div>

HTMLはシンプルな形式です。

◆CSS

.qaContainer dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #cce6ff;
text-indent: -25px;
}
.qaContainer dt:before {
content: "Q.";
font-weight: bold;
margin-right: 7px;
}
.qaContainer dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer dd:before {
content: "A.";
color: #1771c6;
font-weight: bold;
margin-right: 7px;
}

「margin」などで位置を調整してます。

このままの形式でよければコピペして、後は色を変更するくらいでよいかと思います。