CSS Battleとは？

CSSBattleとは、お題の画像をHTMLとCSSで再現するゲームです。世界中のユーザーと得点を競い合うことができます。

登録方法

メールアドレス、GitHubアカウント、X(旧Twitter)アカウント、Googleアカウントのいずれかで登録できます。

私はGitHubアカウントを利用しました。

画面構成

左側：ここにコードを記述していきます。
中央：コードの結果が表示されます。
右側：見本と使用されている色のカラーコードが表示されます。

CSS Battleのルール

見本の再現率とコードの短さがスコアに反映されます。コードが短ければ短いほどスコアが高くなります。
※デフォルトで書かれているコメントもカウントされるので削除してください。

まずは簡単そうなものからチャレンジ！

#1. Simply Square

https://cssbattle.dev/play/1
正方形を描くシンプルなものです。コードを修正したら、Submitをクリックします。

見本の再現率とコードの文字数が出てスコア判定されます。
Score:696.67{100%match}
Score:696.67{149 chars}

Leaderboardをクリックするとトップスコアが見れますが、トップのユーザーはなんと54chars 54文字でした…！桁が違います！

猫のイラストにチャレンジ

ここではスコアを気にせず、画像通りに実装できるかやってみます。

#175. Evil Cat

https://cssbattle.dev/play/175

完成したコードはこちらです。

一見すると簡単そうですが、意外と時間がかかってしまいました。positionを使って猫の顔に対して、耳・目・鼻の位置を調整するのと、目の形を再現するのが難しかったです。
ここで使用して便利だなと思ったCSSについて紹介したいと思います。

clip-path

clip-pathは要素を好きな形に切り取って表示するためのCSSプロパティです。

クリップパスの関数

clip-pathは値に使用したい図形の関数を指定できます。今回猫の耳・鼻にはpolygonを、黒目にはellipseを使用しました。

• polygon() : 多角形
• circle() : 円形
• ellipse() : 楕円形
• inset() : 長方形

特にpolygonは、実際の業務でも使う機会がありました。例えば三角アイコンとリンクテキストを横並びにするケースです。

今まで三角アイコンは疑似要素でborderを使用して作ることが多かったのですが、borderは枠線のプロパティであり見た目がわかりにくく、指定するプロパティが増えるため、もやっとしていました。
clip-pathを使う方法だと、色はbackgroundに、サイズはwidthとheightに、形はclip-pathにとプロパティの役割が適切に分かれ、CSSを見ただけでも形が想像しやすくなります。
また、コードも少なくなるので、これからはclip-pathを使用していきたいと思います！

最初は座標の指定が難しく感じましたが、クリップパスのジェネレータがあります。複雑な形を再現する場合は、これで直感的に形を探るのも良いかもしれません。
Clippy — CSS clip-path maker

まとめ

普段の業務とは異なる視点でCSSを楽しみながら学ぶことができました。YouTubeで検索するとCSS Battleを実践しているところを配信している方もいました。
見てすぐに手を動かして、数分で見本通りに再現されるのを見ているだけでも楽しかったです！
私も今後もっと複雑なCSS Battleのお題やCSSアートにもチャレンジしたいと思います！
最後までお読みいただきありがとうございました！

参考

clip-path – CSS: カスケーディングスタイルシート | MDN
polygon() – CSS: カスケーディングスタイルシート | MDN