質問編集履歴

1

インデントを修正させて頂きました。宜しくお願い致します。

2018/07/17 09:22

投稿

kenjisinji
kenjisinji

スコア14

test CHANGED
File without changes
test CHANGED
@@ -68,139 +68,149 @@
68
68
 
69
69
  </head>
70
70
 
71
- <body>
71
+ <body>
72
-
73
-
74
-
72
+
75
- <div class="slide-wrapper">
73
+ <div class="slide-wrapper">
76
-
77
-
78
-
74
+
79
- <div id="slide">
75
+ <div id="slide">
80
-
76
+
81
- <ul>
77
+ <ul>
78
+
82
-
79
+ <li>
80
+
81
+ <a href="">
82
+
83
- <li><a href=""><img src="https://pocarisweat.jp/images/home_img_slider_03_pc.jpg" alt="" height="300" class="imagese"/></a>
83
+ <img src="https://pocarisweat.jp/images/home_img_slider_03_pc.jpg" alt="" height="300" class="imagese"/>
84
+
84
-
85
+ </a>
85
-
86
-
86
+
87
- <div class="slide-01">
87
+ <div class="slide-01">
88
-
88
+
89
- <div class="slide-image01">
89
+ <div class="slide-image01">
90
-
90
+
91
- <img src="https://pocarisweat.jp/images/home_btn_main_05.png">
91
+ <img src="https://pocarisweat.jp/images/home_btn_main_05.png">
92
+
93
+ </div>
94
+
95
+ <div class="slide-image02">
96
+
97
+ <img src="https://pocarisweat.jp/images/home_img_slider_05Txt_pc.png">
98
+
99
+ </div>
100
+
101
+ </div>
102
+
103
+ </li>
104
+
105
+ <li>
106
+
107
+ <a href="">
108
+
109
+ <img src="https://pocarisweat.jp/images/home_img_slider_05_pc.jpg" alt="" height="300"class="imagese"/>
110
+
111
+ </a>
112
+
113
+ <div class="slide-02">
114
+
115
+ <img src="https://pocarisweat.jp/images/home_btn_main_03.png">
116
+
117
+ </div>
118
+
119
+ </li>
120
+
121
+ </ul>
122
+
123
+ </div>
124
+
125
+ <div class="slide-banner">
126
+
127
+ <div class="slide-left">
128
+
129
+ <img src="https://pocarisweat.jp/shared/images/header_logo_01.gif">
92
130
 
93
131
  </div>
94
132
 
95
- <div class="slide-image02">
133
+ <div class="slide-right">
134
+
96
-
135
+ <ul>
136
+
137
+ <li>
138
+
97
- <img src="https://pocarisweat.jp/images/home_img_slider_05Txt_pc.png">
139
+ <a href="#">製品情報</a>
140
+
141
+ </li>
142
+
143
+ <li class="pokari">
144
+
145
+ <a href="#">製品情報</a>
146
+
147
+ </li>
148
+
149
+ <li>
150
+
151
+ <a href="#">製品情報</a>
152
+
153
+ </li>
154
+
155
+ <li>
156
+
157
+ <a href="#">製品情報</a>
158
+
159
+ </li>
160
+
161
+ <li>
162
+
163
+ <a href="#">製品情報</a>
164
+
165
+ </li>
166
+
167
+ <li>
168
+
169
+ <a href="#">製品情報</a>
170
+
171
+ </li>
172
+
173
+ <li>
174
+
175
+ <a href="#">製品情報</a>
176
+
177
+ </li>
178
+
179
+ </ul>
98
180
 
99
181
  </div>
100
182
 
183
+ <div class="banner-blue">
184
+
185
+ <div class="banner-text">
186
+
187
+ <p>NEWS</p>
188
+
189
+ <span>2018/07/07</span>
190
+
191
+ <span>新CM 「ポカリスエットダンスFES編」を公開しました</span>
192
+
193
+ </div>
194
+
101
195
  </div>
102
196
 
103
- </li>
104
-
105
-
106
-
107
- <li><a href=""><img src="https://pocarisweat.jp/images/home_img_slider_05_pc.jpg" alt="" height="300"class="imagese"/></a>
108
-
109
-
110
-
111
- <div class="slide-02">
197
+ <div class="center">
112
-
198
+
113
- <img src="https://pocarisweat.jp/images/home_btn_main_03.png">
199
+ <img src="https://pocarisweat.jp/images/home_btn_main_arw_01.png">
114
200
 
115
201
  </div>
116
202
 
