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

質問編集履歴

2

HTML5 CSS を全文載せました。

2019/01/05 13:22

投稿

PigPeach88
PigPeach88

スコア13

title CHANGED
File without changes
body CHANGED
@@ -5,39 +5,255 @@
5
5
  ####③文字を少し上に上げたい。
6
6
 
7
7
  ### 発生している問題・エラーメッセージ
8
- ①と②
9
- headerの背景画像は
10
8
 
11
- ```CSS
12
-
13
- header{background: url(../image/top.png) no-repeat 10% ;
14
- }
15
- ```
16
-
17
-
18
9
  ```HTML
10
+ <!doctype html>
11
+ <html>
12
+ <head>
13
+ <meta charset="UTF-8">
14
+ <title>フィレンチェ</title>
15
+ <link href="css/reset.css" rel="stylesheet" type="text/css">
16
+ <link href="css/firence.css" rel="stylesheet" type="text/css">
17
+ <link rel="stylesheet" href="firence.css" type="text/css">
18
+ <link href="css/aspect.css" rel="stylesheet" type="text/css">
19
+ <link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
20
+ </head>
19
21
 
22
+ <body>
20
- <header>
23
+ <header>
21
24
  <h1>フィレンチェ</h1>
22
25
  <br><h2>食と美の街</h2>
23
-
24
-      <section class="about">
26
+ <section class="about">
25
27
   
26
-   <h3>高2の秋のイタリア
28
+ <h3>高2の秋のイタリア
27
- <br>またこの赤レンガの街に
29
+ <br>またこの赤レンガの街に
28
- <br>ゆっくりと訪れてみたい
30
+ <br>ゆっくりと訪れてみたい</h3>
29
-              </h3>
30
- </section>
31
+ </section>
31
32
 
32
33
  </header>
34
+
35
+ <section class="venchi">
36
+ <h3 class=front>Venchi(ヴェンチ)</h3>
37
+ <img src="image/venchi.png" class="shop" alt="ヴェンチ">
38
+ <h3><p class="gelato"> 
39
+ フィレンチェのイタ
40
+ <br>リア人も認める高級ジ
41
+ <br>ェラート屋さん。レジ
42
+ <br>の壁はチョコレートの
43
+ <br>ような鮮やかで滑らか
44
+ <br>な茶色そこに長い滝
45
+ <br>が流れ、まるでチョコ
46
+ <br>レートの滝のよう。
47
+ </p>
48
+ </h3>
49
+ </section>
50
+
51
+ <section class="chocolate">
52
+ <img src="image/チョコ.png" class="ice" alt="チョコ">
53
+
54
+ <h3>
55
+ <p class="doble"> 
56
+ Venchiで買ったのはこちら。
57
+ <br>同じ味にみえますが味はダブル
58
+ <br>苦めのチョコと甘めのチョコ。
59
+ </p>
60
+ </h3>
61
+ </section>
62
+
63
+ <section class="panino">
64
+
65
+ <h3>パニーニ
66
+
67
+ <img src="image/パニーニ.png" class="pan" alt="パニーニ">
68
+ <p>とあるバール(軽食屋)で買った。<br>
69
+ これで5ユーロ(当時のレートで<br>600円)でした。</p></h3>
70
+
71
+ </section>
72
+
73
+ <section class="painting">
74
+
75
+ <h3>ウォールペインティング
76
+ <br><p> フィレンチェのドゥオーモ付属<br>
77
+ 美術館にダンテ・アリギエーリの<br>
78
+ デスマスクがあります。これから<br>
79
+ 着想を得た教養の上でのウォール<br>
80
+ ペインティングと考えられます。</p></h3>
81
+
82
+ <img src="image/落書き.png" class="draw" alt="落書き">
83
+ <img src="image/ダンテ.png" class="mask" alt="ダンテ">
84
+
85
+ </section>
86
+
87
+ <section class="pinokio">
88
+
89
+ <p>
90
+ <img src="image/キノピオ.png" alt="ピノキオ">
91
+
92
+ <h3>ピノキオの街
93
+
94
+ <br><br>
95
+ 木でできたピノキオ
96
+ <br>
97
+ のグッズを売るお店が
98
+ <br>いくつもあります。こ
99
+ <br>の木でできた三輪車の
100
+ <br>艶がいい!イタリアで
101
+ <br>一番好きな写真です。
102
+ </h3></p>
103
+
104
+
105
+ </section>
106
+
107
+
108
+ <section class="sinyoria">
109
+ <p class="palco">
110
+ <h3>シニョーリア広場
111
+ <img src="image/亀.png" alt="亀">
112
+ <img src="image/グリコ.png" alt="グリコ">
113
+ <br>これは期間限定の展示です。元々ここにはダビデ像(画像右端)な
114
+ <br>ど、石膏像がそこら中にあります。日本では知られていない石膏が
115
+ <br>いっぱいあります。
116
+ <img src="image/石膏像.png" class="big" alt="石膏像">
117
+ <img src="image/反り返り.png" alt="反り返り">
118
+ <img src="image/お告げ.png" class="telling" alt="お告げ">
119
+ <img src="image/付属美術館.png" alt="付属美術館">
120
+ </P>
121
+ </h3>
122
+ </section>
123
+
124
+ <footer> <p>名前</p>
125
+ </footer>
126
+
127
+ </body>
128
+
129
+ </html>
33
130
  ```
