回答編集履歴

1

書式の改善

2021/05/25 12:30

投稿

itagagaki
itagagaki

スコア8402

test CHANGED
@@ -2,338 +2,338 @@
2
2
 
3
3
 
4
4
 
5
+ ```HTML
6
+
7
+ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+ <html lang="ja">
16
+
17
+ <head>
18
+
19
+ <link href="css/reset.css" rel="stylesheet" type="text/css">
20
+
21
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
22
+
23
+
24
+
25
+ <title>練習3</title>
26
+
27
+
28
+
29
+ <link rel="stylesheet" type="text/css" href="css/style.css">
30
+
31
+ </head>
32
+
33
+
34
+
35
+ <body>
36
+
37
+
38
+
39
+ <div id="wrapper">
40
+
41
+
42
+
43
+ <div id="header">
44
+
45
+ <h1>header</h1>
46
+
47
+ </div><!--------------------------- header終わり -->
48
+
49
+
50
+
51
+ <div id="menu">
52
+
53
+ <p>menu</p>
54
+
55
+ </div><!--------------------------- menu終わり -->
56
+
57
+
58
+
59
+ <div id="contents">
60
+
61
+ <div class="contents_side_c">
62
+
63
+ <h2>contents_side_c</h2>
64
+
65
+ <ul>
66
+
67
+ <li>ここは</li>
68
+
69
+ <li>コンテンツの</li>
70
+
71
+ <li><span>センター</span></li>
72
+
73
+ <li>です</li>
74
+
75
+ <li>order:1;</li>
76
+
77
+ <li>で左から2番目(センター)に位置</li>
78
+
79
+ <li>させています</li>
80
+
81
+ </ul>
82
+
83
+
84
+
85
+ </div><!--------------------------- contents_side_c終わり -->
86
+
87
+
88
+
89
+ <div class="contents_side_l">
90
+
91
+ <h3>contents_side_l</h3>
92
+
93
+ <ul>
94
+
95
+ <li>ここは</li>
96
+
97
+ <li>コンテンツの</li>
98
+
99
+ <li><span>左</span></li>
100
+
101
+ <li>です</li>
102
+
103
+ <li>order:0;</li>
104
+
105
+ <li>で左に位置</li>
106
+
107
+ <li>させています</li>
108
+
109
+ </ul>
110
+
111
+ </div><!--------------------------- contents_side_l終わり -->
112
+
113
+
114
+
115
+ <div class="contents_side_r">
116
+
117
+ <h3>contents_side_r</h3>
118
+
119
+ <ul>
120
+
121
+ <li>ここは</li>
122
+
123
+ <li>コンテンツの</li>
124
+
125
+ <li><span>右</span></li>
126
+
127
+ <li>です</li>
128
+
129
+ <li>order:2;</li>
130
+
131
+ <li>で右に位置</li>
132
+
133
+ <li>させています</li>
134
+
135
+ </ul>
136
+
137
+ </div><!--------------------------- contents_side_r終わり -->
138
+
139
+ </div>
140
+
141
+
142
+
143
+ <div id="footer">
144
+
145
+ <p>footer</p>
146
+
147
+ </div><!--------------------------- footer終わり -->
148
+
149
+
150
+
151
+
152
+
153
+ </div><!--------------------------- wrapper終わり -->
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+ </body>
162
+
163
+ </html>
164
+
5
165
  ```
6
166
 
