1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSSのショートコーディングで得点を競うCSSBattleが面白い!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Fire TV Stickでプライムビデオなどをテレビで見よう!

Fire TV Stickでプライムビデオなどをテレビで見よう!

今回はAmazonプライムビデオをより便利に活用できるFire TV Stickを購入したので、レビューを書きたいと思います。Fire TV Stickを使えばプライムビデオをテレビの大画面で...

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

LINEが使えるスマートスピーカーClova Friendsが驚異の88%オフの1480円!

現在、楽天スーパーセールにてLINEが提供するスマートスピーカーClova Friendsが驚異の88%オフの1480円で販売されています。スマートスピーカー「Clova Friends SALLY」と...

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

12/6よりAmazonサイバーマンデーセールが開始!今年最後の大セール!

本日12月6日9時より、Amazonでは年末の大セールとなるAmazon Cyber Monday(サイバーマンデー)2019を実施されます。開催期間は12月6日(金)9時00分から12月9日(月)23時...

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

日本郵便が無償提供する年賀状ソフト「はがきデザインキット2020」がすごい!

今年も残すところあと30日間を切り、もうそろそろ年賀状を用意して送らないといけない時期ですね。そこで今回は年賀状作成ソフトについて書きたいと思います。ちなみにみな...

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

DearMob iPhoneマネージャーを使ってiTunesなしで動画を転送しよう!

前回までにDearMob iPhoneマネージャーでiTunesを使わないバックアップ方法、写真転送、音楽転送と3本シリーズ記事として書いてきました。iTunesを使用せずにDearMob iPhon...

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでブラックフライデーセールでスマホやタブレットが激安!

Gearbestでは11月26日よりGearbestブラックフライデーセールを実施しています。Gearbestではスマホやタブレット、スマートウォッチなどの製品を数多く取り揃えた中国のネッ...

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

WWTECKSのUSB電熱ベストが72%OFFの1,294円の超激安!

現在AmazonではWWTECKSのUSB充電電熱ベストが通常販売価格4,588円のところ1,294円で購入が可能となっています。超激安の1,294円で購入するには50%OFFクーポンと1000円引き...

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

11月22日からAmazonで日本初開催のブラックフライデーセールがスタート!

本日より海外で人気のブラックフライデーセール(Black Friday)が日本のアマゾンでも初開催されます。ブラックフライデーセールの開催期間は11月22日[金]9:00から11月24日...

パソコンデスクのケーブルをダイソーの100円グッズできれいに整理しよう!

パソコンデスクのケーブルをダイソーの100円グッズできれいに整理しよう!

今回はパソコンデスクの周りのケーブル類をダイソーの100円グッズを使ってきれいにする方法について紹介したいと思います。今年に入ってからPCデスクのFLEXISPOT 電動式昇...

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