N.Y.C. Tech Library

ホームページの制作テクニックや日常のハックを綴る

WEB制作 レポート

CSS Battleをやってみた!

投稿日:2019年4月21日 更新日:

cssBattle

CSS Battleとは

Kushagra Gour氏と Kushagra Agarwal氏が作ったCSSコーディングの腕前を競うゲームです。
プレイヤーは指示された図形をできるだけ短いコードで表現します。
一致率が高ければ高いほど、コードの文字数が少なければ少ないほど高得点になります。
もちろん画像の使用は禁止されています。

コーディングが好きな人にはぜひ挑戦してみてほしいです!

CSS Battle

 

どこが難しいの?

同じ図形を作るだけならそこまで難しくないです。
後半になってくると複雑になってきますが、根気があれば必ず表現できます。
ポイントはいかにコードを短くするか。これが難しい。

第一問のベストレコードは56文字の834.56ptです。
私の場合は84文字の779.63ptでした。
どうやったらそんなに短くできるんでしょうね・・・。

ちなみに、点数の感覚ですが以下のような感じです。

  • 500点:一致率が低い、不合格。
  • 550点:怪しいところはあるけど、及第点。
  • 600点:一致率が高い、合格点。
  • 650点:一致率が高く、コードが良く圧縮されている、素晴らしい!
  • 700点以上:あなたが神か。

やってみた感想

この記事を書いている時点で12問解いて合計点が7755.07ptでした。
15511人中192位です。善戦したと思いたい!

パズルを解く感覚で挑戦できてなかなか楽しかったです。今までコツコツ勉強してきた地味な知識が点数になって現れるので嬉しいですね。現在は12問公開されていますが、後半の方は結構歯ごたえがありました。ただ、実務に役立つかと言われると微妙なところです(笑)

制限時間を決めて点数を競うエクストリームCSSバトルを開催したら面白いかもしれません!

 

攻略のコツは?

トッププレイヤーには遠く及ばないですが、やってみてアドバイスできることを書き残しておきます。実務でやっちゃだめなやつも紛れてますが、戦場では何でもありです!

ネタバレが嫌な人はプレイしてから続きを読んでくださいね。

 

 

 

 

【Point 1】 不要なスペースやコメントアウトは削除する。

スペースやコメントアウトも採点の対象になるので注意が必要です。

コロン(:)の後のスペースや、最後のセミコロン(;)なども消すようにすると点数が上がっていきます。

【Point 2】 ショートハンドを活用する。

例えばbackground-color:#ffffff;よりもbackground:#ffffff;の方が短い記述量にできます。

【Point 3】 クラスは極力使わない。

このようにクラスを使うよりも

このようにタグセレクタを使った方が少ない記述量になります。

構造が複雑な場合は、子孫セレクタ( )子セレクタ(>)一般兄弟セレクタ(~)隣接兄弟セレクタ(+)など、様々なセレクタを使って記述量の圧縮に挑戦しましょう。

【Point 4】 単位を省略する。

width,height,top,right,bottom,leftなどは単位を省略しても自動的にpxで計算されます。また、0pxは大抵の場合0で代用が効きます。たった2文字ですが、ちりも積もれば何とやらです。

【Point 5】 position:fixedを活用する。

大抵の場合、position:absoluteよりもposition:fixedの方が少ない記述量で済みます。親要素にposition:relativeを指定したくなりますが、ぐっとこらえてtop,leftやmarginで位置調整しましょう。

【Point 6】 imgタグを活用する

画像の使用は禁止されていますが、imgタグの使用は禁止されていません。<img>タグは<div></div>よりも短い記述量でinline-blockを作ることができます。
ただし、実際にはwidthとheightを指定すると由来不明の線が表示されて減点されるため、次に紹介するborderプロパティを使って図形を描きます。

【Point 7】 borderを活用する。

このように書くと200pxの正方形になりますが、borderプロパティを使うともっと短く表現できます。

先ほど紹介したimgタグを使う場合は最初からinline-blockなので1行目が不要になります。

【Point 8】 box-shadowを活用する。

divやimgを重ねて表現しないといけない場合、box-shadowが使えないか検討して見ましょう。構造を複雑にするよりも少ない記述量で済むことがあります。(却って長くなることもあります)

box-shadow: x移動量 y移動量 ぼかし量 拡大量 カラーコード (inset);

拡大量やinsetはあまり使ったことがないかもしれません。insetを指定すると内側に影を落とすことができます。

 

まとめ

地味な知識が役に立つCSS Battle、ぜひ挑戦してみてください!

我こそは!って方はコメント欄で点数を自慢していってOKです!
これがコツだったなっていうのも添えていただけると嬉しいです。

CSS Battle

-WEB制作, レポート
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

seventeen − fifteen =

関連記事

Gulp.pipeで特定のファイルを除外する

gulpで特定のファイルをpipeから除外するテクニック【環境晒し】

ご無沙汰してます! 最近はgulpとwebpackの勉強をしてnode.jsで開発環境を作ってました。 EJS、SCSS、JS(ES6)のモジュール化、文法チェック、コード自動修正、コード圧縮、画像圧 …

【lazyload】lazysizes.jsの使い方 – 基本編

javascript 前回は画像の遅延読み込み(lazyload)の概要をご紹介しました。 今回は画像の遅延読み込みを実現するlazysizes.jsの基本的な使い方をご紹介します。 目次 準備npm …

【lazyload】lazysizesの使い方 – 拡張編

javascript 前回はlazysizes.jsを使った基本的な遅延読み込みをご紹介しました。 連載中にバージョンが4.1.4から4.1.5になってました、メンテされてるっていいですね。 今回はl …

svgラインアニメーションを使おう

さて、皆さんsvg使ってますか? 少しとっつきにくいsvgですが、使えると表現の幅が広がります。 今回は、簡単に使えるsvgラインアニメーションをご紹介します。 svgの詳しい仕様についてはW3Cのド …

オープンセミナー広島2019に行ってきました

オープンセミナー広島2019に行ってきたので、アウトプットの練習もかねて個人的な備忘録です。今回のテーマは「学び方 hacks」ということで、学びに付いて学べるセッションが目白押しでした! 目次 オー …