teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

お礼の追加

2019/04/22 08:19

投稿

nagareboshi
nagareboshi

スコア15

title CHANGED
File without changes
body CHANGED
@@ -354,4 +354,14 @@
354
354
 
355
355
  何か他に必要な情報がございましたら、
356
356
  お伝えいただけますと幸いです。
357
- よろしくお願いいたします。
357
+ よろしくお願いいたします。
358
+
359
+
360
+
361
+ ### お礼
362
+ こんな初歩的なご質問で申し訳ございませんでした。
363
+ 無事解決いたしました。
364
+
365
+ ずっとCSSに誤りがあるのかと思っていましたが、
366
+ HTMLの書き間違いだったようです。
367
+ ご回答いただいた皆様ありがとうございました!

2

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

2019/04/22 08:19

投稿

nagareboshi
nagareboshi

スコア15

title CHANGED
File without changes
body CHANGED
@@ -345,7 +345,11 @@
345
345
  margin-bottom: 35px;
346
346
  ```
347
347
 
348
+ HTMLの名称も追加しておきます。
348
349
 
350
+ TOPぺージ : index.html
351
+ プロフィールページが : about.html
352
+
349
353
  ### 補足情報
350
354
 
351
355
  何か他に必要な情報がございましたら、

1

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

2019/04/22 08:00

投稿

nagareboshi
nagareboshi

スコア15

title CHANGED
File without changes
body CHANGED
@@ -34,44 +34,307 @@
34
34
 
35
35
  ### 該当のソースコード
36
36
 
37
+ コードを入力し直しいたしました。
38
+ 下記が参考書通りに入力したコードになります。
39
+
40
+ ↓HTMLです。
41
+ ```
42
+ <!DOCTYPE html>
43
+ <html>
44
+
45
+ <head>
46
+ <meta charset="UTF-8">
47
+ <title>About 風景写真家「SNAPPERS」</title>
48
+ <link href="css/style.css" rel="stylesheet">
49
+ </head>
50
+
51
+ <body id="about">
52
+
53
+ <header>
54
+
55
+ <div class="logo">
56
+ <a href="index.html"></a><img src="images/logo.png" alt="SNAPPERS">
57
+ </div>
58
+
59
+
60
+ <nav>
61
+ <ul class="global-nav">
62
+ <li><a href="portfolio.html">Portfolio</a></li>
63
+ <li><a href="about.html">About</a></li>
64
+ <li><a href="contact.html">Contact</a></li>
65
+ </ul>
66
+ </nav>
67
+
68
+ </header>
69
+
70
+ <div id="wrap">
71
+ <div class="content">
72
+ <div class="main-center">
73
+ <h1>About</h1>
37
- <!-------------------- セクション要素① 始まり ---------------------->
74
+ <p>SNAPPERS代表、山田太郎のプロフィールや経歴の紹介ページです。</p>
75
+
76
+
77
+
78
+
38
79
  <section class="profile clearfix">
39
80
  <div class="profile-txt">
40
81
  <h2 class="icon">Profile</h2>
41
- <p><span>NAME</span>テキスト</p>
82
+ <p><span>SNAPPERS 代表:山田太郎</span><br>アナログ、デジタルを問わず、トイカメラやポラロイド、ビデオカメラに至るまで、あらゆるカメラに夢中になって遊んでいるうちに自然とカメラマンとしての道を志すようになる。<br>大学卒業後、有名カメラマンのアシタンを得て渡米。世界各国を放浪しながら撮影をする中で、現在のアウトドアカメラとしてのスタイルを確立する。2016年に帰国し、「SNAPPERS」を設立。<br>現在は、雑誌の表紙やカタログの撮影を中心に、映像作品などにもカメラマンとして参加するなど幅広く活躍している。</p>
42
83
  </div>
43
84
  </section>
85
+
44
- <!-------------------- セクション要素① 終わり ---------------------->
86
+ <img src="images/about-profile.png" alt="山田太郎のプロフィール" class="profile-image">
45
-
46
-
47
- <!-------------------- セクション要素② 始まり ---------------------->
87
+
88
+
89
+
90
+
91
+
48
92
  <section class="career">
49
93
  <h2 class="icon">Career and job history</h2>
94
+
50
95
  <table>
51
96
  <tr>
97
+ <th>1994年3月</th>
98
+ <td>丸三角芸術大学写真家 卒業 服部写真家研究所に入社、服部英明氏に師事</td>
99
+ </tr>
100
+
101
+ <tr>
102
+ <th>2002年3月</th>
103
+ <td>服部写真研究所を退社し渡米、世界各国を放浪しながら撮影を続ける</td>
104
+ </tr>
105
+
106
+ <tr>
107
+ <th>2012年8月</th>
108
+ <td>イタリア・ミラノで開催されたコンクールにて、審査委員特別賞受賞</td>
109
+ </tr>
110
+
111
+ <tr>
112
+ <th>2016年1月</th>
113
+ <td>帰国し「SNAPPERS」を設立</td>
114
+ </tr>
115
+
116
+ <tr>
52
- <th>2019年4月</th>
117
+ <th>2016年4月</th>
118
+ <td>Aichi Musiumにて初の写真展「Snap!Snap!」を開催</td>
53
- <td>テキスト</td>
119
+ </tr>
120
+
54
- </table>
121
+ </table>
122
+
123
+
55
124
  </section>
125
+
56
- <!-------------------- セクション要素② 終わり ---------------------->
126
+ </div>
127
+ </div>
128
+ </div>
129
+
57
130
 
58
- ↓CSSの記述です。
59
131
 
