【CSS Battle】世界中のユーザーとCSS・HTMLの力を競い合える！？

## CSS Battle とは？
[CSS Battle](https://cssbattle.dev/) とは、お題の画像と全く同じになるようにCSS、HTMLを書いて、世界中のユーザーと得点を競い合うゲームです。

得点は、**記述したCSS、HTMLの文字数が少なければ少ないほど、得点が高くなります**。

https://cssbattle.dev/

お題はこんな感じです。 
ぱっと見、難しそうなものから簡単なものまで、色々なお題があります。

ドクロ|プレゼント|モンスターボール
--|--|--
![スクリーンショット 2022-03-24 20.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2443f024-5756-8fcd-0db6-1d41d89a9779.png)|![スクリーンショット 2022-03-24 20.58.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6600cbf6-6a33-9de3-70c9-2443be6d1239.png)|![スクリーンショット 2022-03-24 20.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a95410a8-4712-7296-3177-1ddfe796f334.png)

## 遊び方
### 1. Sign up / Sign in 
[CSS Battle](https://cssbattle.dev/) にアクセスしてSign up / Sign in しましょう。
`Gmail` `GitHubアカウント` `X(Twitter)アカウント` `Googleアカウント`でSign up / Sign in ができるので、好きなアカウントでSign up / Sign inをします。

![スクリーンショット 2022-03-24 21.03.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0ab403d1-53fc-0c2c-1959-3fe8b22c61fd.png)

### 2. 挑戦するお題を決める
2022年 3月24日時点で、お題が100個以上あるので、お好きなお題を選びます。
![スクリーンショット 2022-03-24 21.11.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/86087147-0f70-d4a9-54c2-d6345e99ef18.png)


### 3. 挑戦する
お題を選択するとこのような画面になります。
![スクリーンショット 2022-03-24 21.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/90463e33-b8bd-ba66-44e3-7067112667f9.png)

+ 画面左：エディタ
    + ここにCSS、HTMLを記述します。
    + stylesheetで分かれてないのでStyleで直書きのようです。
+ 画面中央：自分が記述したCSS、HTMLの出力結果
    + マウスをホバーすると、見本と見比べることができます。
    + その下にはスコアが表示されるようです。
+ 画面右：見本
    + 色はクリックでコピーできるようです。親切。

### 4. 自分のスコアを見る
Submitを押すと自分のスコアを見ることができます。
ちなみにスコアは、690.43でした。 
全ユーザーの最高得点は、839.08 (54 Chars) でした。
どうしたらそんなに点が取れるのか...

![スクリーンショット 2022-03-24 21.24.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7ceb92e8-a204-1a80-aad8-3e62019d7889.png)


## 挑戦してみました。
挑戦してみたのは、こちら。
色が多いので、スタイルは個別にする必要がありそうですが、高さを調整すればいけそうです。
![スクリーンショット 2022-03-24 21.29.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1079eff9-cf6d-8347-19ea-459a3821b7fd.png)

### 1回目のチャレンジ
611.11 (376 chars)

Topの人は、**783.08 (82 Chars)**。
100以上違う。

```HTML
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

<style>
  body {
    background: #62306D;
    margin: 0;
  }
  .first {
    width: 100%;
    height: 50px;
    background: #F7EC7D;
  }
  .second {
    width: 100%;
    height: 50px;
    background: #E38F66;
  }
  .third {
    width: 100%;
    height: 100px;
    background: #AA445F;
  }
</style>
```

### 2回目のチャレンジ
+ classをidにすると、3文字省略できるのでidに変更。
+ id名も1文字にして、文字数省略。
+ １行に全てを書いて、詰めれる余白を詰めて、文字数省略。
    + 余白も1文字でカウントされているみたい。

**結果**
639.47 (243 chars) 。 
82 Charsは異次元すぎる...

```HTML
<div id="a"></div><div id="b"></div><div id="c"></div><style>body{background:#62306D;margin:0;}#a{width: 100%;height:50px;background:#F7EC7D;}#b{width:100%;height:50px;background:#E38F66;}#c{width:100%;height:100px;background:#AA445F;}</style>
```

### 3回目のチャレンジ
+ `<div>`より`<p>`を使うと文字数の節約になり、`<p/>`とすることで、閉じタグを省略できる。
+ Borderをうまく使うことで、`<p/>`一個でどうにかした。

**結果**
696.67 (149 chars)
100文字くらい省略できたけど、まだまだ...

```HTML
<p/><style>body{background:#62306D;margin:0;}p{height:50px;border-top:50px solid#F7EC7D;background:#E38F66;border-bottom:100px solid#AA445F;}</style>
```

### 4回目のチャレンジ
+ HTMLを記入しないで、BodyとHTMLタグにスタイルを当てた。
+ Borderを使って、BodyとHTMLタグだけで表現した

**結果**
701.39 (144 chars)
700を超えたのでここまで。

もっと短くできそうだなという人は、コメントしてください。
(画像・SVGでの不正はできなそうです。)

```html
<style>html{border-top:50px solid#F7EC7D;background:#AA445F;border-bottom:100px solid#62306D}body{margin:0;border-top:50px solid#E38F66}</style>
```


## まとめ

今回は、[CSS Battle](https://cssbattle.dev/)について紹介しました。

[CSS Battle](https://cssbattle.dev/)は結構奥が深く、幅広いCSS、HTMLの知識が必要なようです。

また、Top10に入るのは大変そうです。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510