回答編集履歴

5

コード修正

2021/03/30 01:53

投稿

hatena19
hatena19

スコア34073

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 li {
19
+ #slide ul {
22
-
23
- position:absolute;
24
20
 
25
21
  width:100%;
26
22
 
27
- height: 100%;
23
+ padding-top: 17.25%;
28
24
 
29
25
  }
30
26
 

4

コード修正、説明の改善

2021/03/30 01:53

投稿

hatena19
hatena19

スコア34073

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 img {
21
+ #slide ul li {
10
22
 
11
23
  position:absolute;
12
24
 
13
- left:0;
25
+ width:100%;
14
26
 
15
- top:0;
27
+ height: 100%;
16
28
 
17
- width: 100%; /* 追加 */
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
- よく見たら、jQueryの方でもwhdth, height を設定していますね。その部分は削除してください。
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

サンプルリンク修正

2021/03/30 00:24

投稿

hatena19
hatena19

スコア34073

test CHANGED
@@ -80,4 +80,4 @@
80
80
 
81
81
 
82
82
 
83
- [CodePenサンプル](https://codepen.io/hatena19/pen/KKaMLjg?editors=0110)
83
+ [CodePenサンプル](https://codepen.io/hatena19/pen/KKaMLjg)

2

サンプルリンク追加

2021/03/29 08:17

投稿

hatena19
hatena19

スコア34073

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

説明追記

2021/03/29 07:42

投稿

hatena19
hatena19

スコア34073

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
+ ```