こんにちは、三輪です。
先日、CSSバトルなるサイトがオープンしたと小耳に挟んだので、体験してみました。
CSSの勉強もさることながら、何かもう名前だけでいろいろと滾ります。格好いい。
CSSバトル（『CSSBattle』）は海外のサイトなので、中は全て英語です。
「バトル」とは言っても、オンラインゲームのようにリアルタイムで誰かと対戦するわけではありませんが、他のユーザーと得点を競い合う形式となっています。
トップページにズラッと表示されているさまざまな画像と全く同じになるようにCSSを書いていきます。記述した文字数が少ないほど、点数が高くなります。
全部英語なので一瞬驚くかもしれませんが、使い方は至ってシンプル。
Git、Twitter、Googleのいずれかのアカウントでログインします。
チャレンジしたい問題のイメージをクリックすると、それぞれのページに移動します。
左端がエディタエリア、真ん中の「OUTPUT」欄が自分のコードのプレビュー、右端の「TARGET」が完成イメージです。このTARGETとそっくり同じになるようにCSSを記述していきます。
記述した内容は、リアルタイムに反映されるので、いちいち読み込みなおす必要はありません。
プレビュー画面下の「Slide & Compare」にチェックが入っている状態で、プレビュー上をドラッグすると、隠れている正解のイメージが表示されるので、照らし合わせながら進めることができます。
必要なカラーコードも、コピー＆ペーストできるよう、ページ内に用意されています。
かかった時間を競い合うわけではないので、落ち着いて取り組めますね。
さて、見た目は同じにできました。結果を見てみるといたしましょう。
エディタエリアの下にある「Submit」を押すと、スコアが表示されます。
100%マッチしてると出ていますね。スコアは670.59。
ちなみに、スコア欄の下にある「Leaderboard」を押すと、問題ごとの上位10名の得点と文字数が見られます。
上位者は、一律に834.56。どうやったらそんな得点出ますのや…。
CSSバトルは、とにかく文字数を少なく書くことが高得点の条件なので、改行やスペースを徹底的に省く、ショートハンドを使う、absoluteよりfixedを使うなど、いろいろ攻略法があるようです。
こういった、ゲーム感覚で楽しみながら勉強にもなるサイトっていうのはありがたい。
英語だと腰が引けることもありますが、純粋にコードを書く→結果表示というわかりやすい流れなので、苦手意識を持たずに挑戦できます。
これからスキルアップしたい方も、既にバリバリ活躍されているコーダーの方も、どちらも楽しめるのではないでしょうか。
気になった方は、ぜひお試しください。
わたしも、全クリア目指して精進します！
