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