質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

6316閲覧

ラジオボタンで作成したチェックリストを左揃えで画面の中央に配置したい

bakio

総合スコア21

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/13 01:36

編集2020/10/13 01:40

イメージ説明

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に置き換えましたがずれてしまいました

説明が下手ですみません....どなたかエラーの解決できる方いらっしゃいましたら幸いです。
よろしくお願いいたします。

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2020/10/13 01:38

添付画像がないようです。
bakio

2020/10/13 01:41

念の為同じ画像ですが2枚配置しました。みれますと幸いです
guest

回答1

0

ベストアンサー

下記のサンプルでどうでしょうか。

CodePenサンプル

投稿2020/10/13 02:14

編集2020/10/13 03:09
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bakio

2020/10/13 02:20

すみません...ソースの記述が見当たりません
hatena19

2020/10/13 03:09

あっ、すみません。保存するの忘れてました。 回答のリンク変更しましたので参照してください。
bakio

2020/10/15 01:56

返信が遅れてしまい申し訳ございません!無事できました!お時間割いていただきありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問