質問編集履歴

2

修正

2019/03/02 15:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -10,348 +10,352 @@
10
10
 
11
11
 
12
12
 
13
+ ```HTML
14
+
15
+ //index.html
16
+
17
+ <!DOCTYPE>
18
+
19
+ <html>
20
+
21
+ <head>
22
+
23
+ <meta charset="utf-8" />
24
+
25
+ <title>Osteria Grazie[イタリア料理の店]</title>
26
+
27
+ <link href="style.css" rel="stylesheet">
28
+
29
+ <link href="nav.css" rel="stylesheet">
30
+
31
+ <link href="index_layout.css" rel="stylesheet">
32
+
33
+ </head>
34
+
35
+ <body>
36
+
37
+ <div id="container">
38
+
39
+
40
+
41
+ <header>
42
+
43
+ <h1><img src="images/title.png" alt="Osteria Grazie" width="420" height="90" /></h1>
44
+
45
+ </header>
46
+
47
+
48
+
49
+ <div id="nav">
50
+
51
+ <h3>information</h3>
52
+
53
+ <ul>
54
+
55
+ <li><a href="info.html">店舗紹介</a></li>
56
+
57
+ </ul>
58
+
59
+ <h3>menu</h3>
60
+
61
+ <ul>
62
+
63
+ <li><a href="#">ランチ</a></li>
64
+
65
+ <li><a href="menu.html">ディナー</a></li>
66
+
67
+ <li><a href="menu.html">アラカルト</a></li>
68
+
69
+ </ul>
70
+
71
+ <h3>recipe</h3>
72
+
73
+ <ul>
74
+
75
+ <li><a href="recipe.html">豚の背肉グリル</a></li>
76
+
77
+ <li><a href="#">ティラミス</a></li>
78
+
79
+ </ul>
80
+
81
+ <h3>contact</h3>
82
+
83
+ <ul>
84
+
85
+ <li><a href="message.html">ご意見ご要望</a></li>
86
+
87
+ <li><a href="#">メール</a></li>
88
+
89
+ </ul>
90
+
91
+ </div>
92
+
93
+
94
+
95
+ <div id="contents">
96
+
97
+ <img src="images/top2.jpg" alt="料理の写真" width="380" height="240" />
98
+
99
+ <h2>Welcome to Osteria Grazie</h2>
100
+
101
+ <p><span id="osteria">オステリア・グラッツェ</span>へようこそ!グラッツェとは<span class="italia">イタリア</span>語で「ありがとう」という意味です。
102
+
103
+ 本場<span class="italia">イタリア</span>で修行したシェフの味を、是非一度お試しください!</p>
104
+
105
+ </div>
106
+
107
+
108
+
109
+ <div id="footer">
110
+
111
+ <p id="copyright"><small>Copyright (C) 2014 Osteria Grazie. All Rights Reserved.</small></p>
112
+
113
+ </div>
114
+
115
+
116
+
117
+ </div>
118
+
119
+ </body>
120
+
121
+ </html>
122
+
13
123
  ```
14
124
 
