質問編集履歴

3

全体像更新

2020/06/01 09:08

投稿

commandR
commandR

スコア1

test CHANGED
File without changes
test CHANGED
@@ -170,6 +170,268 @@
170
170
 
171
171
  ```
172
172
 
173
+ ```
174
+
175
+ <!DOCTYPE html>
176
+
177
+ <html lang="ja">
178
+
179
+ <head>
180
+
181
+ <meta charset="UTF-8">
182
+
183
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
184
+
185
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
186
+
187
+ <link rel="stylesheet" href="css/style.css">
188
+
189
+ <title>イタリアンレストラン</title>
190
+
191
+ </head>
192
+
193
+ <body>
194
+
195
+ <header>
196
+
197
+ <div class="container">
198
+
199
+ <div id="site_logo">
200
+
201
+ <h1>〜イタリアン〜</h1>
202
+
203
+ </div>
204
+
205
+
206
+
207
+ <div id="site_reserve">
208
+
209
+ <p>ご予約はこちらから</p>
210
+
211
+ <p class="site_tel">TEL 000-0000-000</p>
212
+
213
+ </div>
214
+
215
+ </div>
216
+
217
+
218
+
219
+ <nav>
220
+
221
+ <div class="container">
222
+
223
+ <ul>
224
+
225
+ <li><a href="#">トップ</a></li>
226
+
227
+ <li><a href="#concept">コンセプト</a></li>
228
+
229
+ <li><a href="#menu">メニュー</a></li>
230
+
231
+ <li><a href="#access">アクセス</a></li>
232
+
233
+ </ul>
234
+
235
+ </div>
236
+
237
+ </nav>
238
+
239
+ </header>
240
+
241
+
242
+
243
+
244
+
245
+ <main>
246
+
247
+ <section id="main_img">
248
+
249
+ <img src="" alt="">
250
+
251
+ </section>
252
+
253
+
254
+
255
+
256
+
257
+ <section id="concept">
258
+
259
+ <div class="container">
260
+
261
+ <img src="" alt="">
262
+
263
+ <h2>コンセプト</h2>
264
+
265
+ <img src="" alt="">
266
+
267
+ <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
268
+
269
+ </div>
270
+
271
+ </section>
272
+
273
+
274
+
275
+ <section id="menu">
276
+
277
+ <div class="container">
278
+
279
+ <img src="" alt="">
280
+
281
+ <h2>メニュー</h2>
282
+
283
+
284
+
285
+ <div class="menu_box">
286
+
287
+ <img src="" alt="">
288
+
289
+ <h3>パスタ</h3>
290
+
291
+ <ul>
292
+
293
+ <li>ぺぺ</li>
294
+
295
+ <li>パス</li>
296
+
297
+ <li>ソス</li>
298
+
299
+ <li>クリ</li>
300
+
301
+ </ul>
302
+
303
+ </div>
304
+
305
+
306
+
307
+ <div class="menu_box">
308
+
309
+ <img src="" alt="">
310
+
311
+ <h3>ピザ</h3>
312
+
313
+ <ul>
314
+
315
+ <li>まる</li>
316
+
317
+ <li>シー</li>
318
+
319
+ <li>こん</li>
320
+
321
+ <li>えび</li>
322
+
323
+ </ul>
324
+
325
+ </div>
326
+
327
+
328
+
329
+ <div class="menu_box">
330
+
331
+ <img src="" alt="">
332
+
333
+ <h3>ドリンク</h3>
334
+
335
+ <ul>
336
+
337
+ <li>なま</li>
338
+
339
+ <li>じん</li>
340
+
341
+ <li>ワイ</li>
342
+
343
+ <li>歌詞</li>
344
+
345
+ <li>かく</li>
346
+
347
+ </ul>
348
+
349
+ </div>
350
+
351
+ </div>
352
+
353
+ </section>
354
+
355
+
356
+
357
+ <section id="access">
358
+
359
+ <div class="container">
360
+
361
+ <img id="access_logo" src="" alt="">
362
+
363
+ <h2>アクセス</h2>
364
+
365
+
366
+
367
+ <div id="access_map">
368
+
369
+ <iframe src="https://goo.gl/maps/9iCAUPRSoENdM31K8" frameborder="0"></iframe>
370
+
371
+ </div>
372
+
373
+
374
+
375
+ <div id="access_txt">
376
+
377
+ <p>
378
+
379
+ 〒000-0000 あああああああああああ
380
+
381
+ </p>
382
+
383
+ <p>
384
+
385
+ TEL:000-0000-0000
386
+
387
+ </p>
388
+
389
+ <p>
390
+
391
+ 営業時間:11:00~22:00
392
+
393
+ </p>
394
+
395
+ <p>
396
+
397
+ 定休日:火曜日
398
+
399
+ </p>
400
+
401
+ </div>
402
+
403
+
404
+
405
+ <div id="access_reserve">
406
+
407
+ <p>ご予約はこちらから</p>
408
+
409
+ <p class="site_tel">TEL:000-0000-0000</p>
410
+
411
+ </div>
412
+
413
+ </div>
414
+
415
+ </section>
416
+
417
+ </main>
418
+
419
+
420
+
421
+ <footer>
422
+
423
+ <img src="" alt="">
424
+
425
+ <p>Copyright &copy; ああああああああ</p>
426
+
427
+ </footer>
428
+
429
+ </body>
430
+
431
+ </html>
432
+
433
+ ```
434
+
173
435
 
174
436
 
175
437
  ### 試したこと

2

全体を追加いたしました。

2020/06/01 09:08

投稿

commandR
commandR

スコア1

test CHANGED
File without changes
test CHANGED
@@ -46,6 +46,10 @@
46
46
 
47
47
 
48
48
 
49
+ ```
50
+
51
+ ```
52
+
49
53
  nav {
50
54
 
51
55
  background-color: #c20d23;
@@ -68,6 +72,104 @@
68
72
 
69
73
  ```