117
-
118
-
119
- </li>
120
-
121
- </ul>
122
-
123
- </div>
203
+ </div>
124
-
125
-
126
-
127
-
128
-
129
- <div class="slide-banner">
204
+
130
-
131
- <div class="slide-left">
132
-
133
- <img src="https://pocarisweat.jp/shared/images/header_logo_01.gif">
134
-
135
- </div>
205
+ </div>
136
-
137
-
138
-
206
+
139
- <div class="slide-right">
207
+ <div class="logo-text">
140
-
141
- <ul>
208
+
142
-
143
- <li><a href="#">製品情報</a></li>
209
+ <img src="https://pocarisweat.jp/images/home_ttl_01.gif">
144
-
145
- <li><a href="#">製品情報</a></li>
210
+
146
-
147
- <li><a href="#">製品情報</a></li>
148
-
149
- <li><a href="#">製品情報</a></li>
150
-
151
- <li><a href="#">製品情報</a></li>
152
-
153
- <li><a href="#">製品情報</a></li>
154
-
155
- <li><a href="#">製品情報</a></li>
156
-
157
- </ul>
158
-
159
- </div>
211
+ </div>
160
-
161
-
162
-
163
-
164
-
165
- <div class="banner-blue">
212
+
166
-
167
- <div class="banner-text">
168
-
169
- <p>NEWS</p>
170
-
171
- <span>2018/07/07</span>
172
-
173
- <span>新CM 「ポカリスエットダンスFES編」を公開しました</span>
174
-
175
- </div>
176
-
177
- </div>
178
-
179
-
180
-
181
- <div class="center">
182
-
183
- <img src="https://pocarisweat.jp/images/home_btn_main_arw_01.png">
184
-
185
- </div>
186
-
187
-
188
-
189
- </div>
190
-
191
-
192
-
193
- </div>
194
-
195
- <div class="logo-text">
196
-
197
- <img src="https://pocarisweat.jp/images/home_ttl_01.gif">
198
-
199
- </div>
200
-
201
-
202
-
203
- </body>
213
+ </body>
204
214
 
205
215
  </html>
206
216
 
@@ -212,173 +222,181 @@
212
222
 
213
223
  @charset "UTF-8";
214
224
 
215
-
216
-
217
-
218
-
219
225
  body {
220
226
 
221
- font-size:14px;
222
-
223
- font-family: "Lato", "YuGothic", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
224
-
225
- text-align:center;
226
-
227
- background-color:#f4f4f4;
228
-
229
- color:#2a1e02;
230
-
231
- }
232
-
233
- *{
234
-
235
- margin:0;
236
-
237
- padding:0;
238
-
239
- }
240
-
241
- ul li{
242
-
243
- list-style:none;
244
-
245
- }
227
+ font-size: 14px;
228
+
229
+ font-family: "Lato", "YuGothic", "Yu Gothic", "游ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
230
+
231
+ text-align: center;
232
+
233
+ background-color: #f4f4f4;
234
+
235
+ color: #2a1e02;
236
+
237
+ }
238
+
239
+
240
+
241
+ * {
242
+
243
+ margin: 0;
244
+
245
+ padding: 0;
246
+
247
+ }
248
+
249
+
250
+
251
+ ul li {
252
+
253
+ list-style: none;
254
+
255
+ }
256
+
257
+
246
258
 
247
259
  #slide {
248
260
 
249
- width:100%;
261
+ width: 100%;
250
-
262
+
251
- height:100%;
263
+ height: 100%;
252
-
264
+
253
- margin:0 auto;
265
+ margin: 0 auto;
254
-
266
+
255
- position:relative;
267
+ position: relative;
256
-
268
+
257
- }
269
+ }
270
+
271
+
258
272
 
259
273
  #slide .imagese {
260
274
 
