CSS battleとは?HTML/CSSの技術を競い合う!

今回はHTML/CSSの技術を競い合うCSS battleとは何かについてご紹介いたします。



CSS battleとは?HTML/CSSの技術を競い合う!

CSS battleとは、CSSのプログラミング技術を競い合うサイトのことです。

下記のリンクからCSS battleのサイトに飛べます。
https://cssbattle.dev/

プレイヤーには図形が与えられ、その図形とマッチしたCSSを(できるだけ少ないコードで)コーディングしていきます。

お題の図形とのマッチ率、ソースコードの量の少なさがScoreとなり、Scoreが高いプレイヤーが勝ち、もしくはランキングに載ります。

簡単なお題や難しいお題まで難易度が幅広く、難しいお題では雪だるまやピアノが図形として表示され、CSSで図形を描画するコーディングが求められます。

実際にやってみた感想としては、私は簡単な問題しかやってませんが、基本的に最初の方は検索しながらになるので、CSSの種類が身につきやすいなと感じました。

一方で、他の方の解答が見れなかったり、何回もこなしていくうちに一定の攻略法に落ち着きそうなので、がっつりやる、もしくはポートフォリオを作るためにやるのは少し向いていないかもしれません。

他のサイトで最適解を見たのですが、明らかにHTMLとCSSを圧縮したコードで、人間がこのコードを思いつくのは難しいなと感じました。
CSS battleの答えは?

試しにちょっと触ってみる程度としては非常におすすめです。

終わりに

今回はHTML/CSSの技術を競い合うCSS battleとは何かについてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
よろしければチャンネル登録お願いいたします。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw






HTML/CSS

Posted by ちこ