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

CSS HTML
 
 

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

browser:  ✔︎ ✔︎ ✔︎ 

シンプルな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_qa01">
  <dl>
    <dt>質問テキスト</dt>
    <dd>答えテキスト</dd>
    <dt>質問テキスト</dt>
    <dd>答えテキスト</dd>
  </dl>
</div>
.cp_qa01 dt {
  position: relative;
  margin: 0 0 1.5em 30px;
}
.cp_qa01 dd {
  position: relative;
  margin: 0 0 2em 0;
  padding: 0 0 10px 60px;
  border-bottom: 1px dotted #0097a7;
}
.cp_qa01 dt::before,
.cp_qa01 dd::before {
  position: absolute;
  margin: 0 0.5em 0 -30px;
  color: #ffffff;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  clip-path: circle(50% at 50% 50%);
}
.cp_qa01 dt::before {
  content: '？';
  background: #f57c00;
}
.cp_qa01 dd::before {
  content: '！';
  background: #0097a7;
}
.cp_qa01 dt::after,
.cp_qa01 dd::after {
  position: absolute;
  top: 7px;
  width: 10px;
  height: 10px;
  content: '';
  clip-path: polygon(100% 53%, 0 0, 0 100%);
}
.cp_qa01 dt::after {
  left: -10px;
  background: #f57c00;
}
.cp_qa01 dd::after {
  left: 50px;
  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_qa02">
  <dl>
    <dt>質問テキスト</dt>
    <dd>答えテキスト</dd>
    <dt>質問テキスト</dt>
    <dd>答えテキスト</dd>
  </dl>
</div>
.cp_qa02 dt,
.cp_qa02 dd {
  position: relative;
  padding: 0.5em;
  box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
  border-radius: 0.3em;
}
.cp_qa02 dt {
  margin: 0 3em 1em 3em;
  background: #ffe0b2;
}
.cp_qa02 dd {
  margin: 0 3em 3em 3em;
  background: #b2ebf2;
}
/* 吹き出し▶︎ */
.cp_qa02 dt::before,
.cp_qa02 dd::before{
  position: absolute;
  content: '';
  top: 5px;
  width: 10px;
  height: 10px;
  clip-path: polygon(0 0, 0% 100%, 100% 40%);
}
/* 質問吹き出し▶︎ */
.cp_qa02 dt::before {
  left: -0.5em;
  background: #ffe0b2;
  transform: scaleX(-1);
}
/* 答え吹き出し▶︎ */
.cp_qa02 dd::before {
  right: -0.5em;
  background: #b2ebf2;
}
/* ?!アイコン */
.cp_qa02 dt::after,
.cp_qa02 dd::after {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  width: 24px;
  height: 24px;
  color: #ffffff;
  clip-path: circle(50% at 50% 50%);
}
/* ?アイコン */
.cp_qa02 dt::after {
  left: -2.5em;
  content: '？';
  background: #f57c00;
}
/* !アイコン */
.cp_qa02 dd::after {
  right: -2.5em;
  content: '！';
  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_qa03">
<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_qa03 .cp_qanda {
  display: flex;
}
.cp_qa03 .quest {
  position: relative;
  display: flex;
  align-items: flex-end;
  font-weight: bold;
  text-align: right;
  width: 30%;
  padding: 0 10px 0 0;
  border-right: 1px solid #333333;
}
.cp_qa03 .quest::before {
  position: absolute;
  content: 'Q';
  top: -10px;
  font-family: serif;
  font-size: 4em;
  line-height: 1;
  opacity: 0.1;
}
.cp_qa03 .answer {
  width: 70%;
  padding: 0 0 0 10px;
}

大カテゴリーがあるシンプルな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_qa04">
<h1>category</h1>
<dl>
  <dt>質問テキスト</dt>
  <dd>答えテキスト</dd>
  <dt>質問テキスト</dt>
  <dd>答えテキスト</dd>
</dl>
</div>
.cp_qa04 {
  margin-left: 10px;
  padding: 1em 1em 0 20px;
  background: #e1f5fe;
}
/*カテゴリー名のリボン*/
.cp_qa04 h1 {
  font-size: 120%;
  position: relative;
  margin: 0 1em 1em -30px;
  padding: 0.3em;
  color: #ffffff;
  background-color: #42a5f5;
  box-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.cp_qa04 h1::after {
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 10px;
  height: 10px;
  background: #1976d2;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
/*QAテキスト*/
.cp_qa04 dl {
  margin: 0;
}
.cp_qa04 dt {
  margin-bottom: 0.5em;
  padding: 0.2em 0.5em 0.5em 2em;
  border-radius: 5px;
  background: #ffb74d;
}
.cp_qa04 dd {
  margin-bottom: 1em;
  margin-left: 0;
  padding: 0.5em 1em 1.5em 3em;
}
/* QAアイコン */
.cp_qa04 dt::before,
.cp_qa04 dd::before{
  font-size: 130%;
  color: #ffffff;
}
.cp_qa04 dt::before {
  margin: 0.3em 0.3em 0 -1em;
  content: 'Q';
}
.cp_qa04 dd::before {
  margin: 0 0.7em 0 -2.2em;
  padding: 0.2em 0.4em;
  content: 'A';
  border-radius: 5px;
  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_qa05">
<div class="cp_cat">カテゴリーなど</div>
<dl>
  <dt>質問テキスト</dt>
  <dd>答えテキスト</dd>
</dl>
</div>
<div class="cp_qa05">
<div class="cp_cat">カテゴリーなど</div>
<dl>
  <dt>質問テキスト</dt>
  <dd>答えテキスト</dd>
  <dt>質問テキスト</dt>
  <dd>答えテキスト</dd>
</dl>
</div>
.cp_qa05 {
  display: flex;
}
.cp_qa05 .cp_cat {
  position: relative;
  font-weight: bold;
  display: flex;
  justify-content: center;
  width: 40%;
  height: auto;
  padding: 0em;
  text-align: center;
}
/*？アイコン*/
.cp_qa05 .cp_cat::before {
  position: absolute;
  content: '?';
  line-height: 1;
  font-size: 5em;
  color: #ffffff;
  width: 1em;
  height: 1em;
  background:#333333;
  border-radius: 50px;
  opacity: 0.1;
}
/*質問と答えテキスト*/
.cp_qa05 dl {
  position: relative;
  margin: 0;
  line-height: 1.5;
  width: 60%;
  border-left: 1px solid #333333;
}
.cp_qa05 dt {
  margin: 0 0 1em 3em;
}
.cp_qa05 dd {
  margin: 0 0 1.5em 3em;
}
/*QAアイコン*/
.cp_qa05 dt::before,
.cp_qa05 dd::before {
  font-family: serif;
  font-size: 1.3em;
  margin: 0 1em 0 -1.7em;
}
.cp_qa05 dt::before {
  content: 'Q';
}
.cp_qa05 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

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