質問編集履歴

2

画像添付

2021/03/05 04:09

投稿

KANAtoAN812
KANAtoAN812

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,8 @@
1
+ ![イメージ説明](11a7f7fc7b00a11724b6ea36228eca02.png)
2
+
3
+
4
+
1
- ```(css)
5
+ (css)
2
6
 
3
7
  @charset "UTF-8";
4
8
 
@@ -430,7 +434,7 @@
430
434
 
431
435
  </body>
432
436
 
433
- </html>![イメージ説明](69158a6db21fb558e3943b28777249b1.png)
437
+ </html>![イメージ説明]
434
438
 
435
439
 
436
440
 

1

ソースコードはMarkDownの<code>ブロック内に貼り付け出来ていなかったため修正

2021/03/05 04:09

投稿

KANAtoAN812
KANAtoAN812

スコア3

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,450 @@
1
+ ```(css)
2
+
3
+ @charset "UTF-8";
4
+
5
+
6
+
7
+ html {
8
+
9
+ font-size: 100%;
10
+
11
+ }
12
+
13
+
14
+
15
+ body {
16
+
17
+ font-family: "Yu Gothic Medium", "遊ゴシック Medium", YuGothic, "遊ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
18
+
19
+ line-height: 1.7;
20
+
21
+ color: #432;
22
+
23
+ }
24
+
25
+
26
+
27
+ a {
28
+
29
+ text-decoration: none;
30
+
31
+ }
32
+
33
+
34
+
35
+ img {
36
+
37
+ max-width: 100%;
38
+
39
+ }
40
+
41
+
42
+
43
+ .logo {
44
+
45
+ width: 210px;
46
+
47
+ margin-top: 14px;
48
+
49
+ }
50
+
51
+
52
+
53
+ .main-nav {
54
+
55
+ display: flex;
56
+
57
+ font-size: 1.25rem;
58
+
59
+ text-transform: uppercase;
60
+
61
+ list-style: none;
62
+
63
+ margin-top: 34px;
64
+
65
+ }
66
+
67
+
68
+
69
+ .main-nav li {
70
+
71
+ margin-left: 36px;
72
+
73
+ }
74
+
75
+
76
+
77
+ .main-nav a {
78
+
79
+ color: #432;
80
+
81
+ }
82
+
83
+
84
+
85
+ .main-nav a:hover {
86
+
87
+ color: #0bd;
88
+
89
+ }
90
+
91
+
92
+
93
+ .page-header {
94
+
95
+ display: flex;
96
+
97
+ justify-content: space-between;
98
+
99
+ }
100
+
101
+
102
+
103
+ .wrapper {
104
+
105
+ max-width: 1100px;
106
+
107
+ margin: 0 auto;
108
+
109
+ padding: 0 4%;
110
+
111
+ }
112
+
113
+ .home-content {
114
+
115
+ text-align: center;
116
+
117
+ margin-top: 10%;
118
+
119
+ }
120
+
121
+
122
+
123
+ .home-content p {
124
+
125
+ font-size: 1.125rem;
126
+
127
+ margin: 10px 0 42px;
128
+
129
+ }
130
+
131
+
132
+
133
+ /* 見出し */
134
+
135
+ .page-title {
136
+
137
+ font-size: 5rem;
138
+
139
+ font-family: 'Philosopher', serif;
140
+
141
+ text-transform: uppercase;
142
+
143
+ font-weight: normal;
144
+
145
+ }
146
+
147
+
148
+
149
+ /* ボタン */
150
+
151
+ .button {
152
+
153
+ font-size: 1.375rem;
154
+
155
+ background: #0bd;
156
+
157
+ color: #fff;
158
+
159
+ border-radius: 5px;
160
+
161
+ padding: 18px 32px;
162
+
163
+ }
164
+
165
+
166
+
167
+ .button:hover {
168
+
169
+ background: #0090aa;
170
+
171
+ }
172
+
173
+
174
+
175
+ /* 大きな背景画像 */
176
+
177
+ .big-bg {
178
+
179
+ background-size: cover;
180
+
181
+ background-position: center top;
182
+
183
+ background-repeat: no-repeat;
184
+
185
+ }
186
+
187
+
188
+
189
+ #news {
190
+
191
+ background-image: url(../images/news-bg.jpg);
192
+
193
+ height: 270px;
194
+
195
+ margin-bottom: 40px;
196
+
197
+ }
198
+
199
+
200
+
201
+ #news .page-title {
202
+
203
+ text-align: center;
204
+
205
+ }
206
+
207
+
208
+
209
+ footer {
210
+
211
+ background: #432;
212
+
213
+ text-align: center;
214
+
215
+ padding: 26px 0;
216
+
217
+ }
218
+
219
+
220
+
221
+ footer p {
222
+
223
+ color: #fff;
224
+
225
+ font-size: 0.875rem;
226
+
227
+ }
228
+
229
+
230
+
231
+ article {
232
+
233
+ width: 74%;
234
+
235
+ }
236
+
237
+
238
+
239
+ aside {
240
+
241
+ width: 22%;
242
+
243
+ }
244
+
245
+
246
+
247
+ .news-contents {
248
+
249
+ display: flex;
250
+
251
+ justify-content: space-between;
252
+
253
+ margin-bottom: 50px;
254
+
255
+ }
256
+
257
+
258
+
259
+ .post-info {
260
+
261
+ position: relative;
262
+
263
+ padding-top: 4px;
264
+
265
+ margin-bottom: 40px;
266
+
267
+ }
268
+
269
+
270
+
271
+ .post-date {
272
+
273
+ background: #0bd;
274
+
275
+ border-radius: 50%;
276
+
277
+ color: #fff;
278
+
279
+ width: 100px;
280
+
281
+ height: 100px;
282
+
283
+ font-size: 1.625rem;
284
+
285
+ text-align: center;
286
+
287
+ position: absolute;
288
+
289
+ top: 0;
290
+
291
+ padding-top: 10px;
292
+
293
+ }
294
+
295
+
296
+
297
+ .post-date span {
298
+
299
+ font-size: 1rem;
300
+
301
+ border-top: 1px rgba(255,255,255,.5) solid;
302
+
303
+ padding-top: 6px;
304
+
305
+ display: block;
306
+
307
+ width: 60%;
308
+
309
+ margin: 0 auto;
310
+
311
+ }
312
+
313
+
314
+
315
+ .post-title {
316
+
317
+ font-family: "Yu Mincho", "YuMincho", serif;
318
+
319
+ font-size: 2rem;
320
+
321
+ font-weight: normal;
322
+
323
+ }
324
+
325
+
326
+
327
+ .post-title,
328
+
329
+ .post-cat {
330
+
331
+ margin-left: 120px;
332
+
333
+ }
334
+
335
+
336
+
337
+ (html)
338
+
339
+ <!DOCTYPE html>
340
+
341
+ <html lang="ja">
342
+
343
+ <head>
344
+
345
+ <meta charset="UTF-8">
346
+
347
+ <title>WCB Cafe - NEWS</title>
348
+
349
+ <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
350
+
351
+ <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
352
+
353
+ <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">
354
+
355
+ <link href="css/style.css" rel="stylesheet">
356
+
357
+ <link rel="icon" type="image/png" href="images/favicon.png">
358
+
359
+ </head>
360
+
361
+
362
+
363
+ <body>
364
+
365
+ <div id="news" class="big-bg">
366
+
367
+ <header class="page-header wrapper">
368
+
369
+ <h1><a href=index.html><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
370
+
371
+ <nav>
372
+
373
+ <ul class="main-nav">
374
+
375
+ <li><a href="news.html">News</a></li>
376
+
377
+ <li><a href="menu.html">Menu</a></li>
378
+
379
+ <li><a href="contact.html">Contact</a></li>
380
+
381
+ </ul>
382
+
383
+ </nav>
384
+
385
+ </header>
386
+
387
+ <div class="wrapper">
388
+
389
+ <h2 class="page-title">News</h2>
390
+
391
+ </div>
392
+
393
+ </div>
394
+
395
+ <div class="news-contents wrapper">
396
+
397
+ <article>
398
+
399
+ <header class="post-info">
400
+
401
+ <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
402
+
403
+ <p class="post-date">3/5 <span>2021</span></p>
404
+
405
+ <p class="post-cat">カテゴリー :お店の紹介</p>
406
+
407
+ </header>
408
+
409
+ </article>
410
+
411
+ <aside>
412
+
413
+
414
+
415
+ </aside>
416
+
417
+ </div>
418
+
419
+
420
+
421
+ <footer>
422
+
423
+ <div class="wrapper">
424
+
425
+ <p><small>&copy; 2021 Kanabox</small></p>
426
+
427
+ </div>
428
+
429
+ </footer>
430
+
431
+ </body>
432
+
433
+ </html>![イメージ説明](69158a6db21fb558e3943b28777249b1.png)
434
+
435
+
436
+
437
+
438
+
439
+
440
+
441
+
442
+
443
+
444
+
445
+ コード
446
+
1
- ### 前提・実現したいこと
447
+ ```### 前提・実現したいこと
2
448
 
3
449
 
4
450