回答編集履歴

1

追記

2020/07/17 09:32

投稿

wing283
wing283

スコア123

test CHANGED
@@ -53,3 +53,295 @@
53
53
  }
54
54
 
55
55
  ```
56
+
57
+
58
+
59
+
60
+
61
+ 追記
62
+
63
+ ```
64
+
65
+
66
+
67
+ <div class="container">
68
+
69
+ <div class="header-left">
70
+
71
+ <a class="logo" href="index.html"><img src="●○○○○●○○○○●○○○○.png"></a>
72
+
73
+ </div>
74
+
75
+ <div class="header-right">
76
+
77
+ <a href="index02.html">●○○○○</a>
78
+
79
+ <a href="index03.html">●○○○○</a>
80
+
81
+ <a href="index04.html">●○○○○</a>
82
+
83
+ <a href="index05.html">●○○○○</a>
84
+
85
+ </div>
86
+
87
+ </div>
88
+
89
+ </header>
90
+
91
+
92
+
93
+ <div class="content-wrapper">
94
+
95
+ <div class="container">
96
+
97
+ <div class="heading">
98
+
99
+ <h2>●○○○○</h2>
100
+
101
+ </div>
102
+
103
+ <div class="contents">
104
+
105
+
106
+
107
+ <div class="content">
108
+
109
+ <div class="content-icon">
110
+
111
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
112
+
113
+ <p>●○○○○</p>
114
+
115
+ </div>
116
+
117
+ <div class="content-icon">
118
+
119
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
120
+
121
+ <p>●○○○○</p>
122
+
123
+ </div>
124
+
125
+ <div class="content-icon">
126
+
127
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
128
+
129
+ <p>●○○○○</p>
130
+
131
+ </div>
132
+
133
+ <div class="content-icon">
134
+
135
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
136
+
137
+ <p>●○○○○</p>
138
+
139
+ </div>
140
+
141
+ <div class="content-icon">
142
+
143
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
144
+
145
+ <p>●○○○○</p>
146
+
147
+ </div>
148
+
149
+ <div class="content-icon">
150
+
151
+ <a href="●○○○○"><img src="●○○○○.jpg"></a>
152
+
153
+ <p>●○○○○</p>
154
+
155
+ </div>
156
+
157
+ </div>
158
+
159
+
160
+
161
+ <footer>
162
+
163
+ <div class="container">
164
+
165
+ <div class="border"></div>
166
+
167
+ <div class="footer-left">
168
+
169
+ <a href="index02.html">●○○○○</a>
170
+
171
+ <a href="index03.html">●○○○○</a>
172
+
173
+ <a href="index04.html">●○○○○</a>
174
+
175
+ <a href="index05.html">●○○○○</a>
176
+
177
+ </div>
178
+
179
+ <span class="copy">©️ ●○○○○ 2020
180
+
181
+ </span>
182
+
183
+ </div>
184
+
185
+ </footer>
186
+
187
+
188
+
189
+ <style>
190
+
191
+ .container {
192
+
193
+ width: 1170px;
194
+
195
+ margin: 0 auto;
196
+
197
+ }
198
+
199
+ .content-wrapper {
200
+
201
+ height: 1550px;
202
+
203
+ }
204
+
205
+ .content-wrapper img {
206
+
207
+ width: 100%;
208
+
209
+ height: 330px;
210
+
211
+ object-fit: cover;
212
+
213
+ }
214
+
215
+ .content-wrapper img:hover {
216
+
217
+ opacity: 0.7;
218
+
219
+ }
220
+
221
+ .content-wrapper p {
222
+
223
+ padding-top: 10px;
224
+
225
+ font-size: 12px;
226
+
227
+ color: #5f5d60;
228
+
229
+ letter-spacing: 3px;
230
+
231
+ }
232
+
233
+ .contents {
234
+
235
+ display: flex;
236
+
237
+ flex-wrap: wrap;
238
+
239
+ }
240
+
241
+ .content {
242
+
243
+ width: 100%;
244
+
245
+ font-size: 0;
246
+
247
+ }
248
+
249
+ .content-icon {
250
+
251
+ width: calc( (100% / 6) - 63px);
252
+
253
+ margin: 0 75px 0 0;
254
+
255
+ display: inline-block;
256
+
257
+ }
258
+
259
+ .content-icon:last-child {
260
+
261
+ margin: 0;
262
+
263
+ }
264
+
265
+ .content-icon {
266
+
267
+ position: relative;
268
+
269
+ }
270
+
271
+ .content-icon a { display: block;}
272
+
273
+ .content-icon p {
274
+
275
+ width: 100%;
276
+
277
+ text-align: center;
278
+
279
+ }
280
+
281
+ footer {
282
+
283
+ height: 150px;
284
+
285
+ padding-bottom: 60px;
286
+
287
+
288
+
289
+ }
290
+
291
+ .border {
292
+
293
+ border-top: 1px solid #E0E0E0;
294
+
295
+ width: 100%;
296
+
297
+
298
+
299
+ }
300
+
301
+ .footer-left a {
302
+
303
+ margin-top: 127px;
304
+
305
+ padding-right: 70px;
306
+
307
+ color: #5f5d60;
308
+
309
+ letter-spacing: 5px;
310
+
311
+ display: block;
312
+
313
+ float: left;
314
+
315
+ transition: all 0.4s;
316
+
317
+ font-size: 14px;
318
+
319
+ }
320
+
321
+ .footer-left a:hover {
322
+
323
+ color: dimgray;
324
+
325
+ opacity: 0.2;
326
+
327
+ }
328
+
329
+ .copy {
330
+
331
+ color: #5f5d60;
332
+
333
+ font-size: 12px;
334
+
335
+ letter-spacing: 3px;
336
+
337
+ float: right;
338
+
339
+ padding-top: 129px;
340
+
341
+
342
+
343
+ }
344
+
345
+ </style>
346
+
347
+ ```