CSS Battleとは
Kushagra Gour氏と Kushagra Agarwal氏が作ったCSSコーディングの腕前を競うゲームです。
プレイヤーは指示された図形をできるだけ短いコードで表現します。
一致率が高ければ高いほど、コードの文字数が少なければ少ないほど高得点になります。
もちろん画像の使用は禁止されています。
コーディングが好きな人にはぜひ挑戦してみてほしいです！
どこが難しいの？
同じ図形を作るだけならそこまで難しくないです。
後半になってくると複雑になってきますが、根気があれば必ず表現できます。
ポイントはいかにコードを短くするか。これが難しい。
第一問のベストレコードは56文字の834.56ptです。
私の場合は84文字の779.63ptでした。
どうやったらそんなに短くできるんでしょうね・・・。
ちなみに、点数の感覚ですが以下のような感じです。
- 500点：一致率が低い、不合格。
- 550点：怪しいところはあるけど、及第点。
- 600点：一致率が高い、合格点。
- 650点：一致率が高く、コードが良く圧縮されている、素晴らしい！
- 700点以上：あなたが神か。
やってみた感想
この記事を書いている時点で12問解いて合計点が7755.07ptでした。
15511人中192位です。善戦したと思いたい！
パズルを解く感覚で挑戦できてなかなか楽しかったです。今までコツコツ勉強してきた地味な知識が点数になって現れるので嬉しいですね。現在は12問公開されていますが、後半の方は結構歯ごたえがありました。ただ、実務に役立つかと言われると微妙なところです（笑）
制限時間を決めて点数を競うエクストリームCSSバトルを開催したら面白いかもしれません！
攻略のコツは？
トッププレイヤーには遠く及ばないですが、やってみてアドバイスできることを書き残しておきます。実務でやっちゃだめなやつも紛れてますが、戦場では何でもありです！
ネタバレが嫌な人はプレイしてから続きを読んでくださいね。
【Point 1】 不要なスペースやコメントアウトは削除する。
スペースやコメントアウトも採点の対象になるので注意が必要です。
コロン(:)の後のスペースや、最後のセミコロン(;)なども消すようにすると点数が上がっていきます。
【Point 2】 ショートハンドを活用する。
例えばbackground-color:#ffffff;よりもbackground:#ffffff;の方が短い記述量にできます。
【Point 3】 クラスは極力使わない。
<div class="hoge"></div><style>.hoge{...}</style>
このようにクラスを使うよりも
<div></div><style>div{...}</style>
このようにタグセレクタを使った方が少ない記述量になります。
構造が複雑な場合は、子孫セレクタ( )、子セレクタ(>)、一般兄弟セレクタ(~)、隣接兄弟セレクタ(+)など、様々なセレクタを使って記述量の圧縮に挑戦しましょう。
【Point 4】 単位を省略する。
width,height,top,right,bottom,leftなどは単位を省略しても自動的にpxで計算されます。また、0pxは大抵の場合0で代用が効きます。たった2文字ですが、ちりも積もれば何とやらです。
【Point 5】 position:fixedを活用する。
大抵の場合、position:absoluteよりもposition:fixedの方が少ない記述量で済みます。親要素にposition:relativeを指定したくなりますが、ぐっとこらえてtop,leftやmarginで位置調整しましょう。
【Point 6】 imgタグを活用する
画像の使用は禁止されていますが、imgタグの使用は禁止されていません。<img>タグは<div></div>よりも短い記述量でinline-blockを作ることができます。
ただし、実際にはwidthとheightを指定すると由来不明の線が表示されて減点されるため、次に紹介するborderプロパティを使って図形を描きます。
【Point 7】 borderを活用する。
display: block; background:#000; width: 200; height: 200
このように書くと200pxの正方形になりますが、borderプロパティを使うともっと短く表現できます。
display: inline-block; border: 100px solid #000;
先ほど紹介したimgタグを使う場合は最初からinline-blockなので１行目が不要になります。
【Point 8】 box-shadowを活用する。
divやimgを重ねて表現しないといけない場合、box-shadowが使えないか検討して見ましょう。構造を複雑にするよりも少ない記述量で済むことがあります。（却って長くなることもあります）
box-shadow: x移動量 y移動量 ぼかし量 拡大量 カラーコード (inset);
拡大量やinsetはあまり使ったことがないかもしれません。insetを指定すると内側に影を落とすことができます。
まとめ
地味な知識が役に立つCSS Battle、ぜひ挑戦してみてください！
我こそは！って方はコメント欄で点数を自慢していってOKです！
これがコツだったなっていうのも添えていただけると嬉しいです。
