Q&A
html
1 <section id="contact"> 2 <div class="inner"> 3 <h2>お問い合わせ</h2> 4 <p class="lead">ご質問等は「お問い合わせ」をお願いいたします。</p> 5 <dl> 6 <dt>お電話でのお問い合わせ</dt> 7 8 <dd>営業時間 10:00〜17:00（休日：土日祝）</dd> 9 </dl> 10 11 <form action="" method="post"> 12 <table> 13 <tr> 14 <th> 15 <label for="i_company"> 16 企業名 <em>必須</em> 17 </label> 18 </th> 19 <td> 20 <input id="i_company" type="text" name="company" required > 21 </td> 22 </tr> 23 24 <tr> 25 <th> 26 <label for="i_name"> 27 お名前 <em>必須</em> 28 </label> 29 </th> 30 <td> 31 <input id="i_name" type="text" name="name" required> 32 </td> 33 </tr> 34 35 <tr> 36 <th> 37 <label> 38 お問い合わせ項目 <em>必須</em> 39 </label> 40 </th> 41 <div> 42 <td> 43 <input id="i_qtype01" type="radio" name="qtype" value="お問い合わせ" required > 44 <label for="i_qtype01">お問い合わせ</label> 45 46 <input id="i_qtype02" type="radio" name="qtype" value="資料請求"required > 47 <label for="i_qtype02">資料請求</label> 48 <input id="i_qtype01" type="radio" name="qtype" value="その他" required > 49 <label for="i_qtype01">その他</label> 50 </td> 51 </tr> 52 53 <div class="data-contents"> 54 <!-- お問い合わせ選択時に表示したい --> 55 <div class="siryou"> 56 57 <tr> 58 <th> 59 <label> 60 サイトのきっかけ <em>任意</em> 61 </label> 62 </th> 63 <td> 64 <input id="check01_01" type="checkbox"> 65 <label for="check01_01">紹介</label> 66 <input id="check01_02" type="checkbox"> 67 <label for="check01_02">広告</label> 68 <input id="check01_03" type="checkbox"> 69 <label for="check01_03">SNS</label> 70 </td> 71 </tr> 72 73 <tr> 74 <th><label for="contact_001"> 75 お問い合わせ内容<em>必須</em> 76 </label> 77 </th> 78 <td><textarea rows="12" id="contact_001"required></textarea></td> 79 </tr> 80 </div> 81 82 <!-- ＜資料請求選択時に表示したい --> 83 <div class="siryou-02"> 84 <tr> 85 <th><label for="contact_002"> 86 お問い合わせ内容<em>任意</em> 87 </label> 88 </th> 89 <td><textarea rows="12" id="contact_002" ></textarea></td> 90 </tr> 91 </div> 92 93 <!-- その他選択時に表示したい --> 94 <div class="siryou-03"> 95 96 <tr> 97 <th> 98 <label for="url01">サイトURL<em>必須</em> 99 </label> 100 </th> 101 <td> 102 <input id="url01" type="text"name="url_name" required> 103 </td> 104 </tr> 105 106 <tr> 107 <th> 108 <label for="url02">記事<em>必須</em> 109 110 </label> 111 </th> 112 <td> 113 <input id="url02" type="text"name="url_name" " required> 114 </td> 115 </tr> 116 117 118 119 <tr> 120 <th> 121 <label> 122 課題 <em>必須</em> 123 </label> 124 </th> 125 126 <td> 127 <input id="check02_01" type="checkbox"> 128 <label for="check02_01" required>新たに検討</label> 129 <input id="check02_02" type="checkbox"> 130 <label for="check02_02" required>品質問題</label> 131 132 </td> 133 </tr> 134 135 <tr> 136 <th> 137 <label> 138 サイトのきっかけ <em>任意</em> 139 </label> 140 </th> 141 142 <td> 143 144 <input id="check03_02" type="checkbox"> 145 <label for="check03_02">広告</label> 146 <input id="check03_03" type="checkbox"> 147 <label for="check03_03">SNS</label> 148 <input id="check03_04" type="checkbox"> 149 150 151 </td> 152 </tr> 153 154 <tr> 155 <th><label for="contact_003"> 156 お問い合わせ内容<em>必須</em> 157 </label> 158 </th> 159 <td><textarea rows="12" id="contact_003" required></textarea></td> 160 </tr> 161 </div> 162 </div> 163 </div> 164 </div> 165 </form> 166 </div> 167 </section> 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194```CSS 195 196
#contact {
background: #e7fbde;
}
#contact .inner {
padding: 80px 0;
}
#contact h2 {
font-size: 30px;
font-weight: 800;
line-height: 1;
color: #5abd29;
text-align: center;
}
#contact p.lead {
margin: 30px 0 50px;
font-size: 20px;
text-align: center;
}
#contact dl {
box-sizing: border-box;
width: 620px;
margin: 0 auto 90px;
padding: 30px;
background: #fff;
text-align: center;
border-radius: 10px;
font-weight: 700;
line-height: 1;
}
#contact dl dt {
margin-bottom: 15px;
font-size: 24px;
color: #5abd29;
}
#contact dl dd {
font-family: Helvetica,Verdana,Arial,YakuHanJP,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","メイリオ",Meiryo,Osaka,"ＭＳＰゴシック",sans-serif;
font-size: 50px;
color: #f39b34;
}
#contact dl dd img {
width: 34px;
padding-right: 10px;
vertical-align: baseline;
}
#contact dl dd:nth-of-type(2) {
margin-top: 5px;
font-size: 16px;
color: #000;
}
#contact table {
width: 780px;
margin: 0 auto;
}
#contact table th {
position: relative;
box-sizing: border-box;
width: 238px;
padding-right: 20px;
padding-bottom: 38px;
font-size: 18px;
font-weight: 700;
color: #5abd29;
text-align: left;
vertical-align: middle;
}
#contact table tr:last-child th {
padding-top: 12px;
vertical-align: top;
}
#contact table th em {
position: relative;
top: 5px;
float: right;
padding: 3px 8px;
font-size: 12px;
line-height: 1;
color: #fff;
background: #e60012;
border-radius: 2px;
}
#contact table td {
padding-bottom: 38px;
}
#contact table input,
#contact table textarea {
box-sizing: border-box;
width: 100%;
padding: 12px;
font-size: 18px;
color: #666;
border: none;
border-radius: 4px;
}
#contact table textarea {
height: 300px;
}
#contact p.btn {
margin-top: 40px;
text-align: center;
}
#contact p.btn input[type="submit"] {
display: inline-block;
width: 620px;
padding: 26px 0;
font-size: 30px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
background: url('../img/ico_arw.png') 100% 50% no-repeat;
background-size: 45px auto;
background-color: #f39b34;
border: none;
border-radius: 8px;
cursor: pointer;
}
#contact p.btn input[type="submit"]:hover {
background-color: #e88126;
}
#contact.data-contents.siryou {
display: none;
}
#contact.data-contents .siryou-02 {
display: none;
}
#contact.data-contents .siryou-03 {
display: none;
}
input[value="お問い合わせ"]:checked ~ #contact.data-contents.siryou th td{
display: block;
}
input[value="資料請求"]:checked ~ .data-contents .siryou-02{
display: block;
}
input[value="その他"]:checked ~ .data-contents .siryou-03{
display: block;
}
### html・cssを使用してお問い合わせフォームの作成をしています。 「お問い合わせ項目」のラジオボタン選択に合わせて 表示したい項目・非表示ししておきたい項目を指定したいのですが うまくLPページで作っていくとCSSで指定しても効きません。 非表示にしたい部分を親要素の子供にするのはわかるのですが 例えばこの場合のHTMLだと私は「.data-contents.siryou」の 親要素は「<section id="contact">」かと思ったのですが 全く動かないので認識が間違っているのかと思い質問させて頂きました。 <form action="" method="post">以下の部分だけで作成すると うまく非表示・選択時に表示されるのですが <section id="contact"> <div class="inner"> <h2>お問い合わせ</h2> <p class="lead">ご質問等は「お問い合わせ」をお願いいたします。</p> <dl> <dt>お電話でのお問い合わせ</dt> <dd>営業時間 10:00〜17:00（休日：土日祝）</dd> </dl> が入るとうまくできません。 ご教授願います。
回答1件
0
ベストアンサー
HTMLが文法的に間違っている部分が多々あります。まずはこれを修正しましょう。
全角空白が紛れ込んでいる。
form、table の閉じタグがない。
divタグも開始タグと閉じタグの対応がおかしい。
tableタグの子要素にdivは入れれない。
・・・
など。
次に、レイアウトの為にtableを使うのはやめましょう。
テーブルデータでないものをtableにするのはセマンティックにNGです。
divで囲むかリストにするかして、あとはFlexboxを使ってレイアウトを決めるようにするといいでしょう。
jsを使わずに、CSSだけで要素の表示/非表示をするのはHTML構造が限定されます。
input要素とそれによって表示/非表示する要素が兄弟関係、親子関係である必要があります。
そのようになるようにHTMLを組む必要があります。
以上のことを考慮して、一から作り直した方がいいでしょう。
現状のHTMLでは修正個所が多すぎて使いものになりません。
投稿2020/11/19 11:05
編集2020/11/19 11:34
総合スコア33782
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/20 14:52
2020/11/20 20:29