1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. CSSのショートコーディングで得点を競うCSSBattleが面白い!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

2012年から発売しているSONYのネットワークレコーダーの「nasne」がついに近日出荷が終了するとのアナウンスがされました。nasneとプレイステーション、スマートフォンをつ...

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

最大92%オフ!VEGAS全製品を安く入手できるスーパーチャンスキャンペーン!

現在ソースネクストでは、VEGAS全製品を安く入手できるスーパーチャンスのキャンペーンを実施しており、最大で92%オフでVEGASシリーズの製品を販売しています!キャンペー...

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

24時間限定でEaseUS Todo PCTrans Proが無料で手に入るキャンペーン!

EaseUS Softwareは、PC引っ越しソフト(データ移行ソフト)であるEaseUS Todo PCTrans Pro 10.5の最新版の公開にあたって、EaseUS Todo PCTrans Pro 10.5のライセンスコード...

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

PWA(ServiceWorker)で「ホーム画面に追加」を実装する方法!

先日の記事でNetaGearやDuelLinks.netでも「ホーム画面に追加」を実装して、WEBサイトをアプリのようにスマホのホーム画面に簡単に追加可能な「ホーム画面に追加」ボタンを...

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

NetaGearに「ホーム画面に追加」ボタンなど追加するアップデートを行いました!

久しぶりにNetaGearのアップデートを行いました。主な変更点は3つでNetaGearに何度かアクセスしている人に表示される「ホーム画面に追加する」ボタンが表示されて、スマホ...

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazon EchoシリーズがMusic Unlimitedに新規登録すると半額に!無料体験でも可能!

Amazonでは、Amazon Music Unlimitedへの新規登録で対象のAmazon Echoシリーズが50%OFFになるキャンペーンを開催中です!キャンペーン期間は2019年6月11日(火) 00時00分~6...

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

通信できない時だけ表示されるChromeの恐竜ゲームで遊ぼう!

今回は、Google Chromeで通信ができない(オフライン)時にだけ表示されるゲームについて紹介したいと思います。すでに知っている人もいるかも知れませんが、Google Chromeに...

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

遊戯王デュエルリンクスのカード検索サイト「DuelLinks.net」を作りました!

本日2019年6月8日より遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.net(デュエルリンクスどっとねっと)を公開しました!遊戯王デュエルリンクスのゲーム内で...

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

初心者でも簡単に動画編集が可能なMovavi Video Editorを使ってみた!

今回紹介するのは初心者でも誰でも簡単に動画編集が可能なソフトのMovavi Video Edittorを紹介したいと思います。動画編集ソフトもプロ用な多機能なものなど色々なものがあ...

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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。