質問編集履歴

3

お礼の追加

2019/04/22 08:19

投稿

nagareboshi
nagareboshi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -711,3 +711,23 @@
711
711
  お伝えいただけますと幸いです。
712
712
 
713
713
  よろしくお願いいたします。
714
+
715
+
716
+
717
+
718
+
719
+
720
+
721
+ ### お礼
722
+
723
+ こんな初歩的なご質問で申し訳ございませんでした。
724
+
725
+ 無事解決いたしました。
726
+
727
+
728
+
729
+ ずっとCSSに誤りがあるのかと思っていましたが、
730
+
731
+ HTMLの書き間違いだったようです。
732
+
733
+ ご回答いただいた皆様ありがとうございました!

2

HTMLの名称を追加いたしました。

2019/04/22 08:19

投稿

nagareboshi
nagareboshi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -692,6 +692,14 @@
692
692
 
693
693
 
694
694
 
695
+ HTMLの名称も追加しておきます。
696
+
697
+
698
+
699
+ TOPぺージ : index.html
700
+
701
+ プロフィールページが : about.html
702
+
695
703
 
696
704
 
697
705
  ### 補足情報

1

ソースコードを入力し直しました。

2019/04/22 08:00

投稿

nagareboshi
nagareboshi

スコア15

test CHANGED
File without changes
test CHANGED
@@ -70,7 +70,89 @@
70
70
 
71
71
 
72
72
 
