質問編集履歴
2
複数質問を１つに
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
### 問題
|
|
2
|
-
|
|
2
|
+
`position: sticky`がうまくいかない。
|
|
3
|
-
② rangeの最初と最後に隙間を開けたい。
|
|
4
|
-
|
|
5
|
-
❌ [0 1 2 3 4 5] = 今
|
|
6
|
-
⭕️ [ 0 1 2 3 4 5 ]
|
|
7
|
-
. ↑ ↑
|
|
8
|
-
ここに隙間を開ける （今は隙間がないから、端に行った時に戻しずらい（gif参照））
|
|
9
|
-
あと、途中でボタンが潰れるんですがなんでですかね？（gif参照）（ボタンと軸は画像です）
|
|
10
3
|
|
|
11
4
|
### 現状
|
|
12
5
|
```html
|
|
@@ -84,8 +77,8 @@
|
|
|
84
77
|
/* position: absolute; */
|
|
85
78
|
}
|
|
86
79
|
#filter input[type="range"]::-moz-range-thumb {
|
|
87
|
-
width: 35px;
|
|
88
|
-
|
|
80
|
+
width: 16.739px;
|
|
81
|
+
height: 35px;
|
|
89
82
|
margin-top: -11px;
|
|
90
83
|
background: url('img/botan.svg') no-repeat center center;
|
|
91
84
|
/* position: absolute; */
|
1
//→/**/
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
/* 一覧 */
|
|
45
45
|
.wrap {
|
|
46
46
|
width: 100%;
|
|
47
|
-
height: 1421px; /
|
|
47
|
+
height: 1421px; /* 「listの終わりまで」にしたい */
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
/* 【 スライドバー 】 */
|
|
@@ -57,17 +57,17 @@
|
|
|
57
57
|
width: 196px;
|
|
58
58
|
position: sticky;
|
|
59
59
|
position: -webkit-sticky;
|
|
60
|
-
top: 100px; /
|
|
60
|
+
top: 100px; /* 上下の真ん中に置きたい */
|
|
61
61
|
-webkit-transform:rotate(90deg);
|
|
62
62
|
-moz-transform:rotate(90deg);
|
|
63
63
|
-o-transform:rotate(90deg);
|
|
64
|
-
transform:rotate(90deg); /
|
|
64
|
+
transform:rotate(90deg); /* 90度回転 */
|
|
65
65
|
}
|
|
66
66
|
/* Chrome */
|
|
67
67
|
#filter input[type=range]::-webkit-slider-runnable-track {
|
|
68
68
|
height: 13px;
|
|
69
69
|
background: url('img/jiku.svg');
|
|
70
|
-
/
|
|
70
|
+
/* position: absolute; */
|
|
71
71
|
}
|
|
72
72
|
#filter input[type="range"]::-webkit-slider-thumb {
|
|
73
73
|
-webkit-appearance: none;
|
|
@@ -75,20 +75,20 @@
|
|
|
75
75
|
height: 35px;
|
|
76
76
|
margin-top: -11px;
|
|
77
77
|
background: url('img/botan.svg') no-repeat center center;
|
|
78
|
-
/
|
|
78
|
+
/* position: absolute; */
|
|
79
79
|
}
|
|
80
80
|
/* Firefox */
|
|
81
81
|
#filter input[type=range]::-moz-range-track {
|
|
82
82
|
height: 13px;
|
|
83
83
|
background: url('img/jiku.svg');
|
|
84
|
-
/
|
|
84
|
+
/* position: absolute; */
|
|
85
85
|
}
|
|
86
86
|
#filter input[type="range"]::-moz-range-thumb {
|
|
87
87
|
width: 35px;
|
|
88
88
|
height: 16.739px;
|
|
89
89
|
margin-top: -11px;
|
|
90
90
|
background: url('img/botan.svg') no-repeat center center;
|
|
91
|
-
/
|
|
91
|
+
/* position: absolute; */
|
|
92
92
|
}
|
|
93
93
|
```
|
|
94
94
|
`potision: absolute;`するとスライドバー自体が消えてしまうので、今は一応コメントアウトしてます。
|