質問編集履歴

4

初期コードへの編集

2019/08/02 06:59

投稿

htmldsbiuwdbco
htmldsbiuwdbco

スコア6

test CHANGED
File without changes
test CHANGED
@@ -146,8 +146,6 @@
146
146
 
147
147
  height: 600px;
148
148
 
149
- padding: 100px 80px;
150
-
151
149
  }
152
150
 
153
151
 

3

こードの分割

2019/08/02 06:59

投稿

htmldsbiuwdbco
htmldsbiuwdbco

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- ```ここに言語を入力
1
+ ```html
2
2
 
3
3
  <!DOCTYPE html>
4
4
 
@@ -92,6 +92,12 @@
92
92
 
93
93
 
94
94
 
95
+ ```
96
+
97
+
98
+
99
+ ```css
100
+
95
101
  .header{
96
102
 
97
103
  height:90px;

2

コードの修正

2019/08/02 06:56

投稿

htmldsbiuwdbco
htmldsbiuwdbco

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,108 @@
1
1
  ```ここに言語を入力
2
2
 
3
+ <!DOCTYPE html>
4
+
5
+ <html>
6
+
7
+ <head>
8
+
9
+ <meta charset="utf-8">
10
+
11
+ <title>Kenny's webpage</title>
12
+
13
+ <link rel="stylesheet" href="kenny's webpage.css">
14
+
15
+ </head>
16
+
17
+ <body class="all">
18
+
19
+ <div class="header">
20
+
21
+ <div class="title">Kennyのブログ</div>
22
+
23
+ <div class="header-list">
24
+
25
+ <ul>
26
+
27
+ <li>ああああ</li>
28
+
29
+ <li>いいいい</li>
30
+
31
+ </ul>
32
+
33
+ </div>
34
+
35
+ </div>
36
+
37
+
38
+
39
+ <div class="main">
40
+
41
+ <div class="img-contents">
42
+
43
+ <img src="IMG_9876.jpg" alt="">
44
+
45
+ </div>
46
+
47
+ <div class="img-contents">
48
+
49
+ <img src="IMG_1119.jpg" alt="">
50
+
51
+ </div>
52
+
53
+ <div class="img-contents">
54
+
55
+ <img src="IMG_2822.jpg" alt="">
56
+
57
+ </div>
58
+
59
+
60
+
61
+ </div>
62
+
63
+
64
+
65
+
66
+
67
+ <div class="footer">
68
+
69
+ <div class="footer-logo">kenny profile</div>
70
+
71
+ <div class="footer-list">
72
+
73
+ <ul>
74
+
75
+ <li>経歴</li>
76
+
77
+ <li>お問い合わせ</li>
78
+
79
+ </ul>
80
+
81
+ </div>
82
+
83
+
84
+
85
+ </div>
86
+
87
+ </body>
88
+
89
+ </html>
90
+
91
+
92
+
93
+
94
+
95
+ .header{
96
+
97
+ height:90px;
98
+
99
+ background-color: #CCCC33;
100
+
101
+ }
102
+
103
+
104
+
3
- title{
105
+ .title{
4
106
 
5
107
  padding: 20px;
6
108
 
@@ -14,9 +116,37 @@
14
116
 
15
117
 
16
118
 
17
- ``
119
+ li{
120
+
18
-
121
+ list-style: none;
122
+
123
+ }
124
+
125
+
126
+
127
+ .header-list li{
128
+
129
+ padding: 33px 20px;
130
+
131
+ float: left;
132
+
133
+ list-style: none;
134
+
135
+ }
136
+
137
+
138
+
139
+ .main{
140
+
141
+ height: 600px;
142
+
143
+ padding: 100px 80px;
144
+
145
+ }
146
+
147
+
148
+
19
- img-contents img{
149
+ .img-contents img{
20
150
 
21
151
  height: 500px;
22
152
 
@@ -28,9 +158,43 @@
28
158
 
29
159
  }
30
160
 
31
-
32
-
33
- ```
161
+ .footer{
162
+
163
+ height:170px;
164
+
165
+ background-color: #808080;
166
+
167
+ color: white;
168
+
169
+ }
170
+
171
+ .footer-logo{
172
+
173
+ font-size: 30px;
174
+
175
+ padding: 20px;
176
+
177
+ float: left;
178
+
179
+ }
180
+
181
+
182
+
183
+ .footer-list {
184
+
185
+ float: right;
186
+
187
+ }
188
+
189
+ .footer-list li{
190
+
191
+ padding-bottom: 20px;
192
+
193
+ padding: 20px;
194
+
195
+ }
196
+
197
+
34
198
 
35
199
  ```htmlで画像を入れたのですが、header部分のタイトルにかけてるpadding要素に引っ張られて、画像がそのタイトルの下に表示されず、位置が中途半端になってしまいます。
36
200
 

1

初心者アイコンの追加、内容の編集

2019/08/02 06:45

投稿

htmldsbiuwdbco
htmldsbiuwdbco

スコア6

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,4 @@
1
- htmlで画像を入れたのですが、header部分のタイトルにかけてるpadding要素に引っ張られて、画像がそのタイトルの下に表示されず、位置が中途半端になってしまいます。
1
+ ```ここに言語を入
2
-
3
-
4
2
 
5
3
  title{
6
4
 
@@ -16,6 +14,8 @@
16
14
 
17
15
 
18
16
 
17
+ ``
18
+
19
19
  img-contents img{
20
20
 
21
21
  height: 500px;
@@ -30,4 +30,14 @@
30
30
 
31
31
 
32
32
 
33
+ ```
34
+
35
+ ```htmlで画像を入れたのですが、header部分のタイトルにかけてるpadding要素に引っ張られて、画像がそのタイトルの下に表示されず、位置が中途半端になってしまいます。
36
+
37
+
38
+
39
+
40
+
41
+
42
+
33
- これがcssコードです。titleはheaderで、画像はmainと一応二の枠に分けているんですが、header部分にかけているcssコードがmainにも及ぶということはあるのでしょうか。初心者なので教えてください。
43
+ 上のがcssコードです。titleはheaderで、画像はmainと一応二の枠に分けているんですが、header部分にかけているcssコードがmainにも及ぶということはあるのでしょうか。初心者なので教えてください。