73
+ コードを入力し直しいたしました。
74
+
75
+ 下記が参考書通りに入力したコードになります。
76
+
77
+
78
+
79
+ ↓HTMLです。
80
+
81
+ ```
82
+
83
+ <!DOCTYPE html>
84
+
85
+ <html>
86
+
87
+
88
+
89
+ <head>
90
+
91
+ <meta charset="UTF-8">
92
+
93
+ <title>About 風景写真家「SNAPPERS」</title>
94
+
95
+ <link href="css/style.css" rel="stylesheet">
96
+
97
+ </head>
98
+
99
+
100
+
101
+ <body id="about">
102
+
103
+
104
+
105
+ <header>
106
+
107
+
108
+
109
+ <div class="logo">
110
+
111
+ <a href="index.html"></a><img src="images/logo.png" alt="SNAPPERS">
112
+
113
+ </div>
114
+
115
+
116
+
117
+
118
+
119
+ <nav>
120
+
121
+ <ul class="global-nav">
122
+
123
+ <li><a href="portfolio.html">Portfolio</a></li>
124
+
125
+ <li><a href="about.html">About</a></li>
126
+
127
+ <li><a href="contact.html">Contact</a></li>
128
+
129
+ </ul>
130
+
131
+ </nav>
132
+
133
+
134
+
135
+ </header>
136
+
137
+
138
+
139
+ <div id="wrap">
140
+
141
+ <div class="content">
142
+
143
+ <div class="main-center">
144
+
145
+ <h1>About</h1>
146
+
73
- <!-------------------- セクション要素① 始まり ---------------------->
147
+ <p>SNAPPERS代表、山田太郎のプロフィールや経歴の紹介ページです。</p>
148
+
149
+
150
+
151
+
152
+
153
+
154
+
155
+
74
156
 
75
157
  <section class="profile clearfix">
76
158
 
@@ -78,45 +160,489 @@
78
160
 
79
161
  <h2 class="icon">Profile</h2>
80
162
 
81
- <p><span>NAME</span>テキスト</p>
163
+ <p><span>SNAPPERS 代表:山田太郎</span><br>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシタンを得て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p>
82
164
 
83
165
  </div>
84
166
 
85
167
  </section>
86
168
 
169
+
170
+
87
- <!-------------------- セクション要素① 終わり ---------------------->
171
+ <img src="images/about-profile.png" alt="山田太郎のプロフィール" class="profile-image">
88
-
89
-
90
-
91
-
92
-
93
- <!-------------------- セクション要素② 始まり ---------------------->
172
+
173
+
174
+
175
+
176
+
177
+
178
+
179
+
180
+
181
+
94
182
 
95
183
  <section class="career">
96
184
 
97
185
  <h2 class="icon">Career and job history</h2>
98
186
 
187
+
188
+
99
189
  <table>
100
190
 
101
191
  <tr>
102
192
 
193
+ <th>1994年3月</th>
194
+
195
+ <td>丸三角芸術大学写真家 卒業 服部写真家研究所に入社、服部英明氏に師事</td>
196
+
197
+ </tr>
198
+
199
+
200
+
201
+ <tr>
202
+
203
+ <th>2002年3月</th>
204
+
205
+ <td>服部写真研究所を退社し渡米、世界各国を放浪しながら撮影を続ける</td>
206
+
207
+ </tr>
208
+
209
+
210
+
211
+ <tr>
212
+
213
+ <th>2012年8月</th>
214
+
215
+ <td>イタリア・ミラノで開催されたコンクールにて、審査委員特別賞受賞</td>
216
+
217
+ </tr>
218
+
219
+
220
+
221
+ <tr>
222
+
223
+ <th>2016年1月</th>
224
+
225
+ <td>帰国し「SNAPPERS」を設立</td>
226
+
227
+ </tr>
228
+
229
+
230
+
231
+ <tr>
232
+
103
- <th>2019年4月</th>
233
+ <th>2016年4月</th>
234
+
104
-
235
+ <td>Aichi Musiumにて初の写真展「Snap!Snap!」を開催</td>
236
+
105
- <td>テキスト</td>
237
+ </tr>
106
-
238
+
239
+
240
+
107
- </table>
241
+ </table>
242
+
243
+
244
+
245
+
108
246
 
109
247
  </section>
110
248
 
111
- <!-------------------- セクション要素② 終わり ---------------------->
112
-
113
-
114
-
115
- ↓CSSの記述です。
116
-
117
-
118
-
119
- (シャープ)about .profile-txt {
249
+
250
+
251
+ </div>
252
+
253
+ </div>
254
+
255
+ </div>
256
+
257
+
258
+
259
+
260
+
261
+
262
+
263
+ <footer>
264
+
265
+ <small>(c)2017 hattori-studio.</small>
266
+
267
+ </footer>
268
+
269
+
270
+
271
+
272
+
273
+ </body>
274
+
275
+
276
+
277
+
278
+
279
+ </html>
280
+
281
+ ```
282
+
283
+ ↓CSSです。
284
+
285
+ ```
286
+
287
+ @charset "utf-8";
288
+
289
+
290
+
291
+
292
+
293
+ body {
294
+
295
+ margin: 0;
296
+
297
+ padding: 0;
298
+
299
+ background-color: #cccccc;
300
+
301
+ color: #333333;
302
+
303
+ font-size: 15px;
304
+
305
+ line-height: 2;
306
+
307
+ }
308
+
309
+
310
+
311
+ p,h1,h2,h3,h4,h5,h6{
312
+
313
+ margin-top: 0;
314
+
315
+ }
316
+
317
+
318
+
319
+ img {
320
+
321
+ vertical-align: bottom;
322
+
323
+ }
324
+
325
+
326
+
327
+
328
+
329
+ ul {
330
+
331
+ margin: 0;
332
+
333
+ padding: 0;
334
+
335
+ }
336
+
337
+
338
+
339
+ a {
340
+
341
+ color: #3583aa;
342
+
343
+ text-decoration: none;
344
+
345
+ }
346
+
347
+
348
+
349
+ a:visited {
350
+
351
+ color: #788d98;
352
+
353
+ }
354
+
355
+
356
+
357
+ a:hover {
358
+
359
+ text-decoration: underline;
360
+
361
+ }
362
+
363
+
364
+
365
+ header {
366
+
367
+ width: 960px;
368
+
369
+ height: 100px;
370
+
371
+ margin: 0 auto;
372
+
373
+ }
374
+
375
+
376
+
377
+ .logo {
378
+
379
+ float: left;
380
+
381
+ margin-top: 50px;
382
+
383
+ }
384
+
385
+
386
+
387
+ .global-nav {
388
+
389
+ float: right;
390
+
391
+ margin-top: 60px;
392
+
393
+ }
394
+
395
+
396
+
397
+ .global-nav li {
398
+
399
+ float: left;
400
+
401
+ margin: 0 20px;
402
+
403
+ font-size: 20px;
404
+
405
+ list-style: none;
406
+
407
+ font-family: 'Bitter', serif;
408
+
409
+ }
410
+
411
+
412
+
413
+ .global-nav li a {
414
+
415
+ color: #ffffff;
416
+
417
+ }
418
+
419
+
420
+
421
+ .global-nav li a:hover {
422
+
423
+ border-bottom: 2px solid #ffffff;
424
+
425
+ padding-bottom: 3px;
426
+
427
+ text-decoration: none;
428
+
429
+ }
430
+
431
+
432
+
433
+ #wrap {
434
+
435
+ clear: both;
436
+
437
+ background-color: #ffffff;
438
+
439
+ margin-top: 220px;
440
+
441
+ padding: 35px 0;
442
+
443
+ }
444
+
445
+
446
+
447
+ .content {
448
+
449
+ width: 960px;
450
+
451
+ margin: 0 auto;
452
+
453
+ }
454
+
455
+
456
+
457
+ footer {
458
+
459
+ text-align: center;
460
+
461
+ color: #ffffff;
462
+
463
+ padding: 20px 0;
464
+
465
+ }
466
+
467
+
468
+
469
+ footer small {
470
+
471
+ font-size: 12px;
472
+
473
+ }
474
+
475
+
476
+
477
+ #index h1 {
478
+
479
+ font-size: 100px;
480
+
481
+ line-height: 1;
482
+
483
+ color: #ffffff;
484
+
485
+ font-family: 'Bitter', serif;
486
+
487
+ margin-bottom: 50px
488
+
489
+ }
490
+
491
+
492
+
493
+ #index .content {
494
+
495
+ margin-top: 150px
496
+
497
+ }
498
+
499
+
500
+
501
+
502
+
503
+ #index p {
504
+
505
+ font-size: 16px;
506
+
507
+ color: #ffffff
508
+
509
+ }
510
+
511
+
512
+
513
+
514
+
515
+ .btn a {
516
+
517
+ background-color: #009cd3;
518
+
519
+ color: #ffffff;
520
+
521
+ font-size: 20px;
522
+
523
+ font-family: 'Bitter', serif;
524
+
525
+ width: 185px;
526
+
527
+ display: block;
528
+
529
+ text-align: center;
530
+
531
+ line-height: 50px;
532
+
533
+ margin-top: 20px;
534
+
535
+ border-radius: 5px;
536
+
537
+ border: 3px solid #009cd3;
538
+
539
+ }
540
+
541
+
542
+
543
+ .btn a:hover {
544
+
545
+ text-decoration: none;
546
+
547
+ background-color: #ffffff;
548
+
549
+ color: #009cd3;
550
+
551
+ }
552
+
553
+
554
+
555
+ #index footer {
556
+
557
+ width: 960px;
558
+
559
+ margin: 150px auto 0px auto;
560
+
561
+ text-align: left;
562
+
563
+ }
564
+
565
+
566
+
567
+
568
+
569
+ #index {
570
+
571
+ background-image: url(../images/bg-index.jpg);
572
+
573
+ background-repeat: no-repeat;
574
+
575
+ background-position: center center;
576
+
577
+ background-attachment: fixed;
578
+
579
+ background-size: cover;
580
+
581
+ }
582
+
583
+
584
+
585
+ #about {
586
+
587
+ background-image: url(../images/bg-about.jpg);
588
+
589
+ background-repeat: no-repeat;
590
+
591
+ background-position: center top;
592
+
593
+ background-attachment: fixed;
594
+
595
+ background-size: 100% auto;
596
+
597
+ }
598
+
599
+
600
+
601
+ .main-center {
602
+
603
+ width: 940px;
604
+
605
+ margin: 0 auto;
606
+
607
+ }
608
+
609
+
610
+
611
+ h1 {
612
+
613
+ font-family: 'Bitter',sreif;
614
+
615
+ font-size: 36px;
616
+
617
+ border-bottom: 1px solid #cccccc;
618
+
619
+ }
620
+
621
+
622
+
623
+ h2 {
624
+
625
+ font-family: 'Bitter',sreif;
626
+
627
+ font-size: 24px;
628
+
629
+ }
630
+
631
+
632
+
633
+ .icon:before {
634
+
635
+ content: "";
636
+
637
+ padding-right: 10px;
638
+
639
+ border-left: 7px solid #9cb4a4;
640
+
641
+ }
642
+
643
+
644
+
645
+ #about .profile-txt {
120
646
 
121
647
  width: 540px;
122
648
 
@@ -126,7 +652,7 @@
126
652
 
127
653
 
128
654
 
129
- (シャープ)about .profile-txt span {
655
+ #about .profile-txt span {
130
656
 
131
657
  font-weight: bold;
132
658
 
@@ -134,9 +660,9 @@
134
660
 
135
661
 
136
662
 
137
- ここで右にしているはず?
663
+ /* ここで画像を配置指定 */
138
-
664
+
139
- (シャープ)about .profile-image {
665
+ #about .profile-image {
140
666
 
141
667
  float: right;
142
668
 
@@ -144,7 +670,7 @@
144
670
 
145
671
 
146
672
 
147
- ここのCSSを入力し後にレイアウトがずます。
673
+ /* ここでfloatで起きたレイアウトを解除 */
148
674
 
149
675
  .clearfix:after {
150
676
 
@@ -162,17 +688,7 @@
162
688
 
163
689
  margin-bottom: 35px;
164
690
 
165
- }
691
+ ```
166
-
167
-
168
-
169
-
170
-
171
-
172
-
173
- PS.シャープとかいてあるところは[#]と書くと見出しに変わってしまうため、
174
-
175
- テキストで記載しております。
176
692
 
177
693
 
178
694