teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問左上にprofile、その横に画像を持ってきて、その下から「意気込み」を書きたいのですが、今の状態だとがprofileと画像の真ん中から「意気込み」が入り込みます。どうしてでしょうか。

編集履歴

質問編集履歴

3

省略なし

2019/02/09 03:14

投稿

liisa
liisa

スコア20

title CHANGED
File without changes
body CHANGED
@@ -66,9 +66,6 @@
66
66
  </html>
67
67
  ```
68
68
  ```css
69
-
70
- コード
71
- ```
72
69
  body{
73
70
  margin:0;
74
71
  padding:0;
@@ -173,6 +170,12 @@
173
170
  font-size: 24px;
174
171
  }
175
172
 
173
+ #about{
174
+ background-repeat: no-repeat;
175
+ background-position: center center;
176
+ background-attachment: fixed;
177
+ background-size: 100% auto;
178
+ }
176
179
  .icon:before{
177
180
  content: "";
178
181
  padding-right: 10px;
@@ -197,4 +200,5 @@
197
200
  }
198
201
  .section{
199
202
  margin-bottom:35px;
200
- }
203
+ }
204
+ ```

2

省略してないものです

2019/02/09 03:14

投稿

liisa
liisa

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,23 +1,25 @@
1
1
  ```html
2
- !DOCTYPE html>
2
+ html>
3
3
  <html>
4
4
  <head>
5
5
  <meta charset="utf-8">
6
6
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
- <title>自己紹介</title>
7
+ <title>自己紹介サイト</title>
8
8
  <link rel="stylesheet" href="about.css">
9
9
  </head>
10
10
 
11
11
  <body id="about">
12
12
  <header>
13
13
  <div class="logo">
14
- <a herf="index.html"><img .....</a>
14
+ <a herf="index.html"><img src="./images/welcome.png" alt=""></a>
15
15
  </div>
16
16
 
17
17
 
18
18
  <nav>
19
19
  <ul class="global-nav">
20
+ <li><a href="about.html">who I am</a></li>
20
- 省略
21
+ <li><a href="Like.html">Like</a></li>
22
+ <li><a href="contact.html">Contact</a></li>
21
23
  </ul>
22
24
  </nav>
23
25
 
@@ -33,18 +35,23 @@
33
35
  <section class="profile clearfix">
34
36
  <div class="profile-txt">
35
37
  <h2 class="icon">Profile</h2>
38
+ <p>名前：<br>
39
+ 出身：<br>
36
- 省略
40
+ 趣味：サーフィン
41
+ </p>
37
42
 
43
+
38
44
  </div>
39
45
 
40
46
 
41
- <img src="img.jpeg" alt="" class="profile-image">
47
+ <img src="./images/me.jpeg" alt="わたし！" class="profile-image">
42
48
  </section>
43
49
 
44
50
 
45
51
  <section class="ikigoi">
46
52
  <h2 class="icon">意気込み</h2>
53
+ <p>これからよろしくお願いします。<br>
47
- <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
54
+ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
48
55
 
49
56
  </section>
50
57
  </div>
@@ -52,13 +59,16 @@
52
59
  </div>
53
60
 
54
61
  <footer>
55
- <small>省略</small>
62
+ <small>(c)2019 sea-introduce</small>
56
63
  </footer>
57
64
 
58
65
  </body>
59
66
  </html>
60
67
  ```
61
68
  ```css
69
+
70
+ コード
71
+ ```
62
72
  body{
63
73
  margin:0;
64
74
  padding:0;
@@ -180,13 +190,11 @@
180
190
 
181
191
 
182
192
  .clearfix: after{
183
- content"";
193
+ content:"";
184
194
  display: block;
185
195
  height: 0;
186
196
  clear: both;
187
197
  }
188
198
  .section{
189
199
  margin-bottom:35px;
190
- }
200
+ }
191
- コード
192
- ```

1

コード等、書き直しました。

2019/02/09 03:13

投稿

liisa
liisa

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,19 +1,40 @@
1
- ＃html
1
+ ```html
2
+ !DOCTYPE html>
3
+ <html>
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <title>自己紹介</title>
8
+ <link rel="stylesheet" href="about.css">
9
+ </head>
2
10
 
