回答編集履歴
5
説明追加
answer
CHANGED
|
@@ -33,4 +33,22 @@
|
|
|
33
33
|
---
|
|
34
34
|
クリックで切り替わるサンプルも作成してみました。
|
|
35
35
|
|
|
36
|
-
[Codepenサンプル](https://codepen.io/hatena19/pen/wvGMomQ)
|
|
36
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/wvGMomQ)
|
|
37
|
+
|
|
38
|
+
解説
|
|
39
|
+
---
|
|
40
|
+
|
|
41
|
+
簡単にやっていることを解説します。
|
|
42
|
+
|
|
43
|
+
background-imageのグラデーションは、左半分を黒に、右半分をレインボーカラーにします。
|
|
44
|
+
background-sizeを200%、background-position-xを0にすることで最初は黒の部分だけ表示されます。
|
|
45
|
+
|
|
46
|
+
background-position-xを100%にすると右半分が表示されるように移動します。
|
|
47
|
+
|
|
48
|
+
クリックで切り替えるのは、チェックボックスにチェックが入ったらbackground-position-xを100%にします。
|
|
49
|
+
チェックボックス自体は非表示にして、関連付けられたラベルのクリックでチェックか入ります。
|
|
50
|
+
ラベルの中にテキストを配置してますので、テキストをクリックするとラベルをクリックしたことになります。
|
|
51
|
+
|
|
52
|
+
CSSセレクタでチェックボックスとテキストを関連付けているのは、一般兄弟結合子(~)です。
|
|
53
|
+
|
|
54
|
+
[一般兄弟結合子 - CSS: カスケーディングスタイルシート \| MDN](https://developer.mozilla.org/ja/docs/Web/CSS/General_sibling_combinator)
|
4
コード修正
answer
CHANGED
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
.logo {
|
|
5
5
|
display: block;
|
|
6
6
|
max-width: 1000px;
|
|
7
|
-
overflow: hidden;
|
|
8
7
|
margin: 80px auto 0;
|
|
9
8
|
text-align: center;
|
|
10
9
|
}
|
|
@@ -12,16 +11,16 @@
|
|
|
12
11
|
font-size: 200px;
|
|
13
12
|
font-family: "Nico Moji";
|
|
14
13
|
display: inline-block;
|
|
15
|
-
width: 1500px;
|
|
16
|
-
margin-left: -250px;
|
|
17
|
-
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%,
|
|
14
|
+
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% );
|
|
15
|
+
background-size: 200%;
|
|
18
|
-
background-position-x:
|
|
16
|
+
background-position-x: 0;
|
|
19
17
|
-webkit-background-clip: text;
|
|
18
|
+
background-clip: text;
|
|
20
19
|
color: transparent;
|
|
21
20
|
transition: background-position-x 1s;
|
|
22
21
|
}
|
|
23
22
|
.logo h1:hover {
|
|
24
|
-
background-position-x:
|
|
23
|
+
background-position-x: 100%;
|
|
25
24
|
}
|
|
26
25
|
```
|
|
27
26
|
|
3
サンプルリンク追加
answer
CHANGED
|
@@ -29,4 +29,9 @@
|
|
|
29
29
|
|
|
30
30
|
画面幅が1000px以下の場合はどのようなレイアウトにしたいのか不明なので無視しています。
|
|
31
31
|
|
|
32
|
-
[Codepenサンプル](https://codepen.io/hatena19/pen/bGpEBoQ)
|
|
32
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/bGpEBoQ)
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
クリックで切り替わるサンプルも作成してみました。
|
|
36
|
+
|
|
37
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/wvGMomQ)
|
2
コード修正
answer
CHANGED
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
width: 1500px;
|
|
16
16
|
margin-left: -250px;
|
|
17
17
|
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% );
|
|
18
|
-
background-position-x:
|
|
18
|
+
background-position-x: 370px;
|
|
19
19
|
-webkit-background-clip: text;
|
|
20
20
|
color: transparent;
|
|
21
21
|
transition: background-position-x 1s;
|
|
22
22
|
}
|
|
23
23
|
.logo h1:hover {
|
|
24
|
-
background-position-x: -
|
|
24
|
+
background-position-x: -370px;
|
|
25
25
|
}
|
|
26
26
|
```
|
|
27
27
|
|
1
サンプルリンク追加
answer
CHANGED
|
@@ -27,4 +27,6 @@
|
|
|
27
27
|
|
|
28
28
|
クリックで切り替えるなら、チェックボックスを使う方法か（HTML CSS のみで可能）、JavaScriptを使うことになりますね。
|
|
29
29
|
|
|
30
|
-
画面幅が1000px以下の場合はどのようなレイアウトにしたいのか不明なので無視しています。
|
|
30
|
+
画面幅が1000px以下の場合はどのようなレイアウトにしたいのか不明なので無視しています。
|
|
31
|
+
|
|
32
|
+
[Codepenサンプル](https://codepen.io/hatena19/pen/bGpEBoQ)
|