15
- // index.html
16
-
17
- <!DOCTYPE>
18
-
19
- <html>
20
-
21
- <head>
22
-
23
- <meta charset="utf-8" />
24
-
25
- <title>Osteria Grazie[イタリア料理の店]</title>
26
-
27
- <link href="style.css" rel="stylesheet">
28
-
29
- <link href="nav.css" rel="stylesheet">
30
-
31
- <link href="index_layout.css" rel="stylesheet">
32
-
33
- </head>
34
-
35
- <body>
36
-
37
- <div id="container">
38
-
39
-
40
-
41
- <header>
42
-
43
- <h1><img src="images/title.png" alt="Osteria Grazie" width="420" height="90" /></h1>
44
-
45
- </header>
46
-
47
-
48
-
49
- <div id="nav">
50
-
51
- <h3>information</h3>
52
-
53
- <ul>
54
-
55
- <li><a href="info.html">店舗紹介</a></li>
56
-
57
- </ul>
58
-
59
- <h3>menu</h3>
60
-
61
- <ul>
62
-
63
- <li><a href="#">ランチ</a></li>
64
-
65
- <li><a href="menu.html">ディナー</a></li>
66
-
67
- <li><a href="menu.html">アラカルト</a></li>
68
-
69
- </ul>
70
-
71
- <h3>recipe</h3>
72
-
73
- <ul>
74
-
75
- <li><a href="recipe.html">豚の背肉グリル</a></li>
76
-
77
- <li><a href="#">ティラミス</a></li>
78
-
79
- </ul>
80
-
81
- <h3>contact</h3>
82
-
83
- <ul>
84
-
85
- <li><a href="message.html">ご意見ご要望</a></li>
86
-
87
- <li><a href="#">メール</a></li>
88
-
89
- </ul>
90
-
91
- </div>
92
-
93
-
94
-
95
- <div id="contents">
96
-
97
- <img src="images/top2.jpg" alt="料理の写真" width="380" height="240" />
98
-
99
- <h2>Welcome to Osteria Grazie</h2>
100
-
101
- <p><span id="osteria">オステリア・グラッツェ</span>へようこそ!グラッツェとは<span class="italia">イタリア</span>語で「ありがとう」という意味です。
102
-
103
- 本場<span class="italia">イタリア</span>で修行したシェフの味を、是非一度お試しください!</p>
104
-
105
- </div>
106
-
107
-
108
-
109
- <div id="footer">
110
-
111
- <p id="copyright"><small>Copyright (C) 2014 Osteria Grazie. All Rights Reserved.</small></p>
112
-
113
- </div>
114
-
115
-
116
-
117
- </div>
118
-
119
- </body>
120
-
121
- </html>
125
+
126
+
127
+ ```css
128
+
129
+ //index_layout.css
130
+
131
+ @charset "utf-8";
132
+
133
+ #container {
134
+
135
+ margin: 20px auto;
136
+
137
+ padding: 0;
138
+
139
+ width: 680px;
140
+
141
+ background: url(images/back_stripe.png) repeat-y;
142
+
143
+ border: solid 1px #666666;
144
+
145
+ }
146
+
147
+ #header {
148
+
149
+ background: url(images/top_img.png) no-repeat right top;
150
+
151
+ }
152
+
153
+ #nav {
154
+
155
+ width: 160px;
156
+
157
+ float: right;
158
+
159
+ }
160
+
161
+ #contents {
162
+
163
+ width: 520px;
164
+
165
+ float: left;
166
+
167
+ }
168
+
169
+ #footer {
170
+
171
+ clear: both;
172
+
173
+ }
174
+
175
+ ```ここに言語を入力
176
+
177
+
178
+
179
+ ```css
180
+
181
+ //nav.css
182
+
183
+ @charset "utf-8";
184
+
185
+
186
+
187
+
188
+
189
+ #nav {
190
+
191
+ text-align: left;
192
+
193
+ }
194
+
195
+ #nav img {
196
+
197
+ margin: 0;
198
+
199
+ padding: 0 0 90px 0;
200
+
201
+ }
202
+
203
+ #nav h3 {
204
+
205
+ margin: 0 10px;
206
+
207
+ padding: 2px 5px;
208
+
209
+ background-color: #525247;
210
+
211
+ color: #ffffff;
212
+
213
+ }
214
+
215
+ #nav ul {
216
+
217
+ font-size: small;
218
+
219
+ margin: 10px 20px;
220
+
221
+ padding: 0 10px;
222
+
223
+ }
224
+
225
+ #nav li {
226
+
227
+ list-style-type: none;
228
+
229
+ line-height: 1.5em;
230
+
231
+ }
232
+
233
+ #nav a {
234
+
235
+ text-decoration: none;
236
+
237
+ color: #333333;
238
+
239
+ }
240
+
241
+ #nav a:hover {
242
+
243
+ color: #ff6600;
244
+
245
+ }
246
+
247
+
122
248
 
123
249
  ```
124
250
 
125
251
 
126
252
 
253
+ ```css
254
+
255
+ //style.css
256
+
257
+ @charset "utf-8";
258
+
259
+
260
+
261
+ body {
262
+
263
+ color: #666666;
264
+
265
+ text-align: center;
266
+
267
+ background-color: #ffffff;
268
+
269
+ margin: 0;
270
+
271
+ padding: 0;
272
+
273
+ }
274
+
275
+ #contents {
276
+
277
+ margin: auto;
278
+
279
+ }
280
+
281
+ h1 {
282
+
283
+ background-color: #5c8f13;
284
+
285
+ margin: 0 160px 30px 0;
286
+
287
+ padding: 0 50px;
288
+
289
+ }
290
+
291
+ h2 {
292
+
293
+ font-size: 20px;
294
+
295
+ color: #ffffff;
296
+
297
+ font-family: "Courier New", Courier, monospace;
298
+
299
+ background-color: #ff9900;
300
+
301
+ margin: 20px 50px 0 50px;
302
+
303
+ }
304
+
305
+ #contents p {
306
+
307
+ text-align: left;
308
+
309
+ border-bottom: dotted #ff9900 4px;
310
+
311
+ border-left: dotted #ff9900 4px;
312
+
313
+ border-right: dotted #ff9900 4px;
314
+
315
+ margin: 0 50px 20px 50px;
316
+
317
+ padding: 15px;
318
+
319
+ }
320
+
321
+ p#copyright {
322
+
323
+ border-style: none;
324
+
325
+ padding: 0;
326
+
327
+ margin: 0;
328
+
329
+ }
330
+
331
+ #footer {
332
+
333
+ background-color: #5c8f13;
334
+
335
+ color: #ffffff;
336
+
337
+ padding: 5px 100px;
338
+
339
+ }
340
+
341
+ span#osteria {
342
+
343
+ font-weight: bold;
344
+
345
+ }
346
+
347
+ span.italia {
348
+
349
+ font-style: italic;
350
+
351
+ font-family:Times New Roman,"MS Pゴシック";
352
+
353
+ }
354
+
355
+
356
+
357
+
358
+
359
+
360
+
127
361
  ```
