回答編集履歴

4

DOCTYPE 修正

2017/02/18 09:48

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -124,7 +124,7 @@
124
124
 
125
125
  ```html
126
126
 
127
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
127
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ja">
128
128
 
129
129
  <html>
130
130
 

3

HTML4\.01のマークアップを追加

2017/02/18 09:48

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -10,6 +10,10 @@
10
10
 
11
11
 
12
12
 
13
+
14
+
15
+
16
+
13
17
  ```html
14
18
 
15
19
  <h1>git test</h1>
@@ -107,3 +111,141 @@
107
111
  }
108
112
 
109
113
  ```
114
+
115
+
116
+
117
+ 文法エラーを避ける場合。
118
+
119
+ HTML4.01の文法で徹底する場合は下記のようなマークアップになります。
120
+
121
+
122
+
123
+
124
+
125
+ ```html
126
+
127
+ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
128
+
129
+ <html>
130
+
131
+ <head>
132
+
133
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
134
+
135
+ <meta http-equiv="content-language" content="ja">
136
+
137
+ <title>legend要素のコントロール</title>
138
+
139
+ </head>
140
+
141
+ <body>
142
+
143
+ <h1>git test</h1>
144
+
145
+ <div class="table">
146
+
147
+ <fieldset>
148
+
149
+ <legend class="legend">legend</legend>
150
+
151
+ <div class="formHead">
152
+
153
+ legend
154
+
155
+ </div>
156
+
157
+ <div class="inputs">
158
+
159
+ <label class="inputChild"><input type="radio" name="legend">a</label>
160
+
161
+ <label class="inputChild"><input type="radio" name="legend">b</label>
162
+
163
+ </div>
164
+
165
+ </fieldset>
166
+
167
+ </div>
168
+
169
+ </body>
170
+
171
+ </html>
172
+
173
+ ```
174
+
175
+
176
+
177
+ ```css
178
+
179
+ * {
180
+
181
+ padding: 0;
182
+
183
+ margin: 0;
184
+
185
+ }
186
+
187
+
188
+
189
+ .table {
190
+
191
+ display: table;
192
+
193
+ border: 1px solid #000;
194
+
195
+ }
196
+
197
+
198
+
199
+ fieldset {
200
+
201
+ display: table-row;
202
+
203
+ border: none;
204
+
205
+ }
206
+
207
+
208
+
209
+ .formHead,
210
+
211
+ .inputs {
212
+
213
+ display: table-cell;
214
+
215
+ border: 1px solid #000;
216
+
217
+ }
218
+
219
+
220
+
221
+ .legend {
222
+
223
+ display: none;
224
+
225
+ }
226
+
227
+
228
+
229
+ .formHead {
230
+
231
+ min-width: 200px; /* 任意の横幅 */
232
+
233
+ }
234
+
235
+
236
+
237
+ .inputs {
238
+
239
+ width: 100%;
240
+
241
+ }
242
+
243
+
244
+
245
+ .inputChild {
246
+
247
+ display: block;
248
+
249
+ }
250
+
251
+ ```

2

誤字修正

2017/02/18 09:43

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -1,6 +1,6 @@
1
1
  開発ツールで確認したところ、CSS設定は適用されていましたが、
2
2
 
3
- legend要素とspan要素というなる要素をtable-cellで横並びにしようとしていたことに無理があるようでした。
3
+ legend要素とspan要素というなる要素をtable-cellで横並びにしようとしていたことに無理があるようでした。
4
4
 
5
5
  divで並べるようにします。legend要素をdivで囲い、spanの方も横並びに使う外側はdivに置き換えます。
6
6
 

1

不要なタグ削除

2017/02/18 07:23

投稿

yamato_hikawa
yamato_hikawa

スコア2092

test CHANGED
@@ -11,8 +11,6 @@
11
11
 
12
12
 
13
13
  ```html
14
-
15
- <h1>git test</h1>
16
14
 
17
15
  <h1>git test</h1>
18
16