コピペでできる！CSSとhtmlだけの質問をクリックしたら答えが出てくるQ&Aデザイン5選

CSS HTML
 
 

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

browser:  ✔︎ ✔︎ ✔︎ 

質問をクリックしたら答えが出てくるQ&Aデザイン[5種]

質問をクリックすると答えが開くQ&Aデザイン アイコンが’▼’

ニャン易度

答えテキスト 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.

答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.

<div class="cp_qa01">
  <div class="cp_actab">
  <input id="cp_tabfour011" type="checkbox" name="tabs">
  <label for="cp_tabfour011">質問テキスト</label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
  <div class="cp_actab">
  <input id="cp_tabfour012" type="checkbox" name="tabs">
  <label for="cp_tabfour012">質問テキスト</label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
  <div class="cp_actab">
  <input id="cp_tabfour013" type="checkbox" name="tabs">
  <label for="cp_tabfour013">質問テキスト</label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
</div>
.cp_qa01 {
  border-top: 1px solid #1b2538;
}
.cp_qa01 .cp_actab input {
  display: none;
}
/*質問テキスト*/
.cp_qa01 .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 1px;
  color: #1b2538;
}
.cp_qa01 .cp_actab label {
  font-weight: bold;
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 0 0;
  padding: 1em 2em 1em 1em;
  cursor: pointer;
  border-bottom: 1px solid #1b2538;
}
.cp_qa01 .cp_actab .cp_actab-content p {
  margin: 1em;
}
.cp_qa01 .cp_actab label:hover {
  color: #00838F;
}
.cp_qa01 .cp_actab input:checked ~ label {
  color: #00838F;
}
/*答えテキスト*/
.cp_qa01 .cp_actab .cp_actab-content {
  overflow: hidden;
  max-height: 0;
  color: #ffffff;
  background: rgba(0, 131, 143, 0.5);
  transition: max-height 0.5s ease;
}
.cp_qa01 .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
}
/*▼アイコン*/
.cp_qa01 .cp_actab label::after {
  position: absolute;
  content: '';
  right: 10px;
  width: 15px;
  height: 10px;
  background: #1b2538;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transition: all 0.5s ease;
}
.cp_qa01 .cp_actab label:hover::after {
  background: #00838F;
}
.cp_qa01 .cp_actab input[type=checkbox]:checked + label::after {
  transform: rotateX(180deg);
  background: #00838F;
}

質問をクリックすると答えが開くQ&Aデザインパート2 アイコンが’＋’

ニャン易度
答えテキスト 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.
答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
<div class="cp_qa02">
  <div class="cp_actab">
    <input id="cp_tabfour021" type="checkbox" name="tabs">
    <label for="cp_tabfour021">質問テキスト</label>
    <div class="cp_actab-content">答えテキスト</div>
  </div>
  <div class="cp_actab">
    <input id="cp_tabfour022" type="checkbox" name="tabs">
    <label for="cp_tabfour022">質問テキスト</label>
    <div class="cp_actab-content">答えテキスト</div>
  </div>
  <div class="cp_actab">
    <input id="cp_tabfour023" type="checkbox" name="tabs">
    <label for="cp_tabfour023">質問テキスト</label>
    <div class="cp_actab-content">答えテキスト</div>
  </div>
</div>
.cp_qa02 {
  margin: 0 auto;
}
.cp_qa02 .cp_actab input[type=checkbox] {
  display: none;
}
.cp_qa02 .cp_actab {
  padding: 20px 0;
  border-bottom: 1px dotted #cccccc;
}
/*質問テキスト*/
.cp_qa02 label {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 120%;
  width: calc(100% - 70px);
  margin: 0 0 0 50px;
  padding: 10px;
  cursor: pointer;
}
/*＋アイコン*/
.cp_qa02 label::before {
  position: absolute;
  content: '+';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 210%;
  font-weight: bold;
  margin-left: -50px;
  padding: 0 0 0 0;
  transition: 0.4s ease;
}
.cp_qa02 .cp_actab input[type=checkbox]:checked ~ label::before {
  transform: rotate(45deg);
}
/*答えテキスト*/
.cp_qa02 .cp_actab-content {
  font-size: 1em;
  position: relative;
  overflow: hidden;
  height: 0;
  margin: 0 40px;
  padding: 0 14px;
  transition: 0.4s ease;
  opacity: 0;
}
.cp_qa02 .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
  height: auto;
  padding: 14px;
  opacity: 1;
}