128
-
129
- //index_layout.css
130
-
131
- @charset "utf-8";
132
-
133
- #container {
134
-
135
- margin: 20px auto;
136
-
137
- padding: 0;
138
-
139
- width: 680px;
140
-
141
- background: url(images/back_stripe.png) repeat-y;
142
-
143
- border: solid 1px #666666;
144
-
145
- }
146
-
147
- #header {
148
-
149
- background: url(images/top_img.png) no-repeat right top;
150
-
151
- }
152
-
153
- #nav {
154
-
155
- width: 160px;
156
-
157
- float: right;
158
-
159
- }
160
-
161
- #contents {
162
-
163
- width: 520px;
164
-
165
- float: left;
166
-
167
- }
168
-
169
- #footer {
170
-
171
- clear: both;
172
-
173
- }
174
-
175
-
176
-
177
- //nav.css
178
-
179
- @charset "utf-8";
180
-
181
-
182
-
183
-
184
-
185
- #nav {
186
-
187
- text-align: left;
188
-
189
- }
190
-
191
- #nav img {
192
-
193
- margin: 0;
194
-
195
- padding: 0 0 90px 0;
196
-
197
- }
198
-
199
- #nav h3 {
200
-
201
- margin: 0 10px;
202
-
203
- padding: 2px 5px;
204
-
205
- background-color: #525247;
206
-
207
- color: #ffffff;
208
-
209
- }
210
-
211
- #nav ul {
212
-
213
- font-size: small;
214
-
215
- margin: 10px 20px;
216
-
217
- padding: 0 10px;
218
-
219
- }
220
-
221
- #nav li {
222
-
223
- list-style-type: none;
224
-
225
- line-height: 1.5em;
226
-
227
- }
228
-
229
- #nav a {
230
-
231
- text-decoration: none;
232
-
233
- color: #333333;
234
-
235
- }
236
-
237
- #nav a:hover {
238
-
239
- color: #ff6600;
240
-
241
- }
242
-
243
-
244
-
245
- ```
246
-
247
-
248
-
249
- ```
250
-
251
- //style.css
252
-
253
- @charset "utf-8";
254
-
255
-
256
-
257
- body {
258
-
259
- color: #666666;
260
-
261
- text-align: center;
262
-
263
- background-color: #ffffff;
264
-
265
- margin: 0;
266
-
267
- padding: 0;
268
-
269
- }
270
-
271
- #contents {
272
-
273
- margin: auto;
274
-
275
- }
276
-
277
- h1 {
278
-
279
- background-color: #5c8f13;
280
-
281
- margin: 0 160px 30px 0;
282
-
283
- padding: 0 50px;
284
-
285
- }
286
-
287
- h2 {
288
-
289
- font-size: 20px;
290
-
291
- color: #ffffff;
292
-
293
- font-family: "Courier New", Courier, monospace;
294
-
295
- background-color: #ff9900;
296
-
297
- margin: 20px 50px 0 50px;
298
-
299
- }
300
-
301
- #contents p {
302
-
303
- text-align: left;
304
-
305
- border-bottom: dotted #ff9900 4px;
306
-
307
- border-left: dotted #ff9900 4px;
308
-
309
- border-right: dotted #ff9900 4px;
310
-
311
- margin: 0 50px 20px 50px;
312
-
313
- padding: 15px;
314
-
315
- }
316
-
317
- p#copyright {
318
-
319
- border-style: none;
320
-
321
- padding: 0;
322
-
323
- margin: 0;
324
-
325
- }
326
-
327
- #footer {
328
-
329
- background-color: #5c8f13;
330
-
331
- color: #ffffff;
332
-
333
- padding: 5px 100px;
334
-
335
- }
336
-
337
- span#osteria {
338
-
339
- font-weight: bold;
340
-
341
- }
342
-
343
- span.italia {
344
-
345
- font-style: italic;
346
-
347
- font-family:Times New Roman,"MS Pゴシック";
348
-
349
- }
350
-
351
-
352
-
353
-
354
-
355
-
356
-
357
- ```

1

syuusei

2019/03/02 15:07

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -120,6 +120,12 @@
120
120
 
121
121
  </html>
122
122
 
123
+ ```
124
+
125
+
126
+
127
+ ```
128
+
123
129
  //index_layout.css
124
130
 
125
131
  @charset "utf-8";
@@ -236,7 +242,11 @@
236
242
 
237
243
 
238
244
 
239
-
245
+ ```
246
+
247
+
248
+
249
+ ```
240
250
 
241
251
  //style.css
242
252