<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のデザインを集めました。 質問の量が多くごちゃつきやすい時などに便利です。 タブ切り替えでカテゴリー別に表示するものもご用意しました。…