7
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
- <html lang="ja">
16
-
17
- <head>
18
-
19
- <link href="css/reset.css" rel="stylesheet" type="text/css">
20
-
21
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
22
-
23
-
24
-
25
- <title>練習3</title>
26
-
27
-
28
-
29
- <link rel="stylesheet" type="text/css" href="css/style.css">
30
-
31
- </head>
32
-
33
-
34
-
35
- <body>
36
-
37
-
38
-
39
- <div id="wrapper">
40
-
41
-
42
-
43
- <div id="header">
44
-
45
- <h1>header</h1>
46
-
47
- </div><!--------------------------- header終わり -->
48
-
49
-
50
-
51
- <div id="menu">
52
-
53
- <p>menu</p>
54
-
55
- </div><!--------------------------- menu終わり -->
56
-
57
-
58
-
59
- <div id="contents">
60
-
61
- <div class="contents_side_c">
62
-
63
- <h2>contents_side_c</h2>
64
-
65
- <ul>
66
-
67
- <li>ここは</li>
68
-
69
- <li>コンテンツの</li>
70
-
71
- <li><span>センター</span></li>
72
-
73
- <li>です</li>
74
-
75
- <li>order:1;</li>
76
-
77
- <li>で左から2番目(センター)に位置</li>
78
-
79
- <li>させています</li>
80
-
81
- </ul>
82
-
83
-
84
-
85
- </div><!--------------------------- contents_side_c終わり -->
86
-
87
-
88
-
89
- <div class="contents_side_l">
90
-
91
- <h3>contents_side_l</h3>
92
-
93
- <ul>
94
-
95
- <li>ここは</li>
96
-
97
- <li>コンテンツの</li>
98
-
99
- <li><span>左</span></li>
100
-
101
- <li>です</li>
102
-
103
- <li>order:0;</li>
104
-
105
- <li>で左に位置</li>
106
-
107
- <li>させています</li>
108
-
109
- </ul>
110
-
111
- </div><!--------------------------- contents_side_l終わり -->
112
-
113
-
114
-
115
- <div class="contents_side_r">
116
-
117
- <h3>contents_side_r</h3>
118
-
119
- <ul>
120
-
121
- <li>ここは</li>
122
-
123
- <li>コンテンツの</li>
124
-
125
- <li><span>右</span></li>
126
-
127
- <li>です</li>
128
-
129
- <li>order:2;</li>
130
-
131
- <li>で右に位置</li>
132
-
133
- <li>させています</li>
134
-
135
- </ul>
136
-
137
- </div><!--------------------------- contents_side_r終わり -->
138
-
139
- </div>
140
-
141
-
142
-
143
- <div id="footer">
144
-
145
- <p>footer</p>
146
-
147
- </div><!--------------------------- footer終わり -->
148
-
149
-
150
-
151
-
152
-
153
- </div><!--------------------------- wrapper終わり -->
154
-
155
-
156
-
157
-
158
-
159
-
160
-
161
- </body>
162
-
163
- </html>
167
+
168
+
169
+ ```CSS
170
+
171
+ @charset "utf-8";
172
+
173
+
174
+
175
+ *{
176
+
177
+ margin:0;
178
+
179
+ padding:0;
180
+
181
+ }
182
+
183
+
184
+
185
+
186
+
187
+
188
+
189
+ span{
190
+
191
+ color:#ff0000;
192
+
193
+ font-weight:bold;
194
+
195
+ }
196
+
197
+
198
+
199
+
200
+
201
+ /* wrapper */
202
+
203
+
204
+
205
+ #wrapper{
206
+
207
+ width:820px;
208
+
209
+ height:600px;
210
+
211
+ margin:0 auto;
212
+
213
+ text-align:center;
214
+
215
+ background-color:#a9a9a9;
216
+
217
+ }
218
+
219
+
220
+
221
+
222
+
223
+ /* header */
224
+
225
+
226
+
227
+ #header{
228
+
229
+ width:800px;
230
+
231
+ height:126px;
232
+
233
+ margin:0 auto;
234
+
235
+ background-color:#b0c4de;
236
+
237
+
238
+
239
+ }
240
+
241
+
242
+
243
+
244
+
245
+ /* menu */
246
+
247
+
248
+
249
+
250
+
251
+ #menu{
252
+
253
+ width:800px;
254
+
255
+ margin:0 auto;
256
+
257
+ background-color:#db7093;
258
+
259
+ }
260
+
261
+
262
+
263
+
264
+
265
+
266
+
267
+ /* contents */
268
+
269
+
270
+
271
+ #contents{
272
+
273
+ width:764px;
274
+
275
+ margin:0 auto;
276
+
277
+ padding:12px 18px 0;
278
+
279
+ display:flex;
280
+
281
+ justify-content:space-between;
282
+
283
+ }
284
+
285
+
286
+
287
+ .contents_side_c{
288
+
289
+ order:1;
290
+
291
+ width:428px;
292
+
293
+ background-color:#cd853f;
294
+
295
+ }
296
+
297
+
298
+
299
+ .contents_side_l{
300
+
301
+ order:0;
302
+
303
+ width:155px;
304
+
305
+ margin:0 13px 0 0;
306
+
307
+ background-color:#7fff00;
308
+
309
+ }
310
+
311
+
312
+
313
+ .contents_side_r{
314
+
315
+ order:2;
316
+
317
+ width:155px;
318
+
319
+ background-color:#483d8b;
320
+
321
+ }
322
+
323
+
324
+
325
+ /* fotter */
326
+
327
+
328
+
329
+ #footer{
330
+
331
+ width:800px;
332
+
333
+ height:38px;
334
+
335
+ background-color:#deb887;
336
+
337
+ }
164
338
 
165
339
  ```
