面白いとウワサの「CSSバトル」を試してみた

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 面白いとウワサの「CSSバトル」を試してみた

面白いとウワサの「CSSバトル」を試してみた

面白いとウワサの「CSSバトル」を試してみた

こんにちは、三輪です。

先日、CSSバトルなるサイトがオープンしたと小耳に挟んだので、体験してみました。
CSSの勉強もさることながら、何かもう名前だけでいろいろと滾ります。格好いい。

CSSバトルとは?

CSSBattleトップページ
CSSバトル(『CSSBattle』)は海外のサイトなので、中は全て英語です。
「バトル」とは言っても、オンラインゲームのようにリアルタイムで誰かと対戦するわけではありませんが、他のユーザーと得点を競い合う形式となっています。

トップページにズラッと表示されているさまざまな画像と全く同じになるようにCSSを書いていきます。記述した文字数が少ないほど、点数が高くなります。

さっそくチャレンジ

CSSBattleログイン
全部英語なので一瞬驚くかもしれませんが、使い方は至ってシンプル。
Git、Twitter、Googleのいずれかのアカウントでログインします。
チャレンジしたい問題のイメージをクリックすると、それぞれのページに移動します。

CSSBattle各問題ページ
左端がエディタエリア、真ん中の「OUTPUT」欄が自分のコードのプレビュー、右端の「TARGET」が完成イメージです。このTARGETとそっくり同じになるようにCSSを記述していきます。
記述した内容は、リアルタイムに反映されるので、いちいち読み込みなおす必要はありません。

CSSBattleプレビュー表示
プレビュー画面下の「Slide & Compare」にチェックが入っている状態で、プレビュー上をドラッグすると、隠れている正解のイメージが表示されるので、照らし合わせながら進めることができます。

必要なカラーコードも、コピー&ペーストできるよう、ページ内に用意されています。
かかった時間を競い合うわけではないので、落ち着いて取り組めますね。

気になる結果は?

CSSBattleスコア表示
さて、見た目は同じにできました。結果を見てみるといたしましょう。
エディタエリアの下にある「Submit」を押すと、スコアが表示されます。
100%マッチしてると出ていますね。スコアは670.59。

ちなみに、スコア欄の下にある「Leaderboard」を押すと、問題ごとの上位10名の得点と文字数が見られます。
上位者は、一律に834.56。どうやったらそんな得点出ますのや…。

CSSバトルは、とにかく文字数を少なく書くことが高得点の条件なので、改行やスペースを徹底的に省く、ショートハンドを使う、absoluteよりfixedを使うなど、いろいろ攻略法があるようです。

CSSバトルまとめ

CSSBattle他にもいろいろあります
こういった、ゲーム感覚で楽しみながら勉強にもなるサイトっていうのはありがたい。
英語だと腰が引けることもありますが、純粋にコードを書く→結果表示というわかりやすい流れなので、苦手意識を持たずに挑戦できます。

これからスキルアップしたい方も、既にバリバリ活躍されているコーダーの方も、どちらも楽しめるのではないでしょうか。

気になった方は、ぜひお試しください。
わたしも、全クリア目指して精進します!

前後の記事

お問い合わせはこちらから

見出しアイコン スタッフ募集 Recruit

アウラでは新メンバーを募集しています。詳しくは採用ページをご覧ください。