回答編集履歴
5
説明追加
test
CHANGED
|
@@ -69,3 +69,39 @@
|
|
|
69
69
|
|
|
70
70
|
|
|
71
71
|
[Codepenサンプル](https://codepen.io/hatena19/pen/wvGMomQ)
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
解説
|
|
76
|
+
|
|
77
|
+
---
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
簡単にやっていることを解説します。
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
background-imageのグラデーションは、左半分を黒に、右半分をレインボーカラーにします。
|
|
86
|
+
|
|
87
|
+
background-sizeを200%、background-position-xを0にすることで最初は黒の部分だけ表示されます。
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
background-position-xを100%にすると右半分が表示されるように移動します。
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
クリックで切り替えるのは、チェックボックスにチェックが入ったらbackground-position-xを100%にします。
|
|
96
|
+
|
|
97
|
+
チェックボックス自体は非表示にして、関連付けられたラベルのクリックでチェックか入ります。
|
|
98
|
+
|
|
99
|
+
ラベルの中にテキストを配置してますので、テキストをクリックするとラベルをクリックしたことになります。
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
CSSセレクタでチェックボックスとテキストを関連付けているのは、一般兄弟結合子(~)です。
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
[一般兄弟結合子 - CSS: カスケーディングスタイルシート \| MDN](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)
|
4
コード修正
test
CHANGED
|
@@ -9,8 +9,6 @@
|
|
|
9
9
|
display: block;
|
|
10
10
|
|
|
11
11
|
max-width: 1000px;
|
|
12
|
-
|
|
13
|
-
overflow: hidden;
|
|
14
12
|
|
|
15
13
|
margin: 80px auto 0;
|
|
16
14
|
|
|
@@ -26,15 +24,15 @@
|
|
|
26
24
|
|
|
27
25
|
display: inline-block;
|
|
28
26
|
|
|
29
|
-
|
|
27
|
+
background-image: linear-gradient( 90deg,rgba(0, 0, 0, 1) 50%, rgba(255, 103, 1, 1) 50%,rgba(255, 1, 213 ,1) 57.5%,rgba(1, 141, 255 ,1) 75%,rgba(1, 255, 128 ,1) 87.5%, rgba(128, 0, 128 ,1) 100% );
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
background-size: 200%;
|
|
32
30
|
|
|
33
|
-
background-image: linear-gradient( 90deg,rgba(0, 0, 0, 1) 50%, rgba(255, 103, 1, 1) 50%,rgba(255, 1, 213 ,1) 57.5%,rgba(1, 141, 255 ,1) 75%,rgba(1, 255, 128 ,1) 87.5%,rgb(54, 46, 46) 100% );
|
|
34
|
-
|
|
35
|
-
background-position-x:
|
|
31
|
+
background-position-x: 0;
|
|
36
32
|
|
|
37
33
|
-webkit-background-clip: text;
|
|
34
|
+
|
|
35
|
+
background-clip: text;
|
|
38
36
|
|
|
39
37
|
color: transparent;
|
|
40
38
|
|
|
@@ -44,7 +42,7 @@
|
|
|
44
42
|
|
|
45
43
|
.logo h1:hover {
|
|
46
44
|
|
|
47
|
-
background-position-x:
|
|
45
|
+
background-position-x: 100%;
|
|
48
46
|
|
|
49
47
|
}
|
|
50
48
|
|
3
サンプルリンク追加
test
CHANGED
|
@@ -61,3 +61,13 @@
|
|
|
61
61
|
|
|
62
62
|
|
|
63
63
|
[Codepenサンプル](https://codepen.io/hatena19/pen/bGpEBoQ)
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
クリックで切り替わるサンプルも作成してみました。
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/wvGMomQ)
|
2
コード修正
test
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
background-image: linear-gradient( 90deg,rgba(0, 0, 0, 1) 50%, rgba(255, 103, 1, 1) 50%,rgba(255, 1, 213 ,1) 57.5%,rgba(1, 141, 255 ,1) 75%,rgba(1, 255, 128 ,1) 87.5%,rgb(54, 46, 46) 100% );
|
|
34
34
|
|
|
35
|
-
background-position-x: 3
|
|
35
|
+
background-position-x: 370px;
|
|
36
36
|
|
|
37
37
|
-webkit-background-clip: text;
|
|
38
38
|
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
.logo h1:hover {
|
|
46
46
|
|
|
47
|
-
background-position-x: -
|
|
47
|
+
background-position-x: -370px;
|
|
48
48
|
|
|
49
49
|
}
|
|
50
50
|
|
1
サンプルリンク追加
test
CHANGED
|
@@ -57,3 +57,7 @@
|
|
|
57
57
|
|
|
58
58
|
|
|
59
59
|
画面幅が1000px以下の場合はどのようなレイアウトにしたいのか不明なので無視しています。
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/bGpEBoQ)
|