質問編集履歴

1

コード全体を質問に掲載しました。

2019/12/07 09:42

投稿

programist
programist

スコア7

test CHANGED
File without changes
test CHANGED
@@ -54,6 +54,82 @@
54
54
 
55
55
  </head>
56
56
 
57
+ <body>
58
+
59
+ <div class="header">
60
+
61
+ <div class="header-logo">
62
+
63
+ <a href="">
64
+
65
+ <img src="header-logo.png" alt="NGIS">
66
+
67
+ </a>
68
+
69
+ </div>
70
+
71
+ </div>
72
+
73
+ <div class="main">
74
+
75
+ <div class="main-logo">
76
+
77
+ <div class="container">
78
+
79
+ <h1>最高の4年間を</h1>
80
+
81
+ <h1>NGISと共に</h1>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ <div class="main-list">
88
+
89
+ <ul>
90
+
91
+ <a href="">
92
+
93
+ <li class="btn about">NIGSについて</li>
94
+
95
+ </a>
96
+
97
+ <a href="">
98
+
99
+ <li class="btn detail">活動内容</li>
100
+
101
+ </a>
102
+
103
+ <a href="">
104
+
105
+ <li class="btn leaders">幹部紹介</li>
106
+
107
+ </a>
108
+
109
+ <a href="">
110
+
111
+ <li class="btn questions">Q&A</li>
112
+
113
+ </a>
114
+
115
+ </ul>
116
+
117
+ </div>
118
+
119
+ </div>
120
+
121
+ <div class="footer">
122
+
123
+
124
+
125
+ </div>
126
+
127
+ </body>
128
+
129
+ </html>
130
+
131
+
132
+
57
133
  ```
58
134
 
59
135
  ```CSS
@@ -72,6 +148,226 @@
72
148
 
73
149
  ```
74
150
 
151
+
152
+
153
+ ```CSS
154
+
155
+
156
+
157
+ body{
158
+
159
+ font-style: normal;
160
+
161
+ margin: 0;
162
+
163
+ width: 100%;
164
+
165
+ }
166
+
167
+
168
+
169
+ li{
170
+
171
+ list-style: none;
172
+
173
+ }
174
+
175
+
176
+
177
+ ul{
178
+
179
+ padding: 0 40px;
180
+
181
+ }
182
+
183
+
184
+
185
+ a{
186
+
187
+ display: block;
188
+
189
+ text-decoration: none;
190
+
191
+ }
192
+
193
+
194
+
195
+ .header-logo{
196
+
197
+ text-align: center;
198
+
199
+ }
200
+
201
+
202
+
203
+ .header-logo:active{
204
+
205
+ opacity: 0.5;
206
+
207
+ }
208
+
209
+
210
+
211
+ .header-logo img{
212
+
213
+ width: 180px;
214
+
215
+ height: 83.875px;
216
+
217
+ margin-top: 10px;
218
+
219
+
220
+
221
+ }
222
+
223
+
224
+
225
+ .header{
226
+
227
+ width: 100%;
228
+
229
+ height: 100px;
230
+
231
+ padding: 20px;
232
+
233
+ background-color: white;
234
+
235
+ position: fixed;
236
+
237
+ z-index: 999;
238
+
239
+ margin: 0 auto;
240
+
241
+ top: 0;
242
+
243
+ left: 0;
244
+
245
+ box-shadow: 0px 5px #000000;
246
+
247
+ }
248
+
249
+
250
+
251
+ .main-logo{
252
+
253
+ height: 800px;
254
+
255
+ background-image: url(IMG_2917.JPG);
256
+
257
+ background-size: cover;
258
+
259
+ background-position: 50% 50%;
260
+
261
+ }
262
+
263
+
264
+
265
+ .container{
266
+
267
+ padding: 0px px;
268
+
269
+ margin-left: auto;
270
+
271
+ margin-right: auto;
272
+
273
+ margin-top: 140px;
274
+
275
+ height: 800px;
276
+
277
+ width: 100%;
278
+
279
+ }
280
+
281
+
282
+
283
+ .container h1{
284
+
285
+ text-align: center;
286
+
287
+ font-size: 200px;
288
+
289
+ color: white;
290
+
291
+ opacity: 0.7;
292
+
293
+ margin: 100px 0;
294
+
295
+ line-height: 400px;
296
+
297
+ }
298
+
299
+
300
+
301
+ .main-list li{
302
+
303
+ border: 2px solid #000000;
304
+
305
+ height: 300px;
306
+
307
+ padding: 40px;
308
+
309
+ margin-top: 60px;
310
+
311
+ color: rgba(0, 0, 0, 0.5);
312
+
313
+ }
314
+
315
+
316
+
317
+ .main-list li:active{
318
+
319
+ opacity: 0.7;
320
+
321
+ }
322
+
323
+
324
+
325
+ .btn{
326
+
327
+ font-size: 200px;
328
+
329
+ padding: 30px;
330
+
331
+ text-align: center;
332
+
333
+ }
334
+
335
+
336
+
337
+ .about{
338
+
339
+ background-image: url(IMG_3808.JPG);
340
+
341
+ background-size: cover;
342
+
343
+ }
344
+
345
+
346
+
347
+ .detail{
348
+
349
+ background-image: url(IMG_3805.jpg);
350
+
351
+ background-size: cover;
352
+
353
+ }
354
+
355
+
356
+
357
+ .footer{
358
+
359
+ height: 250px;
360
+
361
+ background-color: #000000;
362
+
363
+ margin-top: 150px;
364
+
365
+ }
366
+
367
+
368
+
369
+ ```
370
+
75
371
  ### 試したこと
76
372
 
77
373
 
@@ -93,3 +389,7 @@
93
389
 
94
390
 
95
391
  コードはAtomで書いています。
392
+
393
+
394
+
395
+ 使っているPCはWindowsです。