[パーツ]Q&A 大カテゴリーがあるシンプルなQ&Aデザインパート2

CSS HTML
 2018.02.12
 2018.03.20

シンプルなQ&Aデザインパート2

大カテゴリーがあるシンプルなQ&Aデザインパート2です。

browser:  65 11 20 10 
ニャン易度 
category name カテゴリーなど category name カテゴリーなど category name カテゴリーなど
質問テキスト 質問テキスト 質問テキスト question? 質問テキスト 質問テキスト 質問テキスト question? 質問テキスト 質問テキスト 質問テキスト question?
答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
category name カテゴリーなど
質問テキスト 質問テキスト 質問テキスト question?
答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
質問テキスト 質問テキスト 質問テキスト question? 質問テキスト 質問テキスト 質問テキスト question? 質問テキスト 質問テキスト 質問テキスト 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_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';
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?