CSS Battle とは？
CSS Battle とは、お題の画像と全く同じになるようにCSS、HTMLを書いて、世界中のユーザーと得点を競い合うゲームです。
得点は、記述したCSS、HTMLの文字数が少なければ少ないほど、得点が高くなります。
お題はこんな感じです。
ぱっと見、難しそうなものから簡単なものまで、色々なお題があります。
| ドクロ | プレゼント | モンスターボール |
|---|---|---|
 |
 |
 |
遊び方
1. Sign up / Sign in
CSS Battle にアクセスしてSign up / Sign in しましょう。
Gmail GitHubアカウント X(Twitter)アカウント GoogleアカウントでSign up / Sign in ができるので、好きなアカウントでSign up / Sign inをします。
2. 挑戦するお題を決める
2022年 3月24日時点で、お題が100個以上あるので、お好きなお題を選びます。
3. 挑戦する
お題を選択するとこのような画面になります。
- 画面左：エディタ
- ここにCSS、HTMLを記述します。
- stylesheetで分かれてないのでStyleで直書きのようです。
- 画面中央：自分が記述したCSS、HTMLの出力結果
- マウスをホバーすると、見本と見比べることができます。
- その下にはスコアが表示されるようです。
- 画面右：見本
- 色はクリックでコピーできるようです。親切。
4. 自分のスコアを見る
Submitを押すと自分のスコアを見ることができます。
ちなみにスコアは、690.43でした。
全ユーザーの最高得点は、839.08 (54 Chars) でした。
どうしたらそんなに点が取れるのか...
挑戦してみました。
挑戦してみたのは、こちら。
色が多いので、スタイルは個別にする必要がありそうですが、高さを調整すればいけそうです。
1回目のチャレンジ
611.11 (376 chars)
Topの人は、783.08 (82 Chars)。
100以上違う。
<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は異次元すぎる...
<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文字くらい省略できたけど、まだまだ...
<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での不正はできなそうです。)
<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について紹介しました。
CSS Battleは結構奥が深く、幅広いCSS、HTMLの知識が必要なようです。
また、Top10に入るのは大変そうです。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。