質問をクリックすると答えが開くQ&Aデザインパート3 QAが一つのブロック

ニャン易度

答えテキスト 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.

答えテキスト 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_actab">
    <input id="cp_tabfour031" type="checkbox" name="tabs">
    <label for="cp_tabfour031">質問テキスト</label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
  <div class="cp_actab">
    <input id="cp_tabfour032" type="checkbox" name="tabs">
    <label for="cp_tabfour032">質問テキスト</label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
  <div class="cp_actab">
    <input id="cp_tabfour033" type="checkbox" name="tabs">
    <label for="cp_tabfour033">質問テキスト</label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
</div>
.cp_qa03 .cp_actab {
  position: relative;
  width: 100%;
  margin: 0 0 1em 0;
  color: #1b2538;
}
.cp_qa03 .cp_actab input {
  display: none;
}
/* 質問 */
.cp_qa03 .cp_actab label {
  font-weight: bold;
  line-height: 1.6em;
  position: relative;
  display: block;
  margin: 0 0 0 0;
  padding: 1em 2em 1em 2.5em;
  cursor: pointer;
  text-indent: 1em;
  border-radius: 0.5em;
  background: rgba(27,37,56,0.1);
}
.cp_qa03 .cp_actab label::before {
  content: 'Q';
  font-family: serif;
  font-size: 1.5em;
  margin-left: -2em;
  padding-right: 0.5em;
}
.cp_qa03 .cp_actab label:hover {
  color: #00838f;
  transition: all 0.3s;
}
/* --質問の＋アイコン */
.cp_qa03 .cp_actab label::after {
  position: absolute;
  top: 0;
  right: 0;
  content: '+';
  font-size: 1.7em;
  font-weight: bold;
  line-height: 2em;
  display: inline-block;
  width: 2em;
  height: 2em;
  transition: transform 0.3s;
}
/* 答え */
.cp_qa03 .cp_actab .cp_actab-content {
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2.5em;
  border-radius: 0 0 0.5em 0.5em;
  transition: max-height 0.2s;
}
.cp_qa03 .cp_actab .cp_actab-content::before {
  position: absolute;
  content: 'A';
  font-family: serif;
  font-size: 1.5em;
  margin: 0.4em 0 0 -1em;
  padding: 0;
}
.cp_qa03 .cp_actab .cp_actab-content p {
  margin: 1em 1em 1em 0;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa03 .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
  border: 10px solid rgba(27,37,56,0.1);
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa03 .cp_actab input:checked ~ label {
  color: #00838f;
  border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa03 .cp_actab input[type=checkbox]:checked + label::after {
  transform: rotateZ(45deg);
  transform-origin: 50% 50%;
}

質問をクリックすると答えが開くQ&Aデザインパート4 アイコン大きめ

ニャン易度

答えテキスト 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.

答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.

<div class="cp_qa04">
  <div class="cp_actab">
    <input id="cp_tabfour041" type="checkbox" name="tabs">
    <label for="cp_tabfour041"><span>質問テキスト</span></label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
  <div class="cp_actab">
    <input id="cp_tabfour042" type="checkbox" name="tabs">
    <label for="cp_tabfour042"><span>質問テキスト</span></label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
  <div class="cp_actab">
    <input id="cp_tabfour043" type="checkbox" name="tabs">
    <label for="cp_tabfour043"><span>質問テキスト</span></label>
    <div class="cp_actab-content">
    <p>答えテキスト</p>
    </div>
  </div>
</div>
.cp_qa04 .cp_actab {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 0 1em 0;
  color: #ffffff;
}
.cp_qa04 .cp_actab input {
  display: none;
}
/* 質問 */
.cp_qa04 .cp_actab label {
  position: relative;
  display: block;
  margin: 0 0.5em 0.5em 2em;
  padding: 1em 0 2em 0;
  cursor: pointer;
  border-radius: 5px;
  background: #ff5722;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
.cp_qa04 .cp_actab label span {
  display: block;
  padding: 0 2em 1em 2em;
  border-bottom: 1px solid #ffffff;
}
/* --?アイコン */
.cp_qa04 .cp_actab label::before {
  position: absolute;
  left: -30px;
  content: '？';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 2em;
  font-weight: bold;
  z-index: 99;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #ff5722;
}
/* --▼アイコン */
.cp_qa04 .cp_actab label::after {
  position: absolute;
  right: 10px;
  bottom: 10px;
  content: '';
  width: 15px;
  height: 8px;
  background: #ffffff;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transition: all 0.5s ease;
}
/* 答え */
.cp_qa04 .cp_actab .cp_actab-content {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-height: 0;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 5em;
  transition: max-height 0.5s ease;
  color: #ffffff;
}
/* --!アイコン */
.cp_qa04 .cp_actab .cp_actab-content::before {
  position: absolute;
  left: 50px;
  content: '！';
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-size: 2em;
  font-weight: bold;
  z-index: 99;
  border: 3px solid #ffffff;
  border-radius: 50%;
  background: #2196f3;
}
.cp_qa04 .cp_actab .cp_actab-content p {
  margin: 0.5em 0.5em 0.5em 0;
  padding: 1em 1em 1em 3em;
  border-radius: 0.3em;
  background: #2196f3;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa04 .cp_actab input:checked ~ .cp_actab-content {
  max-height: 40em;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa04 .cp_actab input[type=checkbox]:checked + label::after {
  transform: scale(1, -1);
}

カテゴリーごとにタブ分けしたQ&Aデザイン

ニャン易度
答えテキスト 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.
答えテキスト 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.
答えテキスト 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.
答えテキスト 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.
答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
<div class="cp_qa05">
  <input id="cp_conttab1" type="radio" name="tabs" checked>
  <label for="cp_conttab1" class="cp_tabitem">category</label>
  <input id="cp_conttab2" type="radio" name="tabs">
  <label for="cp_conttab2" class="cp_tabitem">category</label>
  <input id="cp_conttab3" type="radio" name="tabs">
  <label for="cp_conttab3" class="cp_tabitem">category</label>
  <input id="cp_conttab4" type="radio" name="tabs">
  <label for="cp_conttab4" class="cp_tabitem">category</label>
  <div id="cp_content1">
    <div class="cp_qain">
      <div class="cp_actab">
        <input id="cp_tabfour051" type="checkbox" name="qatab">
        <label for="cp_tabfour051">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
      <div class="cp_actab">
        <input id="cp_tabfour052" type="checkbox" name="qatab">
        <label for="cp_tabfour052">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
      <div class="cp_actab">
        <input id="cp_tabfour053" type="checkbox" name="qatab">
        <label for="cp_tabfour053">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
    </div>
  </div>
  <div id="cp_content2">
    <p>説明テキスト 説明テキスト 説明テキスト</p>
    <div class="cp_qain">
      <div class="cp_actab">
        <input id="cp_tabfour054" type="checkbox" name="qatab">
        <label for="cp_tabfour054">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>

      <div class="cp_actab">
        <input id="cp_tabfour055" type="checkbox" name="qatab">
        <label for="cp_tabfour055">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
    </div>
  </div>
  <div id="cp_content3">
    <p>説明テキスト 説明テキスト 説明テキスト</p>
    <div class="cp_qain">
      <div class="cp_actab">
        <input id="cp_tabfour056" type="checkbox" name="qatab">
        <label for="cp_tabfour056">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
      <div class="cp_actab">
        <input id="cp_tabfour057" type="checkbox" name="qatab">
        <label for="cp_tabfour057">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
    </div>
  </div>
  <div id="cp_content4">
    <p>説明テキスト 説明テキスト 説明テキスト</p>
    <div class="cp_qain">
      <div class="cp_actab">
        <input id="cp_tabfour058" type="checkbox" name="qatab">
        <label for="cp_tabfour058">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
      <div class="cp_actab">
        <input id="cp_tabfour059" type="checkbox" name="qatab">
        <label for="cp_tabfour059">質問テキスト</label>
        <div class="cp_actab-content">答えテキスト</div>
      </div>
    </div>
  </div>
</div>
.cp_qa05 *, .cp_qa05 *:before, .cp_qa05 *:after {
  font-family: 'FontAwesome', sans-serif;
}
.cp_qa05 {
  margin: 0 auto;
  background: #ffffff;
}
.cp_qa05 input {
  display: none;
}
/* カテゴリー */
.cp_qa05 #cp_content1,
.cp_qa05 #cp_content2,
.cp_qa05 #cp_content3,
.cp_qa05 #cp_content4 {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #dddddd;
}
.cp_qa05 label.cp_tabitem {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 15px;
  text-align: center;
  color: #bbbbbb;
  border: 1px solid transparent;
}
.cp_qa05 label.cp_tabitem:before {
  margin-right: 10px;
}
.cp_qa05 label.cp_tabitem[for*='1']:before { content: '\f2bd'; }
.cp_qa05 label.cp_tabitem[for*='2']:before { content: '\f15c'; }
.cp_qa05 label.cp_tabitem[for*='3']:before { content: '\f0f4'; }
.cp_qa05 label.cp_tabitem[for*='4']:before { content: '\f001'; }
.cp_qa05 label.cp_tabitem:hover {
  cursor: pointer;
  color: #888888;
}
.cp_qa05 input:checked + label {
  color: #555555;
  border: 1px solid #dddddd;
  border-bottom: 1px solid #ffffff;
}
/* --ブロックのバーの色 */
.cp_qa05 input:checked + label[for*='1'] {
  border-top: 5px solid #00BCD4;
}
.cp_qa05 input:checked + label[for*='2'] {
  border-top: 5px solid #FF5722;
}
.cp_qa05 input:checked + label[for*='3'] {
  border-top: 5px solid #03A9F4;
}
.cp_qa05 input:checked + label[for*='4'] {
  border-top: 5px solid #E91E63;
}
@media screen and (max-width: 650px) {
  .cp_qa05 label.cp_tabitem {
    font-size: 0;
  }
  label:before {
    font-size: 18px;
    margin: 0;
  }
}
@media screen and (max-width: 400px) {
  .cp_qa05 label.cp_tabitem {
    padding: 15px;
  }
  .cp_qa05 label.cp_tabitem:before {
    margin-right: 0px;
  }
}
/* QAブロック */
.cp_qa05 #cp_conttab1:checked ~ #cp_content1,
.cp_qa05 #cp_conttab2:checked ~ #cp_content2,
.cp_qa05 #cp_conttab3:checked ~ #cp_content3,
.cp_qa05 #cp_conttab4:checked ~ #cp_content4 {
  display: block;
}
.cp_qa05 .cp_qain {
  overflow-x: hidden;
  margin: 0 auto;
  color: #333333;
}
.cp_qa05 .cp_qain .cp_actab {
  padding: 20px 0;
  border-bottom: 1px dotted #cccccc;
}
/* 質問 */
.cp_qa05 .cp_qain label {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 10px 0 48px;
  cursor: pointer;
}
/* ＋アイコン */
.cp_qa05 .cp_qain .cp_plus {
  font-size: 2em;
  line-height: 100%;
  position: absolute;
  z-index: 5;
  margin-top: 3px;
  margin-left: 10px;
  transition: 0.2s ease;
}
/* 答え */
.cp_qa05 .cp_qain .cp_actab-content {
  position: relative;
  overflow: hidden;
  height: 0;
  margin: 0 10px 0 48px;
  padding: 14px 0;
  transition: 0.4s ease;
  opacity: 0;
}
/* 質問を開いた時の仕様 */
.cp_qa05 .cp_qain .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
  height: auto;
  opacity: 1;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa05 .cp_qain .cp_actab input[type=checkbox]:checked ~ .cp_plus {
  transform: rotate(45deg);
}

シンプルなQ&Aはこちら

copypet.jp

コピペでできる！CSSとhtmlだけのシンプルなQ&Aデザイン5選 | copypet.jp｜パーツで探す、web制作に使えるコピペサイト。

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

copypet.jp

記事を見る

copypet.jp

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

More Info

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