Q1ここにテキストが入ります
Q2ここにテキストが入ります
Q3ここにテキストが入ります
Q4ここにテキストが入ります
Q5ここにテキストが入ります
完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。
下記Beyondコード
JS head
<!-- タグ設定のJavaScript headに以下をカットして貼り付けてください。
同一widgetを複数追加する場合、複数回貼付けは不要です。 -->
<script>
var revealBtnFncMulti = revealBtnFncMulti || {};
(function(_) {
_.init = function() {
var questionBox = Array.from(document.querySelectorAll('.js-questionRevealMulti'));
var hiddenClass = 'is-hidden';
questionBox.forEach(function(qb) {
var completeBtn = qb.querySelector('.js-send');
var revealArea = qb.querySelector('.js-reveal');
completeBtn.addEventListener('click', function() {
revealArea.classList.toggle(hiddenClass);
var targetOffsetTop = window.pageYOffset + revealArea.getBoundingClientRect().height;
window.scrollTo({
top: targetOffsetTop,
behavior: 'smooth',
});
});
});
};
})(revealBtnFncMulti);
</script>
<!-- JavaScript headここまで -->
HTML
<!--
HTMLここから
・タグの「id」はひとつのversion内で同じ名前をひとつだけ使うことができます。このwidgetを複数使用する場合や「id」を設定する別のwidgetを併用する際は「id」の名前が重複しないよう設定が必要です。
・対応するinputタグの「id」とlabelタグの「for」は同じ名前を設定してください。
・同じグループのinputタグには同じ名前の「name」を設定してください。このwidgetを複数使用する場合や「name」を設定する別のwidgetを併用する際はグループごとに「name」の名前が重複しないよう設定が必要です。
-->
<div class="question-reveal-multi js-questionRevealMulti">
<!-- 項目を増減する場合は、ここから「★ここまで★」部分をコピペ、もしくは削除してください -->
<div class="questionArea">
<h2 class="title"><span class="title_num">Q1</span>ここにテキストが入ります</h2>
<div class="linkbox">
<input id="q1-1" type="checkbox" name="q1"><label for="q1-1">
<div class="btn">複数選択可能</div>
</label>
<input id="q1-2" type="checkbox" name="q1"><label for="q1-2">
<div class="btn _lineTwo">複数選択可能<br>複数選択可能</div>
</label>
<input id="q1-3" type="checkbox" name="q1"><label for="q1-3">
<div class="btn">複数選択可能</div>
</label>
<input id="q1-4" type="checkbox" name="q1"><label for="q1-4">
<div class="btn">複数選択可能</div>
</label>
</div>
</div>
<!-- ★ここまで★ -->
<div class="questionArea">
<h2 class="title"><span class="title_num">Q2</span>ここにテキストが入ります</h2>
<div class="linkbox">
<input id="q2-1" type="radio" name="q2"><label for="q2-1">
<div class="btn">一つのみ選択可能</div>
</label>
<input id="q2-2" type="radio" name="q2"><label for="q2-2">
<div class="btn">一つのみ選択可能</div>
</label>
<input id="q2-3" type="radio" name="q2"><label for="q2-3">
<div class="btn">一つのみ選択可能</div>
</label>
<input id="q2-4" type="radio" name="q2"><label for="q2-4">
<div class="btn">一つのみ選択可能</div>
</label>
</div>
</div>
<div class="questionArea">
<h2 class="title"><span class="title_num">Q3</span>ここにテキストが入ります</h2>
<div class="linkbox yes-no">
<input id="q3-1" type="radio" name="q3"><label for="q3-1">
<div class="btn">はい</div>
</label>
<input id="q3-2" type="radio" name="q3"><label for="q3-2">
<div class="btn">いいえ</div>
</label>
</div>
</div>
<div class="questionArea">
<h2 class="title"><span class="title_num">Q4</span>ここにテキストが入ります</h2>
<div class="linkbox">
<input id="q4-1" type="checkbox" name="q4"><label for="q4-1">
<div class="btn">複数選択可能</div>
</label>
<input id="q4-2" type="checkbox" name="q4"><label for="q4-2">
<div class="btn">複数選択可能</div>
</label>
<input id="q4-3" type="checkbox" name="q4"><label for="q4-3">
<div class="btn">複数選択可能</div>
</label>
<input id="q4-4" type="checkbox" name="q4"><label for="q4-4">
<div class="btn">複数選択可能</div>
</label>
</div>
</div>
<div class="questionArea">
<h2 class="title"><span class="title_num">Q5</span>ここにテキストが入ります</h2>
<div class="linkbox">
<input id="q5-1" type="checkbox" name="q5"><label for="q5-1">
<div class="btn">複数選択可能</div>
</label>
<input id="q5-2" type="checkbox" name="q5"><label for="q5-2">
<div class="btn">複数選択可能</div>
</label>
<input id="q5-3" type="checkbox" name="q5"><label for="q5-3">
<div class="btn">複数選択可能</div>
</label>
<input id="q5-4" type="checkbox" name="q5"><label for="q5-4">
<div class="btn">複数選択可能</div>
</label>
</div>
</div>
<div class="send-btn">
<button class="js-send" type="button">回答を完了する</button>
</div>
<div class="revealarea js-reveal is-hidden">
完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。完了ボタンを押すと表示される部分。
</div>
</div>CSS
/*全体の設定*/
.question-reveal-multi {
width: 750px;
max-width: 100%;
font-size: 16px;
background-color: #fff;
margin: 0 auto 1rem;
padding: 1rem;
line-height: 1.5;
box-sizing: border-box;
}
/*設問ごとのブロック*/
.question-reveal-multi .questionArea {
margin-bottom: 96px;
}
/* タイトル */
.question-reveal-multi .title {
font-size: 2rem;
text-align: left;
background: #ddd;
margin: 0 auto;
padding: 10px;
}
/* タイトル数字 */
.question-reveal-multi .title_num {
font-size: 2.5rem;
margin-right: 5px;
color: #ccc;
}
/*チェックボックスの設定*/
.question-reveal-multi .linkbox {
width: 90%;
text-align: left;
margin: 48px auto 0;
padding: 0;
box-sizing: border-box;
}
.question-reveal-multi input {
display: none;
}
/* 選択肢の設定 */
.question-reveal-multi .linkbox:not(.yes-no) input+label {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
border-radius: 10px;
cursor: pointer;
box-sizing: border-box;
transition: all 0.7s;
display: block;
}
/* チェックされた時の選択項目設定 */
.question-reveal-multi .linkbox:not(.yes-no) input[type='radio']:checked+label,
.question-reveal-multi .linkbox:not(.yes-no) input[type='checkbox']:checked+label {
background: #2467bf;
}
/*チェックボックス*/
.question-reveal-multi .linkbox:not(.yes-no) input+label .btn {
padding: 0.7rem 0.5rem 0.7rem 3.5rem;
font-weight: normal;
text-align: left;
font-size: 1.5rem;
position: relative;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
}
/* チェックされた時の選択肢文字スタイル */
.question-reveal-multi .linkbox:not(.yes-no) input:checked+label .btn {
color: #fff;
}
/*チェックボックスの装飾設定 - 単一選択*/
.question-reveal-multi .linkbox:not(.yes-no) input[type='radio']+label .btn::before {
top: 50%;
transform: translateY(-50%);
left: 0.5rem;
width: 2rem;
height: 2rem;
border: solid 2px #888888;
background: #ffffff;
border-radius: 50%;
content: '';
display: block;
position: absolute;
box-sizing: border-box;
}
/*チェックボックスの装飾設定 - 複数選択*/
.question-reveal-multi .linkbox:not(.yes-no) input[type='checkbox']+label .btn::before {
top: 50%;
transform: translateY(-50%);
left: 0.5rem;
width: 2rem;
height: 2rem;
border: solid 2px #888888;
background: #ffffff;
border-radius: 5px;
content: '';
display: block;
position: absolute;
box-sizing: border-box;
}
.question-reveal-multi .linkbox:not(.yes-no) input+label .btn:focus {
outline: none !important;
}
.question-reveal-multi .linkbox:not(.yes-no) input[type='radio']:checked+label .btn::before,
.question-reveal-multi .linkbox:not(.yes-no) input[type='checkbox']+label .btn::before {
border: none;
}
/*チェックマークの設定 - 単一選択 */
.question-reveal-multi .linkbox:not(.yes-no) input[type='radio']:checked+label .btn::after {
top: 16px;
left: 13px;
width: 22px;
height: 22px;
background: #2467bf;
border-radius: 50%;
content: '';
display: block;
position: absolute;
animation: checkZoom 0.3s forwards;
}
/*チェックマークの設定 - 複数選択 */
.question-reveal-multi .linkbox:not(.yes-no) input[type='checkbox']:checked+label .btn::after {
top: 30%;
left: 1.1rem;
width: 0.5rem;
height: 1.2rem;
border-right: 4px solid #2467bf;
border-bottom: 4px solid #2467bf;
transform: rotate(45deg) translateY(-30%);
content: '';
display: block;
position: absolute;
animation: checkZoom 0.3s forwards;
}
@keyframes checkZoom {
0% {
transform: scale(0.7) rotate(45deg);
}
100% {
transform: scale(1) rotate(45deg);
}
}
.question-reveal-multi ::-moz-focus-inner {
border-color: transparent;
}
/* yes/no形式のボタン設定 */
.question-reveal-multi .linkbox.yes-no {
display: flex;
width: 80%;
}
/* yes/no形式のボタン選択肢 */
.question-reveal-multi .linkbox.yes-no input+label {
margin: 0 10px;
padding: 10px;
text-align: center;
background-color: #333;
box-shadow: 0px 5px 0 #000;
border-radius: 10px;
flex: 1;
box-sizing: border-box;
cursor: pointer;
}
/* yes/no形式のボタン選択肢 - 選択時 */
.question-reveal-multi .linkbox.yes-no input:checked+label {
background-color: #d30c0c;
box-shadow: 0px 5px 0 #830606;
}
/* yes/no形式のボタン文字 */
.question-reveal-multi .linkbox.yes-no input+label .btn {
font-size: 3rem;
color: #fff;
font-weight: bold;
}
/*完了ボタンの設定*/
.question-reveal-multi .send-btn {
/*外側の余白|上下|左右auto=自動|*/
margin: 1rem auto;
}
/*完了ボタンの設定*/
.question-reveal-multi .send-btn button {
width: 80%;
text-align: center;
border: none;
font-size: 3rem;
font-weight: bold;
color: #fff;
margin: 0 auto;
padding: 20px 10px;
background-color: #333;
border-radius: 10px;
box-shadow: 0 5px 0 #000;
position: relative;
pointer-events: auto;
box-sizing: border-box;
cursor: pointer;
display: block;
}
/* 完了ボタンを押すと表示される部分 */
.revealarea {
/*文字の大きさ*/
font-size: 1.2rem;
/*文字位置*/
text-align: left;
/*外側の余白|上|左右auto=自動|下|*/
margin: 3rem auto 0;
/*内側の余白*/
padding: 0;
box-sizing: border-box;
}
.is-hidden {
display: none;
}
/* スマホ(画面幅768px以下)の場合の設定 */
@media screen and (max-width: 768px) {
.question-reveal-multi .questionArea {
margin-bottom: 48px;
}
.question-reveal-multi .title {
font-size: 1.5rem;
}
.question-reveal-multi .title_num {
font-size: 2rem;
}
.question-reveal-multi .linkbox {
width: 100%;
margin: 24px auto 0;
}
.question-reveal-multi .linkbox:not(.yes-no) input+label .btn {
font-size: 1.2rem;
}
.question-reveal-multi .linkbox:not(.yes-no) input[type='checkbox']+label .btn::before {
width: 1.8rem;
height: 1.8rem;
}
.question-reveal-multi .linkbox:not(.yes-no) input[type='checkbox']:checked+label .btn::after {
top: 0.7rem;
left: 1rem;
}
.question-reveal-multi .linkbox:not(.yes-no) input[type='radio']+label .btn::before {
width: 28px;
height: 28px;
}
.question-reveal-multi .linkbox:not(.yes-no) input[type='radio']:checked+label .btn::after {
top: 14px;
left: 12px;
width: 20px;
height: 20px;
}
.question-reveal-multi .linkbox.yes-no {
width: 100%;
}
.question-reveal-multi .linkbox.yes-no input+label .btn {
font-size: 2rem;
}
/*完了ボタンの設定*/
.question-reveal-multi .send-btn button {
/* 横幅 */
width: 100%;
/*文字の大きさ*/
font-size: 2rem;
}
}
.question-reveal-multi .linkbox:not(.yes-no) input[type='checkbox']:checked+label .btn._lineTwo::after {
top: 35%;
transform: rotate(45deg) translateY(-35%);
}
/* yes/no形式のボタン選択肢 */
.question-reveal-multi .questionArea .linkbox:not(.yes-no) input+label {
display: flex;
align-items: center;
}
.question-reveal-multi .questionArea:nth-child(1) .linkbox:not(.yes-no) input+label {
height: 115px;
}
/* 選択肢をホバーしたときの設定 */
.question-reveal-multi .linkbox:not(.yes-no) input+label:hover {
background: #000;
color: #fff;
}
/* スマホ(画面幅768px以下)の場合の設定 */
@media screen and (max-width: 768px) {
.question-reveal-multi .questionArea:nth-child(1) .linkbox:not(.yes-no) input+label {
height: 90px;
}
}
このサイトの使い方