3
11
  <body id="about">
4
- 省略......
12
+ <header>
13
+ <div class="logo">
14
+ <a herf="index.html"><img .....</a>
15
+ </div>
16
+
5
17
 
18
+ <nav>
19
+ <ul class="global-nav">
20
+ 省略
21
+ </ul>
22
+ </nav>
23
+
24
+ </header>
25
+
26
+
27
+
6
- <div id="wrap">
28
+ <div id="wrap">
7
29
  <div class="content">
8
30
  <div class="main-center">
9
- <h1>自己紹介</h1>
31
+ <h1>About me</h1>
10
32
 
11
33
  <section class="profile clearfix">
12
34
  <div class="profile-txt">
13
35
  <h2 class="icon">Profile</h2>
14
- 省略.........
36
+ 省略
15
37
 
16
-
17
38
  </div>
18
39
 
19
40
 
@@ -23,23 +44,125 @@
23
44
 
24
45
  <section class="ikigoi">
25
46
  <h2 class="icon">意気込み</h2>
26
- <p>よろしくお願いします。</p>
47
+ <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
27
48
 
28
-
29
49
  </section>
30
50
  </div>
31
51
  </div>
32
52
  </div>
33
53
 
34
54
  <footer>
35
- <small>(c)省略</small>
55
+ <small>省略</small>
36
56
  </footer>
37
57
 
38
58
  </body>
39
59
  </html>
60
+ ```
61
+ ```css
62
+ body{
63
+ margin:0;
64
+ padding:0;
65
+ background-color: silver;
66
+ color:black;
67
+ font-size:15px;
68
+ line-height: 2;
69
+ }
40
70
 
71
+ p,h1,h2,h3,h4,h5,h6{
41
- ＃CSS
72
+ margin-top: 0;
73
+ }
42
74
 
75
+ img{
76
+ vertical-align: bottom;
77
+ }
78
+
79
+ ul{
80
+ margin:0;
81
+ padding:0;
82
+ }
83
+
84
+ a{
85
+ color:black;
86
+ text-decoration: none;
87
+ }
88
+
89
+ a:visited{
90
+ color: white;/*機能しているかチェック*/
91
+ }
92
+
93
+ a:hover{
94
+ text-decoration:underline;
95
+ }
96
+
97
+ header{
98
+ width:960px;
99
+ height:100px;
100
+ margin:0 auto;
101
+ }
102
+
103
+ .logo{
104
+ float:left;
105
+ margin-top: 30px;
106
+ }
107
+
108
+ .global-nav{
109
+ float:right;
110
+ margin-top: 60px;
111
+ }
112
+
113
+ .global-nav li{
114
+ float:left;
115
+ margin:0 20px;
116
+ font-size: 20px;
117
+ list-style: none;
118
+ }
119
+
120
+ .global-nav li a{
121
+ color: black;
122
+ }
123
+
124
+ .global-nav li a:hover{
125
+ border-bottom: 2px solid white;
126
+ padding-bottom: 3px;
127
+ text-decoration: none;
128
+ }
129
+
130
+ #wrap{
131
+ clear: both;
132
+ background-color: silver;
133
+ margin-top: 220px;
134
+ padding:35px 0;
135
+ }
136
+
137
+ .main-center{
138
+ width:940px;
139
+ margin: 0 auto;
140
+
141
+ }
142
+ .content{
143
+ width: 960px;
144
+ margin: 0 auto;
145
+ }
146
+
147
+ footer{
148
+ text-align: center;
149
+ color: black;
150
+ padding: 20px 0;
151
+ }
152
+
153
+ footer small{
154
+ font-size: 12px
155
+ }
156
+
157
+ h1{
158
+ font-size: 36px;
159
+ border-bottom: 1px solid white;
160
+ }
161
+
162
+ h2{
163
+ font-size: 24px;
164
+ }
165
+
43
166
  .icon:before{
44
167
  content: "";
45
168
  padding-right: 10px;
@@ -64,4 +187,6 @@
64
187
  }
65
188
  .section{
66
189
  margin-bottom:35px;
67
- }
190
+ }
191
+ コード
192
+ ```