70
74
 
75
+ ```全体
76
+
77
+ @charset "utf-8";
78
+
79
+
80
+
81
+ * {
82
+
83
+ margin: 0;
84
+
85
+ padding: 0;
86
+
87
+ }
88
+
89
+
90
+
91
+ body {
92
+
93
+ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
94
+
95
+ }
96
+
97
+
98
+
99
+ .container {
100
+
101
+ max-width: 1000px;
102
+
103
+ margin: 0 auto;
104
+
105
+ }
106
+
107
+
108
+
109
+ header .container {
110
+
111
+ display: flex;
112
+
113
+ }
114
+
115
+
116
+
117
+ #site_logo {
118
+
119
+ width: 65%;
120
+
121
+ }
122
+
123
+
124
+
125
+ #site_reserve {
126
+
127
+ width: 35%;
128
+
129
+ text-align: right;
130
+
131
+ margin-top: 10px;
132
+
133
+ }
134
+
135
+
136
+
137
+ .site_tel {
138
+
139
+ font-size: 1.5em;
140
+
141
+ color: #c20d23;
142
+
143
+ }
144
+
145
+
146
+
147
+ nav {
148
+
149
+ background-color: #c20d23;
150
+
151
+
152
+
153
+ ul {
154
+
155
+ list-style: none;
156
+
157
+ display: flex;
158
+
159
+ justify-content: space-around;
160
+
161
+ text-align: center;
162
+
163
+ }
164
+
165
+ }
166
+
167
+
168
+
169
+
170
+
171
+ ```
172
+
71
173
 
72
174
 
73
175
  ### 試したこと

1

補足

2020/06/01 07:51

投稿

commandR
commandR

スコア1

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ```
14
14
 
15
- flexboxを活用したいのですが、横並びにはなっても、等間隔になりません
15
+ flexboxを活用したいのですが、横並びにはなっても、左寄せのままで等間隔になりません
16
16
 
17
17
  ```
18
18