Без кейворда
いざという時欲しくなる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.
質問テキスト 質問テキスト 質問テキスト question?答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
/*答えテキスト*/ .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 質問をクリックすると答えが開くQ&Aデザインパート2 アイコンが’＋’ 質問テキスト 質問テキスト 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.
質問テキスト 質問テキスト 質問テキスト question?答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
/*＋アイコン*/ .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 質問をクリックすると答えが開くQ&Aデザインパート3 QAが一つのブロック 質問テキスト 質問テキスト 質問テキスト 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.
質問テキスト 質問テキスト 質問テキスト question?答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
.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 質問をクリックすると答えが開くQ&Aデザインパート4 アイコン大きめ 質問テキスト 質問テキスト 質問テキスト 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.
質問テキスト 質問テキスト 質問テキスト question?答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
/* --!アイコン */ .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 カテゴリーごとにタブ分けしたQ&Aデザイン category category category category 質問テキスト 質問テキスト 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.
質問テキスト 質問テキスト 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.
質問テキスト 質問テキスト 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.
質問テキスト 質問テキスト 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.
質問テキスト 質問テキスト question?答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text. 答えテキスト answer text.
/* 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 シンプルなQ&Aはこちらいざという時欲しくなるQ&Aページ。 よりシンプルなQ&Aのデザインを集めました。 階層が少なめでシンプルに見せたい時に使いやすいものばかりです。…