質問編集履歴

1

CSSの追加をしました。

2021/01/30 22:50

投稿

dobashi
dobashi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -160,6 +160,214 @@
160
160
 
161
161
  ```
162
162
 
163
+ ```CSS
164
+
165
+ *{
166
+
167
+ /*margin,paddingの設定は、bootstrapにはないので入れておく*/
168
+
169
+ margin: 0;
170
+
171
+ padding: 0;
172
+
173
+ color: white;
174
+
175
+ }
176
+
177
+
178
+
179
+ .top-img{
180
+
181
+ background-image: url(../img/img01.jpg);
182
+
183
+ /*背景画像が繰り返さないようにする*/
184
+
185
+ background-size: cover;
186
+
187
+ /*画像を固定して、文字が動くようになる*/
188
+
189
+ background-attachment: fixed;
190
+
191
+ }
192
+
193
+
194
+
195
+ .top-text{
196
+
197
+ text-align: center;
198
+
199
+ padding: 250px 0px;
200
+
201
+ }
202
+
203
+
204
+
205
+ .top-text h1{
206
+
207
+ font-size: 100px;
208
+
209
+ font-family: 'Dancing Script', cursive;
210
+
211
+ }
212
+
213
+
214
+
215
+ nav h3{
216
+
217
+ font-family: 'Dancing Script', cursive;
218
+
219
+ color: black;
220
+
221
+ }
222
+
223
+
224
+
225
+ nav i{
226
+
227
+ /*Homeのアイコンの色*/
228
+
229
+ color:#888;
230
+
231
+ }
232
+
233
+
234
+
235
+ .night-sky{
236
+
237
+ background-image: url(../img/fix-bg.jpg);
238
+
239
+ background-size: cover;
240
+
241
+ padding: 200px 0;
242
+
243
+ text-align: center;
244
+
245
+ background-attachment: fixed;
246
+
247
+ }
248
+
249
+
250
+
251
+ .night-sky h2{
252
+
253
+ font-size: 80px;
254
+
255
+ font-family: 'Dancing Script', cursive;
256
+
257
+ margin-bottom: 40px;
258
+
259
+ }
260
+
261
+
262
+
263
+ .service-list{
264
+
265
+ background-color: black;
266
+
267
+ text-align: center;
268
+
269
+ padding: 50px;
270
+
271
+ }
272
+
273
+
274
+
275
+ .service-list h2{
276
+
277
+ font-size: 80px;
278
+
279
+ font-family: 'Dancing Script', cursive;
280
+
281
+ }
282
+
283
+
284
+
285
+ .service-description{
286
+
287
+ padding: 30px;
288
+
289
+ }
290
+
291
+
292
+
293
+ .Info{
294
+
295
+ border:solid 2px white;
296
+
297
+ margin: 20px;
298
+
299
+ padding: 20px;
300
+
301
+ }
302
+
303
+
304
+
305
+ .Info p{
306
+
307
+ padding: 10px;
308
+
309
+ }
310
+
311
+
312
+
313
+ footer{
314
+
315
+ background-color: #333;
316
+
317
+ /*marginにしてしまうと白の空白ができてしまう*/
318
+
319
+ padding: 30px;
320
+
321
+ }
322
+
323
+
324
+
325
+ footer ul li{
326
+
327
+ /*リストの●を消す*/
328
+
329
+ list-style: none;
330
+
331
+ }
332
+
333
+
334
+
335
+ footer ul li a{
336
+
337
+ /*footerは目立たせる必要がない*/
338
+
339
+ color: #aaa;
340
+
341
+ font-size: 13px;
342
+
343
+ }
344
+
345
+
346
+
347
+ /*hoverしたときに、白色、リンクの下線を無くす*/
348
+
349
+ footer ul li a:hover{
350
+
351
+ color: white;
352
+
353
+ text-decoration: none;
354
+
355
+ }
356
+
357
+
358
+
359
+ footer p{
360
+
361
+ text-align: right;
362
+
363
+ }
364
+
365
+
366
+
367
+ /**/
368
+
369
+ ```
370
+
163
371
 
164
372
 
165
373
  ### 試したこと