261
- position:absolute;
262
-
263
- width:100%;
264
-
265
- height:100%;
266
-
267
- left:0;
268
-
269
- top:0;
270
-
271
- }
272
-
273
- .slide-01{
274
-
275
- position:absolute;
276
-
277
- top:200px;
278
-
279
- left:100px;
280
-
281
- width:1200px;
282
-
283
-
284
-
285
- }
286
-
287
- .slide-image01{
288
-
289
- width:215px;
290
-
291
- left:200px;
292
-
293
-
294
-
295
- position:relative;
296
-
297
- }
298
-
299
- .slide-image02{
300
-
301
- width:215px;
302
-
303
- position:relative;
304
-
305
- float:right;
306
-
307
- }
308
-
309
- .slide-02{
310
-
311
- position:absolute;
312
-
313
-
314
-
315
- height:300px;
316
-
317
- right:0;
318
-
319
- top:100px;
320
-
321
-
322
-
323
- }
324
-
325
- .slide-02 img{
326
-
327
- position:relative;
328
-
329
- top:100px;
330
-
331
- right:100px;
332
-
333
- width:300px;
334
-
335
- height:80px;
336
-
337
- }
338
-
339
- .slide-banner{
340
-
341
- position:absolute;
342
-
343
- bottom:200px;
344
-
345
- left:0;
346
-
347
- width:100%;
348
-
349
- }
350
-
351
- .slide-banner ul li{
352
-
353
- float:left;
354
-
355
-
356
-
357
- }
358
-
359
- .slide-left{
360
-
361
- float:left;
362
-
363
- width:30%;
364
-
365
-
366
-
367
- padding-top:10px;
368
-
369
- background-color:#015db2;
370
-
371
- }
372
-
373
- .slide-right{
374
-
375
- float:left;
376
-
377
- background-color:white;
378
-
379
- width:70%;
380
-
381
-
275
+ position: relative;
276
+
277
+ width: 100%;
278
+
279
+ height: 100%;
280
+
281
+ left: 0;
282
+
283
+ top: 0;
284
+
285
+ }
286
+
287
+
288
+
289
+ .slide-01 {
290
+
291
+ position: absolute;
292
+
293
+ top: 200px;
294
+
295
+ left: 100px;
296
+
297
+ width: 1200px;
298
+
299
+ }
300
+
301
+
302
+
303
+ .slide-image01 {
304
+
305
+ width: 215px;
306
+
307
+ left: 200px;
308
+
309
+ position: relative;
310
+
311
+ }
312
+
313
+
314
+
315
+ .slide-image02 {
316
+
317
+ width: 215px;
318
+
319
+ position: relative;
320
+
321
+ float: right;
322
+
323
+ }
324
+
325
+
326
+
327
+ .slide-02 {
328
+
329
+ position: absolute;
330
+
331
+ height: 300px;
332
+
333
+ right: 0;
334
+
335
+ top: 100px;
336
+
337
+ }
338
+
339
+
340
+
341
+ .slide-02 img {
342
+
343
+ position: relative;
344
+
345
+ top: 100px;
346
+
347
+ right: 100px;
348
+
349
+ width: 300px;
350
+
351
+ height: 80px;
352
+
353
+ }
354
+
355
+
356
+
357
+ .slide-banner {
358
+
359
+ position: absolute;
360
+
361
+ bottom: 200px;
362
+
363
+ left: 0;
364
+
365
+ width: 100%;
366
+
367
+ }
368
+
369
+
370
+
371
+ .slide-banner ul li {
372
+
373
+ float: left;
374
+
375
+ }
376
+
377
+
378
+
379
+ .slide-left {
380
+
381
+ float: left;
382
+
383
+ width: 30%;
384
+
385
+ padding-top: 10px;
386
+
387
+ background-color: #015db2;
388
+
389
+ }
390
+
391
+
392
+
393
+ .slide-right {
394
+
395
+ float: left;
396
+
397
+ background-color: white;
398
+
399
+ width: 70%;
382
400
 
383
401
  }
384
402
 
@@ -386,59 +404,73 @@
386
404
 
387
405
  .slide-right ul li {
388
406
 
389
- text-indent:-9999px;
390
-
391
- background-image:url('https://pocarisweat.jp/shared/images/header_gnav_pc_01.gif');
392
-
393
- width:120px;
394
-
395
- height:80px;
396
-
397
- }
398
-
399
- .banner-blue p{
400
-
401
- display:inline-block;
402
-
403
- }
404
-
405
- .banner-blue{
406
-
407
- background-color:rgba(5,33,92,0.8);
408
-
409
- height:120px;
410
-
411
- color:white;
412
-
413
- }
414
-
415
- .slide-banner::after{
416
-
417
- clear:both;
418
-
419
- display:block;
420
-
421
- content:'';
422
-
423
- height:0;
424
-
425
-
426
-
427
- }
428
-
429
- .banner-text{
430
-
431
- margin-left:-180px;
432
-
433
-
434
-
435
- }
436
-
437
- .center img{
438
-
439
- padding-top:20px;
440
-
441
-
407
+ text-indent: -9999px;
408
+
409
+ background-image: url('https://pocarisweat.jp/shared/images/header_gnav_pc_01.gif');
410
+
411
+ width: 120px;
412
+
413
+ height: 80px;
414
+
415
+ }
416
+
417
+
418
+
419
+ li.pokari {
420
+
421
+ background-image: url('https://pocarisweat.jp/shared/images/header_gnav_pc_01.gif');
422
+
423
+ background-position: 18% 0;
424
+
425
+ }
426
+
427
+
428
+
429
+ .banner-blue p {
430
+
431
+ display: inline-block;
432
+
433
+ }
434
+
435
+
436
+
437
+ .banner-blue {
438
+
439
+ background-color: rgba(5, 33, 92, 0.8);
440
+
441
+ height: 120px;
442
+
443
+ color: white;
444
+
445
+ }
446
+
447
+
448
+
449
+ .slide-banner::after {
450
+
451
+ clear: both;
452
+
453
+ display: block;
454
+
455
+ content: '';
456
+
457
+ height: 0;
458
+
459
+ }
460
+
461
+
462
+
463
+ .banner-text {
464
+
465
+ margin-left: -180px;
466
+
467
+ }
468
+
469
+
470
+
471
+ .center img {
472
+
473
+ padding-top: 20px;
442
474
 
443
475
  }
444
476