最近朝5時起床に慣れてきました。kentaです。
今回はCSSBattleというものを見つけたので試してみたのでその記事を書いていこうと思います！

CSSBattleとは？？

CSSBattleとは文字通りでcssの技術を使って戦うものですが実際に勝負するんじゃなくてhtmlやcssのコードの少なさや正確度をスコアにして競うものらしいです。

サイトに入るとこの様になっていてこの中からやりたいものを選択して挑戦するという形みたいです。

英語ばっかで最初は寒気がしたけど英語弱者でもなんとなくで行けそうです笑

なんか色々見てるけど難しそうなやつばっかで、、
こんなんどうやってやるんだろう、、ってのしかないです。

とりあえずやってみよう！

まぁでもやってみないと始まらないのでなんか自分でもできそうだなーってやつをやってみようと思います。

とりあえず画面に入るとこの様になっていて一番左が正解図になっていて中央のものが今現在のプレビューになっています。

プレビューのところをマウスホバーすると完成画像と比較することができるので細かい調整もしやすくなっています。めっちゃ便利です助かります笑

難点はコードを入力するときにVSコードのように自動変換がないことです。
あれ？？ちゃんと表示するはずなのにうまく表示されんな？？と思ったらまずスペルミスを疑ってみましょう。

時間は関係ないのでじっくり時間をかけてやっていきます！！
頑張れ自分！！！

完成！！

10分ぐらいでなんとかできました、、おつかれ自分！

完成し終わったらコードの下にあるSubmitという青いボタンを押すと結果が表示されます。
さぁ結果を見てみましょう！！

スコアが600.02
入力した文字数が1059文字

ど、どうなんだ、、、？？？笑

ということでLeaderboardを押して見ると他の人のスコアが表示されます。

見てみると1位の人は
スコア783、文字数が82文字でした。

見た瞬間「はい！？」ってなりました笑
なんでそんな少ない文字数でできるんだ、、、

まとめ

今回CSSBattleをやってみていつもやっているcssの技術とは全く違ったのですごい新鮮でした。

けどBEMなどの設計規則に則っているわけではないので業界では推奨されないかもしれないので本当に気分転換にやってみたりしてみるといいのかなぁと感じました！

このあと難しそうなやつに挑戦したけど難しすぎて挫折しました、、
もっと知識を深めれるように頑張りたいですね笑