回答編集履歴
3
修正
answer
CHANGED
|
File without changes
|
2
修正
answer
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
単純に簡潔にすることを考えれば、要素や擬似要素は使わずに [`background` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background)を使用し、以下のように行えると思います ([動作確認用リンク](https://jsfiddle.net/wq9je0u3/))。質問文の CSS を minify したコードのサイズが 846 バイト、
|
|
1
|
+
単純に簡潔にすることを考えれば、要素や擬似要素は使わずに [`background` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background)を使用し、以下のように行えると思います ([動作確認用リンク](https://jsfiddle.net/wq9je0u3/))。質問文の CSS を minify したコードのサイズが 846 バイト、以下に記載している CSS を minify したコードのサイズが 511 バイトとなっています。
|
|
2
2
|
```CSS
|
|
3
3
|
.button {
|
|
4
4
|
--w: calc(100% - 20px);
|
1
修正
answer
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
単純に簡潔にすることを考えれば、要素や擬似要素は使わずに [`background` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background)を使用し、以下のように行えると思います ([動作確認用リンク](https://jsfiddle.net/
|
|
1
|
+
単純に簡潔にすることを考えれば、要素や擬似要素は使わずに [`background` プロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/background)を使用し、以下のように行えると思います ([動作確認用リンク](https://jsfiddle.net/wq9je0u3/))。質問文の CSS を minify したコードのサイズが 846 バイト、質問文の CSS を編集し minify したコードのサイズが 511 バイトとなっています。
|
|
2
2
|
```CSS
|
|
3
3
|
.button {
|
|
4
4
|
--w: calc(100% - 20px);
|
|
5
5
|
--g: #555 20px, transparent 20px var(--w), #555 var(--w);
|
|
6
6
|
box-sizing: border-box;
|
|
7
7
|
display: flex;
|
|
8
|
+
position: relative;
|
|
8
9
|
flex-wrap: wrap;
|
|
9
|
-
position: relative;
|
|
10
10
|
width: 200px;
|
|
11
11
|
margin: 100px;
|
|
12
12
|
padding: 25px;
|