「CSSバトル」が面白い！自分のCSSスキルを活用してハイスコアを目指そう！【CSSのお勉強】

全て英語なのですが、『CSSBattle』(CSSバトル)というサイトが先日オープンしました。
その名の通り、CSSを使用して他のユーザーとバトルを行う内容になっています。

少し遊んでみて面白かったので、今回はCSSバトルの遊び方をご紹介したいと思います。
お時間あるデザイナー、コーダーの方はぜひ遊んでみてはいかがでしょうか。

CSSバトルの遊び方は？

ゲームの目的は与えられたターゲット画像を、可能な限り少ないコード(HTMLとCSS)で表現するといったシンプルな内容になっています。

画像の内容を100%表現しつつ、少ないコードで書くことによってスコアが表示され、他のユーザーと競い合うといったイメージです。

2019年4月現在は12つのターゲットが用意されており、ユーザーと競い合うポイントは12つの総合ランキングと、各1つ1つのターゲットのランキングの2つあります。

利用方法は至って簡単。

まずサイトTOPに遷移すると、GitHubアカウント、Twitterアカウント、Googleアカウントでのログインが求められるので、好きなアカウントでログインをします。

そして画面上にターゲットが12つ表示されているので好きなターゲットを選択します。

次の画面に左にコードを書くエディタ、中央にはエディタに書いた内容が出力画面、右には目標とするターゲット画像が表示されます。

後はもう簡単。
エディタにどんどん目標となるターゲットの画像に合わせたコードを書いていくだけです。

完成したら画面下部の「submit」を押すと、自身のスコアが表示されます。

筆者もコース1をやってみましたが、結果は[601.49ポイント]でした・・・。
現在コース1の最高得点は834.56ポイントのようです。

うーん、どうやったらそんなに行くのか・・・。

こういった楽しみながら勉強できる仕組というのは良いですね。

ぜひ気になった方は一度一度お試しください。