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

質問編集履歴

1

HTML全文記載いたしました!

2020/12/11 12:41

投稿

mmmin
mmmin

スコア6

title CHANGED
File without changes
body CHANGED
@@ -22,18 +22,324 @@
22
22
  ```
23
23
 
24
24
  ### 該当のソースコード
25
+ こちらがHTML全文となります↓
26
+
27
+ ```<!DOCTYPE html>
28
+ <html lang="ja">
29
+ <head>
30
+ <meta charset="utf-8">
31
+ <title>News</title>
32
+ <meta name="description" content="ブレンドコーヒーとおいしい食材を提供するカフェ">
33
+ <!-- CSS-->
34
+ <link rel="stylesheet" href="https://unpkg.com/ress@3.0.0/dist/ress.min.css"><!-- ress.css-->
35
+ <link rel="stylesheet" href="css/styletairu.css">
36
+ <link rel="preconnect" href="https://fonts.gstatic.com">
37
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap" rel="stylesheet">
38
+ <link rel="icon" type="image/png" href="images/hanabi.png"><!-- ファビコン-->
39
+ <!-- CSS-->
40
+ </head>
41
+
42
+ <body>
43
+ <div id="tairu" class="big-bg">
44
+ <header class="page-header wrapper">
45
+ <h1><a href="#"><img class="logo" src="images/siro-hanabi.png" alt="花"</a></h1>
46
+ <nav>
47
+ <ul>
48
+
49
+ <li><a class="botan" href="#">Top</a></li>
50
+ <li><a class="botan" href="#">About</a></li>
51
+ <li><a class="botan" href="#">Menu</a></li>
52
+ <li><a class="botan" href="#">Mail</a></li>
53
+ <li><a class="botan" href="#">Content</a></li>
54
+ <li><a class="button" href="#">exit...</a></li>
55
+
56
+ </ul>
57
+ </nav>
58
+ </header>
59
+ <div class="wrpper tairu-content">
60
+ <h2 class="page-title">Photo</h2>
61
+ <p>あああああああ</p>
62
+ </div>
63
+ </div><!-- ここまでがヘッダー -->
64
+
65
+
66
+ <footer>
67
+ <div class="wrapper">
68
+ <p><small>&copy; 2019 Kinmokusei.</small></p>
69
+ </div>
70
+
71
+ </footer>
72
+ </body>
73
+
74
+ </html>
75
+ ```
76
+
77
+ こちらがCSS全文となります↓
78
+
79
+ ```@charset "UTF-8";
80
+
81
+ /* 共通部分
82
+ ------------------------------- */
83
+ html {
84
+ font-size: 100%;
85
+
86
+ }
87
+ body{
88
+ font-family: sans-serif;
89
+ line-height: 1.7;
90
+ color: rgb(59, 59, 59);
91
+
92
+ }
93
+ a {
94
+ text-decoration: none;
95
+ }
96
+ img {
97
+ max-width: 100%;
98
+ }
99
+
100
+
101
+
102
+ /* ヘッダー------------------------------- */
103
+
104
+ .logo{
105
+ width: 60px;
106
+ margin-left: 5px;
107
+ margin-top: 20px;
108
+
109
+ }
110
+
111
+ nav ul{
112
+ display: flex;
113
+ list-style: none;
114
+ margin-top: 30px;
115
+ }
116
+
117
+ nav ul li{
118
+ margin-left: 36px;
119
+
120
+
121
+ }
122
+
123
+ .button{
124
+ margin-left: 5px;
125
+ background: rgb(79, 106, 129);
126
+ border: 1px solid #fff;
127
+ color: White;
128
+ padding: 8px 30px;
129
+ margin-bottom: 10px;
130
+ border-radius: 100px;
131
+ transition: all 180ms linear;
132
+ }
133
+
134
+ .button:hover{
135
+ margin-left: 5px;
136
+ background:#fff;
137
+ border: 1px solid rgb(79, 106, 129);
138
+ color: rgb(79, 106, 129);
139
+ padding: 8px 30px;
140
+ margin-bottom: 10px;
141
+ border-radius: 100px;
142
+ transition: all 180ms linear;
143
+
144
+ }
145
+
146
+ .botan{
147
+ font-size: 1rem;
148
+ color: White;
149
+ display: flex;
25
- CSSに記述したものの適用されない部分
150
+ position: relative;
151
+ display: inline-block;
152
+ transition: .3s;
153
+ }
154
+
155
+ .botan::after {
156
+ position: absolute;
157
+ bottom: 0;
158
+ left: 50%;
159
+ content: '';
160
+ width: 0;
26
- ```ここに言語名を入力
161
+ height: 2px;
162
+ background-color: rgb(79, 106, 129);
163
+ transition: .3s;
164
+ transform: translateX(-50%);
165
+ }
166
+
167
+ .botan:hover::after{
168
+ width: 100%;
169
+ }
170
+
171
+ .page-header{
172
+ display: flex;
173
+ justify-content: space-between;
174
+ }
175
+
176
+ .wrapper{
177
+ max-width: 1050px;
178
+ margin: 0 auto;
179
+ padding: 0 4%;
180
+ }
181
+
182
+ /* 大きな背景画像---------------------------------- */
183
+
184
+ .big-bg{
185
+ background-size: cover;
186
+ background-position: center top;
187
+ background-repeat: no-repeat;
188
+ }
189
+
190
+ #news{
191
+ background-image: url(../images/rain.jpg);
192
+ height: 270px;
193
+ margin-bottom: 40px;
194
+ }
195
+
196
+ #news .page-title{
197
+ text-align: center;
198
+
199
+ }
200
+
201
+ /* 本文の装飾---------------------------------- */
202
+
203
+ .home-content{
204
+ text-align: center;
205
+ margin-top: 5%;
206
+ font-family: sans-serif;
207
+ }
208
+
209
+ .home-content p{
210
+ margin-bottom: 60px;
211
+ }
212
+
213
+ .page-title{
214
+ color: White;
215
+ font-size: 5rem;
216
+ text-align: center;
217
+ font-family: sans-serif;
218
+ letter-spacing: 0.3rem;
219
+ letter-spacing: 0.5rem
220
+ }
221
+
222
+ .bbb{
223
+ font-size: 1em;
224
+ background: #fff;
225
+ color: rgb(231, 181, 54);
226
+ border: 1px solid;
227
+ padding: 15px 32px;
228
+ border-radius: 80px;
229
+ transition: 500ms ease;
230
+ }
231
+
232
+ .bbb:hover{
233
+ font-size: 1em;
234
+ background: rgb(231, 181, 54);
235
+ color: #fff;
236
+ border: 1px solid;
237
+ padding: 15px 32px;
238
+ border-radius: 80px;
239
+ transition: 500ms ease;
240
+ }
241
+
242
+
243
+ /* フッター---------------------------------- */
244
+
245
+ footer{
246
+ background: rgb(56, 56, 56);
247
+ text-align: center;
248
+ padding: 12px 0;
249
+ color: White;
250
+ font-size: 0.875rem;
251
+ }
252
+
253
+ /* 記事の部分---------------------------------- */
254
+
255
+ .article{
256
+ width: 70%;
257
+ }
258
+
259
+ .aside{
260
+ width: 22%;
261
+ }
262
+
263
+ .news-content{
264
+ display: flex;
265
+ justify-content: space-between;
266
+ margin-bottom: 50px;
267
+ }
268
+
269
+ .post-info{
270
+ position: relative;
271
+ padding-top: 4px;
272
+ margin-top: 40px;
273
+ }
274
+
275
+ .post-date{
276
+ background: rgb(38, 38, 38);
277
+ color: #fff;
278
+ border-radius: 50%;
279
+ width: 100px;
280
+ height: 100px;
281
+ font-size: 1.625rem;
282
+ text-align: center;
283
+ position: absolute;
284
+ top: 0;
285
+ padding-top: 10px;
286
+
287
+
288
+ }
289
+
290
+ .post-date span{
291
+ font-size: 1rem;
292
+ border-top: 1px rgba(255, 255, 255, .5) solid;
293
+ display: block;
294
+ width: 60%;
295
+ margin: 0 auto;
296
+ }
297
+
298
+ .post-title,
299
+ .post-cat{
300
+ margin-left: 120px;
301
+
302
+ }
303
+ .page-title{
304
+ font-family: YuGothic、"游ゴシック体";
305
+ font-size: 6rem;
306
+ }
307
+
308
+ /* tairuの装飾 */
309
+
310
+ #tairu{
311
+ background-image: url(../images/rain.jpg);
312
+ height: 250px;
313
+ margin-bottom: 10px;
314
+
315
+
316
+ .tairu-content .page-title {
317
+ text-align: center;
318
+ }
319
+
27
320
  p{
28
- display:none;
29
321
  font-size: 9rem;
30
- margin: 0 auto 0 auto;
322
+ text-align: center;
31
323
  color: #fff;
32
- text-align: center;
324
+
33
325
  }
34
326
 
327
+
328
+
329
+
330
+
331
+
332
+
333
+
334
+
335
+
336
+
337
+
338
+
339
+
340
+
341
+ コード
35
342
  ```
36
-
37
343
  ### 試したこと
38
344
  リセットCSSの再設定、display:none;などの打ち消しできそうなもの
39
345