てぃぐれのプログラマwiki

ワクワクに従う

CSSBattleが面白い

今日はCSSBattleというWebサービスを紹介したい。与えられたCSSのデザインを実際にコーディングするというサイト。

 

ユーザーが問題をだし、ユーザーが解いていく(マリオメーカー方式)。期間内でその順位を決めるようだ。マッチング率とコードレングスが評価基準になるようだ。

見てみると、自分が600文字使っているのを、90文字くらいで猛者たちは解いている。そのコード見たい!!

 

プログラミングではAtcoderやpaizaなどでいわゆる競技プログラミングのサイトなるものがあるが、CSSでのサービスがあるのは知らなかった。

 

発見の経緯は、youtubeにてCSS Battleやってみたら衝撃の結果に... #プログラミング・タイムアタックを見たのがきっかけだ。

 

私は、Webエンジニアではなく、少しはhtmlとCSSは勉強したことがあるが、全然使わないのでいつも忘却してしまう。でも、面白そうなので、やってみた。

左が私が書いたもの。右がゴール。

CSSBattle

CSSBattle

100%マッチということだった。

比較も簡単にできてかなり使いやすく、とっつきやすい。ステージ1からやっていくとそれなりにCSSの勉強にはなりそうだ。

それなりというのは、シェイプの作成の勉強にはなるが、サイトのデザインとしては、方向が違うのでそれはそれという感じもする。しかし、何より楽しいのがよい。

筆者みたいな、業務でCSS書いてない人は、模範解答があるとより良いとも思う。