回答編集履歴
5
コード修正
test
CHANGED
|
@@ -8,8 +8,6 @@
|
|
|
8
8
|
|
|
9
9
|
max-width:800px;
|
|
10
10
|
|
|
11
|
-
padding-top: 17.25%; /* 縦横比固定 */
|
|
12
|
-
|
|
13
11
|
margin:0 auto;
|
|
14
12
|
|
|
15
13
|
position:relative;
|
|
@@ -18,13 +16,11 @@
|
|
|
18
16
|
|
|
19
17
|
|
|
20
18
|
|
|
21
|
-
#slide ul
|
|
19
|
+
#slide ul {
|
|
22
|
-
|
|
23
|
-
position:absolute;
|
|
24
20
|
|
|
25
21
|
width:100%;
|
|
26
22
|
|
|
27
|
-
|
|
23
|
+
padding-top: 17.25%;
|
|
28
24
|
|
|
29
25
|
}
|
|
30
26
|
|
4
コード修正、説明の改善
test
CHANGED
|
@@ -1,32 +1,68 @@
|
|
|
1
1
|
画像(img要素)のサイズを指定していないのが原因です。幅を#slideのサイズに合わせたいなのら、下記のように100%に指定すればいいでしょう。縦横比を維持するには`height: auto;`も追加します。
|
|
2
|
-
|
|
3
|
-
|
|
4
2
|
|
|
5
3
|
|
|
6
4
|
|
|
7
5
|
```css
|
|
8
6
|
|
|
7
|
+
#slide {
|
|
8
|
+
|
|
9
|
+
max-width:800px;
|
|
10
|
+
|
|
11
|
+
padding-top: 17.25%; /* 縦横比固定 */
|
|
12
|
+
|
|
13
|
+
margin:0 auto;
|
|
14
|
+
|
|
15
|
+
position:relative;
|
|
16
|
+
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
9
|
-
#slide i
|
|
21
|
+
#slide ul li {
|
|
10
22
|
|
|
11
23
|
position:absolute;
|
|
12
24
|
|
|
13
|
-
|
|
25
|
+
width:100%;
|
|
14
26
|
|
|
15
|
-
t
|
|
27
|
+
height: 100%;
|
|
16
28
|
|
|
17
|
-
|
|
29
|
+
}
|
|
18
30
|
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
#slide img {
|
|
34
|
+
|
|
35
|
+
width: 100%;
|
|
36
|
+
|
|
19
|
-
height: auto;
|
|
37
|
+
height: auto;
|
|
38
|
+
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
@media screen and (max-width: 768px) {
|
|
44
|
+
|
|
45
|
+
#slide {
|
|
46
|
+
|
|
47
|
+
width: 100%;
|
|
48
|
+
|
|
49
|
+
}
|
|
20
50
|
|
|
21
51
|
}
|
|
22
52
|
|
|
23
53
|
```
|
|
24
54
|
|
|
25
|
-
追記
|
|
26
55
|
|
|
27
|
-
---
|
|
28
56
|
|
|
57
|
+
`padding-top: 17.25%;` の数値は画像の縦横比を設定してください。
|
|
58
|
+
|
|
59
|
+
横800px 縦146pxの場合
|
|
60
|
+
|
|
61
|
+
149 / 800 * 100 = 18.25
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
29
|
-
|
|
65
|
+
jQueryの方でもwhdth, height を設定していますが、その部分は削除してください。
|
|
30
66
|
|
|
31
67
|
|
|
32
68
|
|
|
@@ -62,22 +98,6 @@
|
|
|
62
98
|
|
|
63
99
|
```
|
|
64
100
|
|
|
65
|
-
このままだと、li の高さが確保できませんので、CSSに下記を追加してください。
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
```css
|
|
70
|
-
|
|
71
|
-
#slide ul li {
|
|
72
|
-
|
|
73
|
-
width:100%;
|
|
74
|
-
|
|
75
|
-
padding-top: 100%;
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
```
|
|
80
|
-
|
|
81
101
|
|
|
82
102
|
|
|
83
103
|
[CodePenサンプル](https://codepen.io/hatena19/pen/KKaMLjg)
|
3
サンプルリンク修正
test
CHANGED
|
@@ -80,4 +80,4 @@
|
|
|
80
80
|
|
|
81
81
|
|
|
82
82
|
|
|
83
|
-
[CodePenサンプル](https://codepen.io/hatena19/pen/KKaMLjg
|
|
83
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/KKaMLjg)
|
2
サンプルリンク追加
test
CHANGED
|
@@ -77,3 +77,7 @@
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
```
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/KKaMLjg?editors=0110)
|
1
説明追記
test
CHANGED
|
@@ -21,3 +21,59 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
```
|
|
24
|
+
|
|
25
|
+
追記
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
よく見たら、jQueryの方でもwhdth, height を設定していますね。その部分は削除してください。
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
|
|
35
|
+
$(function(){
|
|
36
|
+
|
|
37
|
+
// 設定
|
|
38
|
+
|
|
39
|
+
var $interval = 8000; // 切り替わりの間隔（ミリ秒）
|
|
40
|
+
|
|
41
|
+
var $fade_speed = 3000; // フェード処理の早さ（ミリ秒）
|
|
42
|
+
|
|
43
|
+
$("#slide ul li").css({"position":"relative","overflow":"hidden"});
|
|
44
|
+
|
|
45
|
+
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
|
|
46
|
+
|
|
47
|
+
$("#slide ul li:first").addClass("active").show();
|
|
48
|
+
|
|
49
|
+
setInterval(function(){
|
|
50
|
+
|
|
51
|
+
var $active = $("#slide ul li.active");
|
|
52
|
+
|
|
53
|
+
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
|
|
54
|
+
|
|
55
|
+
$active.fadeOut($fade_speed).removeClass("active");
|
|
56
|
+
|
|
57
|
+
$next.fadeIn($fade_speed).addClass("active");
|
|
58
|
+
|
|
59
|
+
},$interval);
|
|
60
|
+
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
このままだと、li の高さが確保できませんので、CSSに下記を追加してください。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
|
|
71
|
+
#slide ul li {
|
|
72
|
+
|
|
73
|
+
width:100%;
|
|
74
|
+
|
|
75
|
+
padding-top: 100%;
|
|
76
|
+
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
```
|