1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSSのショートコーディングで得点を競うCSSBattleが面白い!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Windows10のゲームバーで画面録画をしよう!

Windows10のゲームバーで画面録画をしよう!

今回はWindows10に標準で搭載されているゲームバーを使用した画面録画(キャプチャー)の方法について紹介したいと思います。画面を録画すると聞くと専用のソフトをインスト...

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

HTML+CSSだけで実装された走る馬のアニメーションがすごい!

今回紹介するのはHTML+CSSだけで走る馬のアニメーションを実装されているClip Clop Clippity Clop [CSS Only]という作品です。CodePenに実物がアップロードされているので...

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

Bluetooth対応のスマート体重計・体組成計が送料込み1290円の大特価!

現在AmazonではBluetooth対応のスマート体重計・体組成計がなんとクーポンコードを使用することで衝撃の1290円で販売されています。スマート体重計・体組成計はスマホやタ...

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

DearMob iPhoneマネージャーでiTunesなしで簡単に写真を転送する方法!

前回はDearMob iPhoneマネージャーでiPhoneやiPadを簡単にバックアップする方法を紹介しましたが、今回の記事ではiTunesを使用せずにDearMob iPhoneマネージャーで簡単に写...

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERで電子書籍が50%還元されるキャンペーン!9/11までに配信された全作品対象!

BOOK☆WALKERでは、BOOK☆WALKERとニコニコ書籍のスマホアプリの統合1周年を記念した「祝!結婚1周年!感謝のコイン最大50%還元キャンペーン」を実施しています。このキャン...

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

Audio Input FX LEを期間限定でプレゼントするキャンペーンを実施中!

ニコニコ動画などの運営しているドワンゴのニコトクというサービスで、Amazonなどで通常販売価格8000円の音声マルチエフェクトソフトウェア「Audio Input FX LE」が期間限...

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

無料版あり!DVDFab動画ダウンローダーでYouTube動画を簡単ダウンロード!

前回の記事では「DVDFab 11 Blu-rayコピー」についての紹介を行いましたが、今回はDVDFab動画ダウンローダー(DVDFab Downloader)について紹介したいと思います。DVDFab 11 ...

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

電子書籍が50%OFFでさらにコイン50%還元のニコニコカドカワ祭り2019!初回は100%還元!

現在、電子書籍ストアのBOOK☆WALKERでは、2019年9月4日までに配信されたKADOKAWA作品が50%コイン還元、それに加えて15,000点以上が50%OFFで購入できるニコニコカドカワ祭...

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

激安10インチ中華タブレットの「ALLDOCUBE iPlay10 Pro」を使ってみた!

最近10インチで激安タブレットを探していたのですが、10インチタブレットでなんと価格が1万円ちょっとというALLDOCUBE iPlay10 Proをゲットしたのでレビューを書きたいと思...

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

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。