HTML:CSS
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 6 <title>Survey</title> 7 <style> 8 /* Hide all questions except the first one */ 9 .question:not(:first-child) { 10 display: none; 11 } 12 13 /* Add a fading animation when changing questions */ 14 .question { 15 animation: fade 0.5s ease; 16 } 17 18 @keyframes fade { 19 from { 20 opacity: 0; 21 } 22 to { 23 opacity: 1; 24 } 25 } 26.family1{ 27 font-family: 'メイリオ' ; 28} 29 30.family2{ 31 font-family: 'Meiryo' ; 32} 33 34.family3{ 35 font-family: 'Hiragino Kaku Gothic ProN' ; 36} 37.family4{ 38 font-family: 'ヒラギノ角ゴ ProN W3' ; 39} 40 41.family5{ 42 font-family: 'ＭＳ Ｐゴシック' ; 43} 44 45.family6{ 46 font-family: 'MS PGothic''MS UI Gothic' ; 47} 48 49.family7{ 50 font-family: 'Helvetica'; 51} 52 53.family8{ 54 font-family: 'Yu Gothic'; 55} 56 57.family9{ 58 font-family: sans-serif; 59} 60html{ 61 font-size: 10px; 62} 63img{ 64 width: 100%; 65} 66@media screen and (max-width: 768px) { 67} 68 69@media screen and (max-width: 480px) { 70} 71 </style> 72</head> 73<body> 74 <div id="survey-container"> 75 <div class="question"> 76 <h1 align="center"> 77 <style> 78 h1 { 79 color: #00A6ED;/*文字色*/ 80 border: solid 3px #00A6ED;/*線色*/ 81 padding: 0.2em;/*文字周りの余白*/ 82 border-radius: 0.5em;/*角丸*/ 83} 84 </style> 85 <p class="family8">Question 1</p></h1> 86 <img src="https://static.wixstatic.com/media/1f18df_a50b8c351d344fe1b4ef9554dab1195c~mv2.jpg/v1/crop/x_0,y_104,w_446,h_303/fill/w_446,h_303,al_c,q_80,enc_auto/couple1_JPG.jpg" alt="Image 1"> 87 <p align="center">あなたの性別は？</p> 88 <input type="radio" name="color" value="red"> 男性<br> 89 <input type="radio" name="color" value="blue"> 女性<br> 90 <button onclick="nextQuestion()">次へ</button> 91 </div> 92 93 <div class="question"> 94 <h1 align="center"> 95 <style> 96 h1 { 97 color: #00A6ED;/*文字色*/ 98 border: solid 3px #00A6ED;/*線色*/ 99 padding: 0.2em;/*文字周りの余白*/ 100 border-radius: 0.5em;/*角丸*/ 101} 102 </style> 103 <p class="family8">Question 2</p></h1> 104 <img src="https://static.wixstatic.com/media/1f18df_9eaeca53a1424233aa3c41909448ff98~mv2.jpg/v1/crop/x_0,y_67,w_442,h_287/fill/w_442,h_287,al_c,q_80,enc_auto/1f18df_9eaeca53a1424233aa3c41909448ff98~mv2.jpg" alt="Image 2"> 105 <p align="center">あなたの年齢は？</p> 106 <input type="radio" name="color" value="red"> 20～29歳<br> 107 <input type="radio" name="color" value="blue"> 30～39歳<br> 108 <input type="radio" name="color" value="green"> 40～49歳<br> 109 <input type="radio" name="color" value="yellow"> 50～59歳<br> 110 <input type="radio" name="color" value="purple"> 60歳以上<br> 111 <button onclick="nextQuestion()">次へ</button> 112 </div> 113 114 <div class="question"> 115 <h1 align="center"> 116 <style> 117 h1 { 118 color: #00A6ED;/*文字色*/ 119 border: solid 3px #00A6ED;/*線色*/ 120 padding: 0.2em;/*文字周りの余白*/ 121 border-radius: 0.5em;/*角丸*/ 122} 123 </style> 124 <p class="family8">Question 3</p></h1> 125 <img src="https://static.wixstatic.com/media/1f18df_718dea6086df4f8197816fa6a656cd61~mv2.jpg/v1/crop/x_0,y_144,w_446,h_271/fill/w_446,h_271,al_c,q_80,enc_auto/1f18df_718dea6086df4f8197816fa6a656cd61~mv2.jpg" alt="Image 3"> 126 <p align="center">あなたの血液型は？</p> 127 <input type="radio" name="color" value="red"> A型<br> 128 <input type="radio" name="color" value="blue"> B型<br> 129 <input type="radio" name="color" value="green"> O型<br> 130 <input type="radio" name="color" value="yellow"> AB型<br> 131 <button onclick="nextQuestion()">次へ</button> 132 </div> 133 134 <div class="question"> 135 <h1 align="center"> 136 <style> 137 h1 { 138 color: #00A6ED;/*文字色*/ 139 border: solid 3px #00A6ED;/*線色*/ 140 padding: 0.2em;/*文字周りの余白*/ 141 border-radius: 0.5em;/*角丸*/ 142} 143 </style> 144 <p class="family8">Question 4</p></h1> 145 <img src="https://static.wixstatic.com/media/1f18df_fdf6c89ee45f43bf94cf1472351bd5d8~mv2.jpg/v1/crop/x_0,y_57,w_443,h_290/fill/w_443,h_290,al_c,q_80,enc_auto/1f18df_fdf6c89ee45f43bf94cf1472351bd5d8~mv2.jpg 146" alt="Image 3"> 147 <p align="center">あなたは婚活したことが</p> 148 <input type="radio" name="color" value="red"> ある<br> 149 <input type="radio" name="color" value="blue"> ない<br> 150 <button onclick="nextQuestion()">次へ</button> 151 </div> 152 153 <div class="question"> 154 <h1 align="center"> 155 <style> 156 h1 { 157 color: #00A6ED;/*文字色*/ 158 border: solid 3px #00A6ED;/*線色*/ 159 padding: 0.2em;/*文字周りの余白*/ 160 border-radius: 0.5em;/*角丸*/ 161} 162 </style> 163 <p class="family8">Question 5</p></h1> 164 <img src="https://static.wixstatic.com/media/1f18df_d0a3f02382654ca9b9d7b91228e5a975~mv2.jpg/v1/crop/x_0,y_111,w_443,h_277/fill/w_443,h_277,al_c,q_80,enc_auto/1f18df_d0a3f02382654ca9b9d7b91228e5a975~mv2.jpg 165" alt="Image 3"> 166 <p align="center">結婚するために恋愛は必要？</p> 167 <input type="radio" name="color" value="red"> 必要<br> 168 <input type="radio" name="color" value="blue"> あったほうが良い<br> 169 <input type="radio" name="color" value="green"> 必要ない<br> 170 <input type="radio" name="color" value="yellow"> 分からない<br> 171 <button onclick="nextQuestion()">次へ</button> 172 </div> 173 174 <div class="question"> 175 <h1 align="center">ご回答ありがとうございます！</h1> 176 <img src="https://static.wixstatic.com/media/1f18df_1ec8af4cb9d64a99b7189829336f19f2~mv2.jpg/v1/crop/x_1179,y_431,w_3426,h_2537/fill/w_438,h_324,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/victoriano-izquierdo-CS8Get8gGBI-unsplash.jpg" alt="Image 4"> 177 <p>気になる結果はこちらから！</p> 178 <a href="https://lin.ee/EF7WiwR"><img src="https://static.wixstatic.com/media/1f18df_360353332ded4d1dae3791c2ead32db8~mv2.jpeg/v1/fill/w_600,h_338,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/DD723F41-5CBE-4763-A323-18D0A099F7DB.jpeg" alt="Link"></a> 179 </div> 180 </div> 181 182 <script> 183 function nextQuestion() { 184 var currentQuestion = document.querySelector('.question:not([style*="none"])'); 185 var nextQuestion = currentQuestion.nextElementSibling; 186 187 if (nextQuestion) { 188 currentQuestion.style.display = 'none'; 189 nextQuestion.style.display = 'block'; 190 } 191 } 192 </script> 193</body> 194</html> 195
0 コメント