コピペでできる！CSSとhtmlだけのシンプルなQ&Aデザイン5選

CSS HTML
 2018.02.12
 2019.01.17

いざという時欲しくなるQ&Aページ。
よりシンプルなQ&Aのデザインを集めました。
階層が少なめでシンプルに見せたい時に使いやすいものばかりです。

アイコンはfontawesomeを使用しています。

fontawesome.io

Font Awesome, the iconic font and CSS toolkit

Font Awesome, the iconic font and CSS framework……

fontawesome.com

ホームページを見る

browser:  65 11 20 10 

シンプルなQ&Aデザイン[5種]

吹き出しアイコン付きQ&Aデザイン

ニャン易度
質問テキスト 質問テキスト 質問テキスト 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">
<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;
}

吹き出しQ&Aデザイン

ニャン易度
質問テキスト 質問テキスト 質問テキスト 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">
<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;
}

左右に分けたシンプルなQ&Aデザイン

ニャン易度

質問テキスト 質問テキスト 質問テキスト 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;
}

大カテゴリーがあるシンプルなQ&Aデザイン

ニャン易度

category

質問テキスト 質問テキスト 質問テキスト question? 質問テキスト 質問テキスト 質問テキスト question? 質問テキスト 質問テキスト 質問テキスト 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">
<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;
}

カテゴリーとQAを左右に分けたデザイン

ニャン易度
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';
}

クリックしたら答えが出てくるQ&A

copypet.jp

コピペでできる！CSSとhtmlだけの質問をクリックしたら答えが出てくるQ&Aデザイン5選 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

いざという時欲しくなるQ&Aページ。 質問をクリックしたら答えが出てくるQ&Aのデザインを集めました。 質問の量が多くごちゃつきやすい時などに便利です。 タブ切り替えでカテゴリー別に表示するものもご用意しました。…

copypet.jp

記事を見る

copypet.jp

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

More Info

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