CSSのショートコーディングで得点を競うCSSBattleが面白い！
今回紹介するのは自分のCSSのスキルを駆使して、いかに短いコードで同じデザインを再現できるかを競うサイトであるCSSBattleを紹介したいと思います。いわゆるプログラミングでいうところのショートコーディングをCSSで行って、ネット上のいろいろな人と得点を競うことができます。
このサイトで自分のCSSのスキルを試してみると非常に面白いです。CSSを使って再現する手法は何でもOKで、どんな手を使ってでも短くできるかが重要となります。ランキング機能もあり、その得点の高さを見ると他の人達のレベルの高さが分かるので、CSSの勉強にもなります。
ショートコーディングとは
ショートコーディングとはプログラミングなどで特定の与えられた環境の中で1byteでもコードを短くすることを目指すことです。ショートコーディングはショートゴルフとも言われています。コードを短くすることだけに特化しているため、仕事などに使うコードとは異なり実用性に欠ける部分もありますが、プログラミングでできることの幅を広げたり、新しい知識を得るための勉強になります。今回のCSSBattleでも遊びながら、いかに短く書けるかというのを試せますし、自分の力量を測るのにも使うことができるため、非常におすすめです。
CSSBattleにチャレンジする方法！
CSSBattleの右上にある「Sign Up / Sign In」を押してログインします。ログインは「Github」「Twitter」「Google」のOAuthが使えますので、誰でも気軽にログインできます。あとはチャレンジしたいCSSBattleを選択します。
CSSBattle
まずは第一問目からチャレンジしてみました。第一問は上にある「Switch Battle」を押して、#1を選択すると以前のものにもチャレンジできます。右側に表示されている「Target」が見本で、左に表示されている「Output」を左のコードを編集してデザインを一致させていくゲームです。
説明はエディター内に書かれています。このコメントは削除してから「Submit」する必要があります。
< ! -- OBJECTIVE -->
<!-- Write HTML/CSS in this editor and replicate the given target image in the least code possible. What you write here, renders as it is -->
< ! -- SCORING -->
< ! -- The score is calculated based on the number of characters you use (this comment included :P) and how close you replicate the image. Read the FAQS (https://cssbattle.dev/faqs) for more info. -->
<! - - IMPORTANT: remove the comments before submitting -->日本語訳
<！ - 目的 - >
<！ - このエディタでHTML / CSSを作成し、指定されたターゲットイメージをできるだけ少ないコードで複製します。ここに書いたものはそのままレンダリングされます - >
<！ - 採点 - >
<！ - スコアは、使用した文字数（このコメントにはPが含まれます）と、画像をどの程度近く複製したかに基づいて計算されます。詳細についてはFAQ（https://cssbattle.dev/faqs）を読んでください。 - >
<！ - 重要：送信する前にコメントを削除してください - >
コードを編集して「Submit」を押すとスコアが表示されます。記録が更新されると紙吹雪が舞います。
さらに短くしてみました。これが私の思いつく最も短いコードでしたが、それでも769.64でした。
ランキングも見ることができます。最高点は834点でしたし、一体動やってるのやら・・・。
第2弾
第2弾のランキングは終了しているのですが、動かして採点してもらうことはできます。ただ遊ぶだけなら問題ありません。
第3弾
ランキングに参加してみたい人は現在進行形で実施されている第3弾はランキングに参加できます。興味のある人は是非チャレンジしてみてはいかがでしょうか？
CSSBattleの解答について
Getting Started with CSS Battleまずは自分でチャレンジしてみて、最高得点に届かなかった場合はこのサイトを見ると、他の人の凄さが分かります。私の考えた方法だとスコア769.64(90charas)が限界で最高得点まで届来ませんでした。そこでCSSBattleの1問目を解説しているサイトがあったので紹介しておきます。このサイトを見て、へーなるほどと感心した反面、これはクレイジーだな思いました。やはりショートコーディングは通常の手法だけでは最短を実現できないので、あらゆる手法を駆使して短くする必要があるんだなと実感しました。本当にいろいろなやり方があるもんですね。
今回の個人的感想＆まとめ
今回紹介したのはCSSのショートコーディングでバトルするCSSBattleの紹介でした！現在は第三弾まで公開されているCSSBattleですが、CSSを使ってWebデザインをやったことがある人なら楽しんで遊ぶことができると思います。同じデザインを再現をすること自体は簡単なのですが、それをどれだけ短く書くことができるかはその人の知識と経験が試されるので、非常に面白いですね。
CSSBattleのサイト自体の作りも良くて、OUTPUT側にはスライドバーで正解との比較が簡単にできるようになっているのは分かりやすくて良いですね。問題も現在は20問用意されているので、かなりやりがいがあります。
興味のある人はぜひCSSBattleにチャレンジしてみてはいかがでしょうか？