html
1 <div class="checkbox"> 2 <div class="quest01"> 3 <label> 4 <input type="checkbox" name="checkbox[]" class="checkbox-input"> 5 <span class="checkbox-parts">チェックリスト01チェックリスト</span> 6 </label><br> 7 8 <label> 9 <input type="checkbox" name="checkbox[]" class="checkbox-input"> 10 <span class="checkbox-parts">チェックリスト02チェック</span> 11 </label><br> 12 13 <label> 14 <input type="checkbox" name="checkbox[]" class="checkbox-input"> 15 <span class="checkbox-parts">チェックリスト03</span> 16 </label><br> 17 18 </div></div>
css
1@media screen and (min-width: 480px) { 2 .contents img { 3 width: 700px; 4 display: block; 5 margin: auto; 6 } 7 .checkbox { 8 position: relative; 9 } 10 11 .quest01 { 12 background: url("../img/quest01.jpg") no-repeat center top; 13 background-size: 700px; 14 height: 755px; 15 } 16 17 .checkbox-input { 18 display: none; 19 } 20 21 .checkbox-parts { 22 padding-left: 35px; 23 position: relative; 24 text-align: center; 25 26 } 27 28 .quest01 label { 29 position: relative; 30 top: 246px; 31 display: block; 32 margin: auto; 33 font-size: 24px; 34 text-align: left; 35 } 36 37 .checkbox-parts::before { 38 content: ""; 39 display: block; 40 position: absolute; 41 top: 5px; 42 left: 0; 43 width: 15px; 44 height: 15px; 45 border: 4px solid #2E2321; 46 } 47 48 .checkbox-input:checked+.checkbox-parts::after { 49 content: ""; 50 display: block; 51 position: absolute; 52 top: -5px; 53 left: 5px; 54 width: 9px; 55 height: 25px; 56 transform: rotate(40deg); 57 border-bottom: 5px solid #B21A3E; 58 border-right: 5px solid #B21A3E; 59 } 60}
やりたいこと
上記のソースで添付画像のようにチェックリスト部分は文字量が異なってもリストのラジオボタンとテキストは左揃え、
チェックリストは背景の中央に常に配置し、画面幅が変わってもレスポンシブしてくれる状態にしたいです。
### 起きてしまうエラー
チェックリストの位置が固定されてしまい画面幅を買えた時に配置した背景とずれてしまう
### 試したこと
.quest01 label 要素や .checkbox-parts 要素の単位を%やvwに置き換えましたがずれてしまいました
説明が下手ですみません....どなたかエラーの解決できる方いらっしゃいましたら幸いです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー