1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSSのショートコーディングで得点を競うCSSBattleが面白い!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
ダイソーで売ってるスマホリングスタンドが便利!寝ながらスマホにも最適!

ダイソーで売ってるスマホリングスタンドが便利!寝ながらスマホにも最適!

今回はダイソーで売っているスマホリングスタンド(RING STAND)を紹介したいと思います。スマホリングとはスマートフォンの背面に設置して指を入れることで安定性を高めたり...

LINEのスマートスピーカーClova WAVEとClova Friends miniが86%オフの超激安!

LINEのスマートスピーカーClova WAVEとClova Friends miniが86%オフの超激安!

現在、楽天BOOKSではLINE株式会社が提供するAIスマートスピーカーのClova WAVEとClova Friends mini + Clova Friends Dock(赤外線リモコン)セットが超激安で販売されてい...

792円の超激安スマート体組成計&体重計を買ってみた!

792円の超激安スマート体組成計&体重計を買ってみた!

先日の記事で紹介した超激安で販売されているスマート体重計ですが、実際に購入してみて家に商品が到着したのでレビューを書きたいと思います。スマート体重計というのはBl...

激安特価商品情報サイトの激安ShopDDを作りました!

激安特価商品情報サイトの激安ShopDDを作りました!

激安情報についてはこのブログで度々紹介していたのですが、この度激安・特価情報を専門に取り扱う新ブログの激安ShopDD(Gekiyasu ShopDD)を作成しました。こちらのブログ...

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

現在LEAWO製品が最大50%オフになる新年応援スペシャルキャンペーンを実施しています。キャンペーン期間は2020年2月3日(水)までとなっています。また、SNSでLeawoを応援して...

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

3,4ヶ月前のことになりますが、MOTOROLA Moto Zのバッテリーが死んでバッテリーを交換する手順の記事を書きました。当時は充電ケーブルを抜くと5分もせずに落ちるという状...

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

先日の記事で199円のミニ三脚についてのレビューにおいて、三脚上部の角度などが変更できればもっと自由度が上がって使いやすくなるということを書きました。そこで今回は...

無料でもらえるGoogle Nest miniが届いたのでレビュー!

無料でもらえるGoogle Nest miniが届いたのでレビュー!

先日の記事のGoogle Nest Miniが無料で手に入る!YouTube PremiumとGoogle Play Music会員が対象!でも紹介したGoogle Nest miniが届いたのでレビューを書きたいと思います...

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

Bluetoothでスマホ連動可能なBeyeahスマート体組成計&体重計が792円の超激安で販売中です。スマホとBluetoothで連動させることで、体重や体水分量・BMI・筋肉量・推定骨量...

NetaGear RSS News

Now Loading

Article

CSSのショートコーディングで得点を競うCSSBattleが面白い!

Webデザイン > html+CSS+javascript 
CSSBattle_000.png

今回紹介するのは自分のCSSのスキルを駆使して、いかに短いコードで同じデザインを再現できるかを競うサイトであるCSSBattleを紹介したいと思います。いわゆるプログラミングでいうところのショートコーディングをCSSで行って、ネット上のいろいろな人と得点を競うことができます。

このサイトで自分のCSSのスキルを試してみると非常に面白いです。CSSを使って再現する手法は何でもOKで、どんな手を使ってでも短くできるかが重要となります。ランキング機能もあり、その得点の高さを見ると他の人達のレベルの高さが分かるので、CSSの勉強にもなります。

ショートコーディングとは


Short Cording


ショートコーディングとはプログラミングなどで特定の与えられた環境の中で1byteでもコードを短くすることを目指すことです。ショートコーディングはショートゴルフとも言われています。コードを短くすることだけに特化しているため、仕事などに使うコードとは異なり実用性に欠ける部分もありますが、プログラミングでできることの幅を広げたり、新しい知識を得るための勉強になります。今回のCSSBattleでも遊びながら、いかに短く書けるかというのを試せますし、自分の力量を測るのにも使うことができるため、非常におすすめです。

CSSBattleにチャレンジする方法!


CSSBattle_001.png
1 CSSBattleの右上にある「Sign Up / Sign In」を押してログインします。ログインは「Github」「Twitter」「Google」のOAuthが使えますので、誰でも気軽にログインできます。あとはチャレンジしたいCSSBattleを選択します。



CSSBattle_005.png
2 まずは第一問目からチャレンジしてみました。第一問は上にある「Switch Battle」を押して、#1を選択すると以前のものにもチャレンジできます。右側に表示されている「Target」が見本で、左に表示されている「Output」を左のコードを編集してデザインを一致させていくゲームです。

CSSBattle_009.png
3 説明はエディター内に書かれています。このコメントは削除してから「Submit」する必要があります。

< ! -- OBJECTIVE -->


< ! -- 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. -->



日本語訳
<! - 目的 - >
<! - このエディタでHTML / CSSを作成し、指定されたターゲットイメージをできるだけ少ないコードで複製します。ここに書いたものはそのままレンダリングされます - >

<! - 採点 - >
<! - スコアは、使用した文字数(このコメントにはPが含まれます)と、画像をどの程度近く複製したかに基づいて計算されます。詳細についてはFAQ(https://cssbattle.dev/faqs)を読んでください。 - >

<! - 重要:送信する前にコメントを削除してください - >


CSSBattle_006.png
4 コードを編集して「Submit」を押すとスコアが表示されます。記録が更新されると紙吹雪が舞います。

CSSBattle_007.png
5 さらに短くしてみました。これが私の思いつく最も短いコードでしたが、それでも769.64でした。

CSSBattle_008.png
1 
ランキングも見ることができます。最高点は834点でしたし、一体動やってるのやら・・・。

第2弾


CSSBattle_002.png
第2弾のランキングは終了しているのですが、動かして採点してもらうことはできます。ただ遊ぶだけなら問題ありません。

第3弾


CSSBattle_003.png
ランキングに参加してみたい人は現在進行形で実施されている第3弾はランキングに参加できます。興味のある人は是非チャレンジしてみてはいかがでしょうか?

CSSBattleの解答について




まずは自分でチャレンジしてみて、最高得点に届かなかった場合はこのサイトを見ると、他の人の凄さが分かります。私の考えた方法だとスコア769.64(90charas)が限界で最高得点まで届来ませんでした。そこでCSSBattleの1問目を解説しているサイトがあったので紹介しておきます。このサイトを見て、へーなるほどと感心した反面、これはクレイジーだな思いました。やはりショートコーディングは通常の手法だけでは最短を実現できないので、あらゆる手法を駆使して短くする必要があるんだなと実感しました。本当にいろいろなやり方があるもんですね。

今回の個人的感想




今回紹介したのはCSSのショートコーディングでバトルするCSSBattleの紹介でした!現在は第三弾まで公開されているCSSBattleですが、CSSを使ってWebデザインをやったことがある人なら楽しんで遊ぶことができると思います。同じデザインを再現をすること自体は簡単なのですが、それをどれだけ短く書くことができるかはその人の知識と経験が試されるので、非常に面白いですね。

CSSBattleのサイト自体の作りも良くて、OUTPUT側にはスライドバーで正解との比較が簡単にできるようになっているのは分かりやすくて良いですね。問題も現在は20問用意されているので、かなりやりがいがあります。

興味のある人はぜひCSSBattleにチャレンジしてみてはいかがでしょうか?

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...