34
131
 
35
132
  ```CSS
133
+ @charset "UTF-8";
134
+ /* CSS Document */
135
+ .wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
136
+
36
137
 
138
+
139
+
140
+ html{
141
+
142
+ }
143
+
144
+
145
+ body{
146
+ background: #8eb4d9 url(../image/heven.png) 85% ;
147
+ background-repeat: repeat-y;
148
+ margin:0;
149
+ width: 100%;
150
+
151
+
152
+ font-family: Sawarabi Mincho ;
153
+ line-height: 64px;
154
+ padding: 0;
155
+ font-size: 16px;
156
+ color: #ffffff;
157
+
158
+
159
+ }
160
+ h1{
161
+ text-align: right;
162
+ font-size: 120px;
163
+ padding: 300px 0 0 500px ;
164
+ }
165
+ header{background: url(../image/top.png) no-repeat 10% ;
166
+ }
167
+ footer{
168
+ width: 100%;
169
+ hight: 8561px;
170
+ margin: auto;
171
+ background-coior:#ffffff;
172
+ text-align: center;
173
+ }
174
+
175
+
176
+
177
+ h2{
178
+ text-align: right;
179
+ font-size: 72px;
180
+ }
181
+ h3{ /*margin-top: 145px;*/
182
+ font-size: 32px;
183
+ /*margin-align:left;*/
184
+ }
185
+
37
186
  .about{
38
187
  text-align: right;
39
188
  margin-bottom:358px;
40
189
  }
190
+
191
+ .section{
192
+ font-size: 48px;
193
+ }
194
+
195
+ .shop{
196
+ width:712px;
197
+ height: 712px;
198
+ margin-bottom: 1700;
199
+ margin-left: 900;
200
+ margin-top: 120px;
201
+ }
202
+
203
+
204
+
205
+ .gelato{
206
+ margin-bottom: 900px;
207
+ margin-left: 950px;
208
+ /*margin-bottom: 114px;*/
209
+ }
210
+
211
+ .ice{
212
+ margin-left: 600px;
213
+
214
+ }
215
+
216
+ .doble{
217
+ margin-top: 115px;
218
+ }
219
+
220
+ .pan{
221
+ margin-right: 12.5%;
222
+ margin-left: 12.5%;
223
+ margin-left: 435px;
224
+
225
+ }
226
+
227
+ .painting{
228
+ margin-bottom: 94px;
229
+
230
+ }
231
+ .draw{
232
+ margin-right: 12.5%;
233
+ margin-left: 12.5%;
234
+ position: relative;
235
+
236
+ }
237
+ .mask{
238
+ margin-right: 12.5%;
239
+ margin-left: 12.5%;
240
+ position: absolute;
241
+
242
+ }
243
+ .pinokio{
244
+ margin-bottom: 130px;
245
+ }
246
+ .sinyoria{
247
+ margin-bottom: 151px;
248
+ }
249
+
250
+ .big{
251
+ width:100%;
252
+ margin-right: 12.5%;
253
+
254
+
255
+
256
+ }
41
257
  ```
42
258
 
43
259
  ![](019cbb6b0becfb30e8c296192a4b8a41.png)

1

コピーし忘れたheader を追加しました。

2019/01/05 13:22

投稿

PigPeach88
PigPeach88

スコア13

title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  ```CSS
12
12
 
13
- background: url(../image/top.png) no-repeat 10% ;
13
+ header{background: url(../image/top.png) no-repeat 10% ;
14
14
  }
15
15
  ```
16
16