お問い合わせフォームのスタイリングがうまくできない

Question

お問い合わせフォームを作成しています。
ここで素晴らしく有難いアドバイスを頂き
なんとかHTML・CSSでだけでも
「お問い合わせ項目」の選択によって
表示したい部分・非表示にしたい部分ができました、

しかし、次に困ったのが例えば
１、「お問い合わせ項目」を横並びにしたい
２、「サイトの知ったきっかけ」部分をCSSで装飾したり
回答部分を同じように横並び（折り返し）などして
みやすくスタイルしたい。

ただ、すでに表示・非表示がラジオボタンに合わせて
適用されるようにコーディングをしているため
親要素「data-contents」で変更できず
「siryou」の中の装飾や中央揃え（flexbox）などが
使えません。

色々タグを変えて試しましたが
装飾やflexboxが使えるようになると
ラジオボタンに合わせての表示・非表示ができなくなり
また逆も然りです。

親要素が全体で囲ってしまっているため
子要素の部分をスタイルしたくて
親要素が必要な場合（この場合だと「.siryou」の部分だけスタイルしたい）
どうしたら良いのでしょうか。

アドバイス頂けると幸いです。
１日悩みましたが、、、
きっと表示・非表示をJavaでするのが一番だと思うのですが
全く無知なので流石にすぐに理解ができなくて・・・・
できるだけ今回スタイリングした
このタイプでお問い合わせフォームを作成したいと思い
相談させて頂きました。

宜しくお願い致します。

					<!-- 家族 -->
					<div>
						
						<input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ" >
						<label for="i_qtype01">お問い合わせ</label>
						<input id="i_qtype02" type="radio" name="qtype" value="資料請求" >
						<label for="i_qtype02">資料請求</label>
						<input id="i_qtype03" type="radio" name="qtype" value="キャンペーン" >
						<label for="i_qtype03">キャンペーン</label>
						
				<!-- 親 -->
	　　　　　　　　　　	<div class="data-contents">
					<!-- お問い合わせを選択時に表示 -->

					
					<!-- 子供 -->
					　　　　<div class="siryou"> 
						　　　<div>							
							<label>サイトを知ったきっかけ</label>
						　　　</div>
						<div>
							<em>任意（複数回答可）</em>
						</div>
						<div>
							<input id="check01_01" type="checkbox">
							<label for="check01_01">紹介</label>
						</div>
						
						<div>
							<input id="check01_02" type="checkbox">
							<label for="check01_02">広告</label>
						</div>
						
						<div>
							<input id="check01_03" type="checkbox">
							<label for="check01_03">SNS</label>
						</div>
						
						<div>
							<input id="check01_04" type="checkbox">
							<label for="check01_04">DM</label>
						</div>
						
						<div>
							<input id="check01_05" type="checkbox">
							<label for="check01_05">FAX</label>
						</div>
						
						
						<div>
							<label>お問い合わせ内容</label>
							<em>必須</em>
							<textarea required></textarea>
						</div>
						
					</div>
	<!-- ＜資料請求選択時に表示 -->
					
					<div class="siryou-02">  
						<div>
							<label>お問い合わせ内容（任意）</label>
							<textarea></textarea>
						</div>

					</div>
　　　　　　　　　　　　　　　　<!-- ＜親タグ閉じる -->
　　　　　　　　　　</div>
　　　　　　　　　　　　　　　　<!-- ＜家族閉じる -->
　　　　　　　　</div>

Comments

[Lhankor_Mhy]

・現状では、まだCSSは何も設定していないのですか？

・『「お問い合わせ項目」を横並びにしたい』とのことですが、「お問い合わせ項目」とはどれですか？　「お問い合わせ内容 必須」「お問い合わせ内容（任意）」を横並びにしたい、というようなことでしょうか？

・『「.siryou」の部分だけスタイルしたい』とのことですが、
.siryou{
...
}
などとすればいいかと思いますが、どのような問題が発生していますか？

---

結果（実際に起きたこと）を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1

期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3

[chocon]

申し訳御座いません。
下書きではCSSも記載していたですが
ちゃんと投稿できていませんでした。

修正します。

Answer 1

まだ、全角空白が残ってます。それを削除しましょう。
見た目では半角空白と全角空白が見分けが付かないので、エディターの設定で見わけが付くように設定しましょう。

で、本題ですが、

１、「お問い合わせ項目」を横並びにしたい

「お問い合わせ項目」というのが、なにか分かりませんが、最初の３つのラジオボタンなら横並びになってますが。

〇お問い合わせ
〇資料請求
〇キャンペーン
というような表示にしたいという意味なら、<br>で改行させればいいでしょう。

  <p class="i_qtitle">お問い合わせ項目</p>
  <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ">
  <label for="i_qtype01">お問い合わせ</label><br>
  <input id="i_qtype02" type="radio" name="qtype" value="資料請求">
  <label for="i_qtype02">資料請求</label><br>
  <input id="i_qtype03" type="radio" name="qtype" value="キャンペーン">
  <label for="i_qtype03">キャンペーン</label>
  <div class="clearfix"></div>

２、「サイトの知ったきっかけ」部分をCSSで装飾したり

回答部分を同じように横並び（折り返し）などして
みやすくスタイルしたい。

現状のHTMLで .siryou .siryou-02 にflexを設定すればその子要素を横並びにできます。
中身の要素にも適切にクラスを設定すればスタイルも自由に設定できると思いますが。

レイアウトに関してもflexは設定で縦並びにもできますので、表組のような横並びと縦並びに組み合わせもブロックを入れ子にしてそれぞれにflexで横並び、縦並びをせっていすれば可能です。

Flexbox の基本的な使い方/Web Design Leaves

あるいは、Gridを使えば、ブロックを入れ子にしなくても複雑な表組もシンプルに実現できます。

サクッとグリッドCSSを理解して、クライアントワークに使う | 新宿のホームページ制作会社 ITTI（イッティ）

追記

どのようなレイアウトが提示されていないですか、前の質問を参照したりしてなんとなく推測したレイアウトでのサンプル

CodePenサンプル

とりあえず全体のレイアウトだけ。背景色とか文字色、フォントサイズとかはお好みで設定してください。クラスを付与してますので、そのクラスに対して設定すればいいでしょう。

Comments

[chocon]

hatena19様
いつも大変お世話になっております。
もう・・・本当にいつもわかりやすいアドバイスで本当に勉強になります。
また、私のわかりにくい説明でサンプルまで作成頂き本当に有難う御座います。

少し頂いたアドバイスとURLで勉強してコーディングしてみます。
なのでその後また詰まったら相談させてください。
一度トライしてみません。

[chocon]

hatena19さま

いつも有難う御座います。
今日一日かけてアドバイス頂いたことを元に
コーディング・装飾しました。

特に CODEサンプルが本当に勉強になり、CSSのことも
すごく一緒に勉強させて頂きました。

本当に有難う御座いました。
めちゃくちゃスッキリしました。