ホームページを作成していると「よくある質問」的なページを作ることがあります。これまで、何度か作って来たのですが、いい加減テンプレート化しておこうと思いましたので、ここで共有させていただきます。
dlタグを使ってQ&Aを作る方法
使うタグは、いろいろあると思いますが、要素の意味から考えると、定義リストが良いかなと思います。
ボタンで表示を切り替えてご覧ください。
HTML
<dl class="faq"> |
<dt>質問です</dt> |
<dd>回答です。</dd> |
<dt>質問です</dt> |
<dd>回答です。</dd> |
</dl> |
CSS
dl.faq dt:before, |
dl.faq dd:before{ |
font-size: 2em; |
margin-right: .5em; |
} |
dl.faq dt:before{ |
content:"Q"; |
color: #c80021; |
} |
dl.faq dd:before{ |
content:"A"; |
color: #0085C8; |
} |
dl.faq dd{ |
border-bottom: 1px dotted #999; |
margin-left: 0; |
} |
dtの疑似要素::beforeには「Q」の文字、ddの疑似要素::beforeには、「A」の文字を表示させて、それぞれ色を付けました。
それから、それぞれの質問と回答がひとつのブロックとして視覚的に分かりやすいようにddの下に、ドット線を付けてみました。
もう一つ作ってみました。
HTML
<dl class="faq"> |
<dt>質問です</dt> |
<dd>回答です。</dd> |
<dt>質問です</dt> |
<dd>回答です。</dd> |
</dl> |
CSS
.faq{ |
background: #F6F6F6; |
padding: 1em; |
border-radius: 1em; |
} |
.faq dt{ |
padding-bottom: 5px; |
margin-bottom: 5px; |
border-bottom: 1px dotted; |
font-weight: bold; |
} |
.faq dt:before{ |
content: "Q"; |
font-weight: normal; |
background: #cc0000; |
color: #fff; |
width: 1.5em; |
height: 1.5em; |
line-height: 1.6; |
text-align: center; |
display: inline-block; |
border-radius: 1em; |
margin-right: .5em; |
} |
.faq dd{ |
margin-bottom: 2em; |
} |
.faq dd:last-child{ |
margin-bottom: 0; |
} |
かなり単純な感じになっていますが、デザイン的な部分はそれぞれの好みがあると思いますのでいろいろ編集してみてください。以上が、dlタグを使ってQ&Aを作る方法でした。
