回答編集履歴
2
修正
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティへ設定することで実現出来ます ([動作
|
|
1
|
+
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティへ設定することで実現出来ます ([動作確認用リンク](https://jsfiddle.net/cjzn2Lgr/))。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
または、画像の URL を含む [`url` 関数](https://drafts.csswg.org/css-values/#urls)を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作
|
|
59
|
+
または、画像の URL を含む [`url` 関数](https://drafts.csswg.org/css-values/#urls)を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作確認用リンク](https://jsfiddle.net/sp5rc2w8/))。
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
|
|
107
107
|
|
|
108
108
|
|
|
109
|
-
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作
|
|
109
|
+
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作確認用リンク](https://jsfiddle.net/e0kym7tr/))。しかし、動作確認用リンクを見るとわかるように、**[この機能に現在対応しているブラウザは存在しない](https://caniuse.com/#feat=css3-attr)**ため、現状は上記の二つのどちらかのような方法を選択することになります。
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
|
1
修正
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティ
|
|
1
|
+
JavaScript で行う場合、 `data-*` 属性へ画像の URL を入れておき、それを JavaScript で各要素の `background-image` プロパティへ設定することで実現出来ます ([動作用確認リンク](https://jsfiddle.net/cjzn2Lgr/))。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
|
|
33
33
|
height: 50vh;
|
|
34
34
|
|
|
35
|
+
background-position: center;
|
|
36
|
+
|
|
35
37
|
background-size: 100px 100px;
|
|
36
|
-
|
|
37
|
-
background-position: center;
|
|
38
38
|
|
|
39
39
|
}
|
|
40
40
|
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
または、画像の URL を含む `url` 関数を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/sp5rc2w8/))。
|
|
59
|
+
または、画像の URL を含む [`url` 関数](https://drafts.csswg.org/css-values/#urls)を各要素の `style` 属性へカスタムプロパティとして指定することでも、質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/sp5rc2w8/))。
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
@@ -90,11 +90,11 @@
|
|
|
90
90
|
|
|
91
91
|
height: 50vh;
|
|
92
92
|
|
|
93
|
-
background-
|
|
93
|
+
background-image: var(--background);
|
|
94
94
|
|
|
95
95
|
background-position: center;
|
|
96
96
|
|
|
97
|
-
background-i
|
|
97
|
+
background-size: 100px 100px;
|
|
98
98
|
|
|
99
99
|
}
|
|
100
100
|
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
|
|
107
107
|
|
|
108
108
|
|
|
109
|
-
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/e0kym7tr/))。しかし、動作確認用リンクを見るとわかるように、[この機能に現在対応しているブラウザは存在しない](https://caniuse.com/#feat=css3-attr)ため、現状は上記の二つのどちらかのような方法を選択することになります。
|
|
109
|
+
CSS Values and Units Level 3 によれば、 `attr` 関数を用いることで要素の属性の値を取得することが出来ます。そのため、これを用いるとすれば、以下のように `data-*` 属性と `attr` 関数を使い、より簡潔に質問者さんの実現したいことが行えます ([動作用確認リンク](https://jsfiddle.net/e0kym7tr/))。しかし、動作確認用リンクを見るとわかるように、**[この機能に現在対応しているブラウザは存在しない](https://caniuse.com/#feat=css3-attr)**ため、現状は上記の二つのどちらかのような方法を選択することになります。
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
|
|
@@ -146,11 +146,11 @@
|
|
|
146
146
|
|
|
147
147
|
height: 50vh;
|
|
148
148
|
|
|
149
|
-
background-
|
|
149
|
+
background-image: attr(data-image url);
|
|
150
150
|
|
|
151
151
|
background-position: center;
|
|
152
152
|
|
|
153
|
-
background-i
|
|
153
|
+
background-size: 100px 100px;
|
|
154
154
|
|
|
155
155
|
}
|
|
156
156
|
|