いざという時欲しくなるQ&Aページ。
よりシンプルなQ&Aのデザインを集めました。
階層が少なめでシンプルに見せたい時に使いやすいものばかりです。
アイコンはfontawesomeを使用しています。
<div class="cp_qa">
<dl>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
</dl>
</div>
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
font-family: 'FontAwesome', sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa dt {
position: relative;
margin: 0 0 1.5em 0;
}
.cp_qa dd {
position: relative;
margin: 0 0 2em 0;
padding: 0 0 1.5em 2em;
border-bottom: 1px dotted #0097a7;
}
.cp_qa dt::before, .cp_qa dd::before {
font-size: 1.2em;
margin: 0 0.5em 0 0;
color: #ffffff;
border-radius: 50%;
display: inline-block;
width: 1.3em;
height: 1.3em;
line-height: 1.2em;
}
.cp_qa dt::before {
padding: 0.1em 0.3em;
content: '\f128';
background: #f57c00;
}
.cp_qa dd::before {
padding: 0.12em 0.45em;
content: '\f12a';
background: #0097a7;
}
.cp_qa dt::after, .cp_qa dd::after {
position: absolute;
top: 0.5em;
display: inline-block;
width: 0;
height: 0;
content: '';
border-width: 5px 0 5px 5px;
border-style: solid;
}
.cp_qa dt::after {
left: 1.5em;
border-color: transparent transparent transparent #f57c00;
}
.cp_qa dd::after {
left: 3.5em;
border-color: transparent transparent transparent #0097a7;
}
<div class="cp_qa">
<dl>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
</dl>
</div>
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
font-family: 'FontAwesome', sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa dt,.cp_qa dd {
position: relative;
padding: 0.5em;
box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
border-radius: 0.3em;
}
.cp_qa dt {
margin: 0 3em 1em 3em;
background: #ffe0b2;
}
.cp_qa dd {
margin: 0 3em 3em 3em;
background: #b2ebf2;
}
/* 吹き出し▶︎ */
.cp_qa dt::before,.cp_qa dd::before{
position: absolute;
z-index: 99;
top: 0.5em;
display: inline-block;
width: 0;
height: 0;
content: '';
border-style: solid;
}
/* 質問吹き出し▶︎ */
.cp_qa dt::before {
left: -0.5em;
border-width: 5px 8.7px 5px 0;
border-color: transparent #ffe0b2 transparent transparent;
}
/* 答え吹き出し▶︎ */
.cp_qa dd::before {
right: -0.5em;
border-width: 5px 0 5px 8.7px;
border-color: transparent transparent transparent #b2ebf2;
}
/* ?!アイコン */
.cp_qa dt::after,.cp_qa dd::after {
font-size: 1.2em;
position: absolute;
top: 0;
color: #ffffff;
border-radius: 50%;
display: inline-block;
width: 1.5em;
height: 1.5em;
line-height: 1.2em;
}
/* ?アイコン */
.cp_qa dt::after {
left: -2.5em;
margin: 0 0.5em 0 0;
padding: 0.2em 0.4em;
content: '\f128';
background: #f57c00;
}
/* !アイコン */
.cp_qa dd::after {
right: -2.5em;
margin: 0 0 0 0.5em;
padding: 0.2em 0.55em;
content: '\f12a';
background: #0097a7;
}
質問テキスト 質問テキスト 質問テキスト question?
答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
質問テキスト 質問テキスト 質問テキスト question?
答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
<div class="cp_qa">
<div class="cp_qanda">
<p class="quest">質問テキスト</p>
<p class="answer">答えテキスト</p>
</div>
<div class="cp_qanda">
<p class="quest">質問テキスト</p>
<p class="answer">答えテキスト</p>
</div>
</div>
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa .cp_qanda {
line-height: 1.5;
position: relative;
margin: 0 0 2em 15em;
padding: 0 0 0 1em;
border-left: 1px solid #333333;
}
.cp_qa .quest {
font-weight: bold;
position: absolute;
bottom: -1em;
left: -15em;
display: inline-block;
width: 14em;
text-align: right;
}
.cp_qa .cp_qanda::before {
font-family: serif;
font-size: 4em;
position: absolute;
top: -0.4em;
left: -3.7em;
display: inline-block;
width: 9em;
content: 'Q';
opacity: 0.1;
}
.cp_qa .answer {
min-height: 3em;
}
<div class="cp_qa">
<h1>category</h1>
<dl>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
</dl>
</div>
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
font-family: sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa {
margin: 0 0 2em 10px;
padding: 1em 1em 0.5em 1em;
background: #e1f5fe;
}
.cp_qa h1 {
font-size: 1.2em;
position: relative;
margin-right: 1em;
margin-left: -26px;
padding: 0.3em;
color: #ffffff;
background-color: #42a5f5;
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.cp_qa h1::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 0;
height: 0;
content: '';
border-width: 0 10px 10px 0;
border-style: solid;
border-color: transparent #1976d2 transparent transparent;
}
.cp_qa dl {
margin: 0;
}
.cp_qa dt {
margin-bottom: 0.5em;
padding: 0.2em 0.5em 0.5em 2em;
border-radius: 0.2em;
background: #ffb74d;
}
.cp_qa dd {
margin-bottom: 1em;
margin-left: 0;
padding: 0.5em 1em 1.5em 3em;
}
/* QAアイコン */
.cp_qa dt::before,.cp_qa dd::before{
font-size: 1.5em;
color: #ffffff;
}
.cp_qa dt::before {
margin: 0.3em 0.3em 0 -1em;
content: 'Q';
}
.cp_qa dd::before {
margin: 0 0.5em 0 -2em;
padding: 0.2em 0.4em;
content: 'A';
border-radius: 0.2em;
background: #00bcd4;
}
<div class="cp_qa">
<div class="cp_cat">カテゴリーなど</div>
<dl>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
</dl>
</div>
<div class="cp_qa">
<div class="cp_cat">カテゴリーなど</div>
<dl>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
<dt>質問テキスト</dt>
<dd>答えテキスト</dd>
</dl>
</div>
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
font-family: 'FontAwesome', sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa {
position: relative;
}
.cp_qa .cp_cat {
font-weight: bold;
position: absolute;
top: 0;
left: 0;
display: inline-block;
width: 14.5em;
height: auto;
padding: 0em;
text-align: center;
}
.cp_qa dl {
line-height: 1.5;
position: relative;
display: inline-block;
margin: 0 0 2em 15em;
padding: 0 0 0 1em;
border-left: 1px solid #333333;
}
.cp_qa dl::before {
font-size: 5em;
position: absolute;
display: inline-block;
top: 0;
left: -2em;
width: 1em;
height: 1em;
line-height: 1em;
content: '\f059';
opacity: 0.1;
}
.cp_qa dt {
margin: 0 0 1em 3em;
}
.cp_qa dd {
margin: 0 0 1.5em 3em;
}
.cp_qa dt::before,.cp_qa dd::before {
font-family: serif;
font-size: 1.3em;
margin: 0 1em 0 -1.7em;
}
.cp_qa dt::before {
content: 'Q';
}
.cp_qa dd::before {
content: 'A';
}
コピペでできる!CSSとhtmlだけの質問をクリックしたら答えが出てくるQ&Aデザイン5選 | copypet.jp|パーツで探す、web制作に使えるコピペサイト。
いざという時欲しくなるQ&Aページ。 質問をクリックしたら答えが出てくるQ&Aのデザインを集めました。 質問の量が多くごちゃつきやすい時などに便利です。 タブ切り替えでカテゴリー別に表示するものもご用意しました。…CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info