132
+ <footer>
133
+ <small>(c)2017 hattori-studio.</small>
134
+ </footer>
135
+
136
+
137
+ </body>
138
+
139
+
140
+ </html>
141
+ ```
142
+ ↓CSSです。
143
+ ```
144
+ @charset "utf-8";
145
+
146
+
147
+ body {
148
+ margin: 0;
149
+ padding: 0;
150
+ background-color: #cccccc;
151
+ color: #333333;
152
+ font-size: 15px;
153
+ line-height: 2;
154
+ }
155
+
156
+ p,h1,h2,h3,h4,h5,h6{
157
+ margin-top: 0;
158
+ }
159
+
160
+ img {
161
+ vertical-align: bottom;
162
+ }
163
+
164
+
165
+ ul {
166
+ margin: 0;
167
+ padding: 0;
168
+ }
169
+
170
+ a {
171
+ color: #3583aa;
172
+ text-decoration: none;
173
+ }
174
+
175
+ a:visited {
176
+ color: #788d98;
177
+ }
178
+
179
+ a:hover {
180
+ text-decoration: underline;
181
+ }
182
+
183
+ header {
184
+ width: 960px;
185
+ height: 100px;
186
+ margin: 0 auto;
187
+ }
188
+
189
+ .logo {
190
+ float: left;
191
+ margin-top: 50px;
192
+ }
193
+
194
+ .global-nav {
195
+ float: right;
196
+ margin-top: 60px;
197
+ }
198
+
199
+ .global-nav li {
200
+ float: left;
201
+ margin: 0 20px;
202
+ font-size: 20px;
203
+ list-style: none;
204
+ font-family: 'Bitter', serif;
205
+ }
206
+
207
+ .global-nav li a {
208
+ color: #ffffff;
209
+ }
210
+
211
+ .global-nav li a:hover {
212
+ border-bottom: 2px solid #ffffff;
213
+ padding-bottom: 3px;
214
+ text-decoration: none;
215
+ }
216
+
217
+ #wrap {
218
+ clear: both;
219
+ background-color: #ffffff;
220
+ margin-top: 220px;
221
+ padding: 35px 0;
222
+ }
223
+
224
+ .content {
225
+ width: 960px;
226
+ margin: 0 auto;
227
+ }
228
+
229
+ footer {
230
+ text-align: center;
231
+ color: #ffffff;
232
+ padding: 20px 0;
233
+ }
234
+
235
+ footer small {
236
+ font-size: 12px;
237
+ }
238
+
239
+ #index h1 {
240
+ font-size: 100px;
241
+ line-height: 1;
242
+ color: #ffffff;
243
+ font-family: 'Bitter', serif;
244
+ margin-bottom: 50px
245
+ }
246
+
247
+ #index .content {
248
+ margin-top: 150px
249
+ }
250
+
251
+
252
+ #index p {
253
+ font-size: 16px;
254
+ color: #ffffff
255
+ }
256
+
257
+
258
+ .btn a {
259
+ background-color: #009cd3;
260
+ color: #ffffff;
261
+ font-size: 20px;
262
+ font-family: 'Bitter', serif;
263
+ width: 185px;
264
+ display: block;
265
+ text-align: center;
266
+ line-height: 50px;
267
+ margin-top: 20px;
268
+ border-radius: 5px;
269
+ border: 3px solid #009cd3;
270
+ }
271
+
272
+ .btn a:hover {
273
+ text-decoration: none;
274
+ background-color: #ffffff;
275
+ color: #009cd3;
276
+ }
277
+
278
+ #index footer {
279
+ width: 960px;
280
+ margin: 150px auto 0px auto;
281
+ text-align: left;
282
+ }
283
+
284
+
285
+ #index {
286
+ background-image: url(../images/bg-index.jpg);
287
+ background-repeat: no-repeat;
288
+ background-position: center center;
289
+ background-attachment: fixed;
290
+ background-size: cover;
291
+ }
292
+
293
+ #about {
294
+ background-image: url(../images/bg-about.jpg);
295
+ background-repeat: no-repeat;
296
+ background-position: center top;
297
+ background-attachment: fixed;
298
+ background-size: 100% auto;
299
+ }
300
+
301
+ .main-center {
302
+ width: 940px;
303
+ margin: 0 auto;
304
+ }
305
+
306
+ h1 {
307
+ font-family: 'Bitter',sreif;
308
+ font-size: 36px;
309
+ border-bottom: 1px solid #cccccc;
310
+ }
311
+
312
+ h2 {
313
+ font-family: 'Bitter',sreif;
314
+ font-size: 24px;
315
+ }
316
+
317
+ .icon:before {
318
+ content: "";
319
+ padding-right: 10px;
320
+ border-left: 7px solid #9cb4a4;
321
+ }
322
+
60
- (シャープ)about .profile-txt {
323
+ #about .profile-txt {
61
324
  width: 540px;
62
325
  float: left;
63
326
  }
64
327
 
65
- (シャープ)about .profile-txt span {
328
+ #about .profile-txt span {
66
329
  font-weight: bold;
67
330
  }
68
331
 
69
- ここで右にしているはず?
332
+ /* ここで画像を配置指定 */
70
- (シャープ)about .profile-image {
333
+ #about .profile-image {
71
334
  float: right;
72
335
  }
73
336
 
74
- ここのCSSを入力し後にレイアウトがずます。
337
+ /* ここでfloatで起きたレイアウトを解除 */
75
338
  .clearfix:after {
76
339
  content: "";
77
340
  display: block;
@@ -80,14 +343,9 @@
80
343
 
81
344
  section {
82
345
  margin-bottom: 35px;
83
- }
346
+ ```
84
347
 
85
348
 
86
-
87
- PS.シャープとかいてあるところは[#]と書くと見出しに変わってしまうため、
88
- テキストで記載しております。
89
-
90
-
91
349
  ### 補足情報
92
350
 
93
351
  何か他に必要な情報がございましたら、