166
-
167
-
168
-
169
- ```CSS
170
-
171
- @charset "utf-8";
172
-
173
-
174
-
175
- *{
176
-
177
- margin:0;
178
-
179
- padding:0;
180
-
181
- }
182
-
183
-
184
-
185
-
186
-
187
-
188
-
189
- span{
190
-
191
- color:#ff0000;
192
-
193
- font-weight:bold;
194
-
195
- }
196
-
197
-
198
-
199
-
200
-
201
- /* wrapper */
202
-
203
-
204
-
205
- #wrapper{
206
-
207
- width:820px;
208
-
209
- height:600px;
210
-
211
- margin:0 auto;
212
-
213
- text-align:center;
214
-
215
- background-color:#a9a9a9;
216
-
217
- }
218
-
219
-
220
-
221
-
222
-
223
- /* header */
224
-
225
-
226
-
227
- #header{
228
-
229
- width:800px;
230
-
231
- height:126px;
232
-
233
- margin:0 auto;
234
-
235
- background-color:#b0c4de;
236
-
237
-
238
-
239
- }
240
-
241
-
242
-
243
-
244
-
245
- /* menu */
246
-
247
-
248
-
249
-
250
-
251
- #menu{
252
-
253
- width:800px;
254
-
255
- margin:0 auto;
256
-
257
- background-color:#db7093;
258
-
259
- }
260
-
261
-
262
-
263
-
264
-
265
-
266
-
267
- /* contents */
268
-
269
-
270
-
271
- #contents{
272
-
273
- width:764px;
274
-
275
- margin:0 auto;
276
-
277
- padding:12px 18px 0;
278
-
279
- display:flex;
280
-
281
- justify-content:space-between;
282
-
283
- }
284
-
285
-
286
-
287
- .contents_side_c{
288
-
289
- order:1;
290
-
291
- width:428px;
292
-
293
- background-color:#cd853f;
294
-
295
- }
296
-
297
-
298
-
299
- .contents_side_l{
300
-
301
- order:0;
302
-
303
- width:155px;
304
-
305
- margin:0 13px 0 0;
306
-
307
- background-color:#7fff00;
308
-
309
- }
310
-
311
-
312
-
313
- .contents_side_r{
314
-
315
- order:2;
316
-
317
- width:155px;
318
-
319
- background-color:#483d8b;
320
-
321
- }
322
-
323
-
324
-
325
- /* fotter */
326
-
327
-
328
-
329
- #footer{
330
-
331
- width:800px;
332
-
333
- height:38px;
334
-
335
- background-color:#deb887;
336
-
337
- }
338
-
339
- ```