不要なスペースやコメントアウトは削除する。ショートハンドを活用する。クラスは極力使わない。position:fixedを活用する。borderを活用する。box-shadowを活用する。Agarwal氏が作ったCSSコーディングの腕前を競うゲームです。プレイヤーは指示された図形をできるだけ短いコードで表現します。一致率が高ければ高いほど、コードの文字数が少なければ少ないほど高得点になります。画像の使用は禁止されています。Battleどこが難しいの?同じ図形を作るだけならそこまで難しくないです。後半になってくると複雑になってきますが、根気があれば必ず表現できます。ポイントはいかにコードを短くするか。第一問のベストレコードは56文字の834.56ptです。私の場合は84文字の779.63ptでした。やったらそんなに短くできるんでしょうね・・・。ちなみに、点数の感覚ですが以下のような感じです。500点:一致率が低い、不合格。550点:怪しいところはあるけど、及第点。600点:一致率が高い、合格点。650点:一致率が高く、コードが良く圧縮されている、素晴らしい!700点以上:あなたが神か。やってみた感想この記事を書いている時点で12問解いて合計点が7755.07ptでした。15511人中192位です。善戦したと思いたい!パズルを解く感覚で挑戦できてなかなか楽しかったです。今までコツコツ勉強してきた地味な知識が点数になって現れるので嬉しいですね。現在は12問公開されていますが、後半の方は結構歯ごたえがありました。実務に役立つかと言われると微妙なところです(笑)制限時間を決めて点数を競うエクストリームCSSバトルを開催したら面白いかもしれません!攻略のコツは?トッププレイヤーには遠く及ばないですが、やってみてアドバイスできることを書き残しておきます。実務でやっちゃだめなやつも紛れてますが、戦場では何でもありです!ネタバレが嫌な人はプレイしてから続きを読んでくださいね。不要なスペースやコメントアウトは削除する。スペースやコメントアウトも採点の対象になるので注意が必要です。コロン(:)の後のスペースや、最後のセミコロン(;)なども消すようにすると点数が上がっていきます。ショートハンドを活用する。background-color:#ffffff;よりもbackground:#ffffff;の方が短い記述量にできます。クラスは極力使わない。class="hoge"></div><style>.hoge{...}</style>このようにクラスを使うよりも<div></div><style>div{...}</style>このようにタグセレクタを使った方が少ない記述量になります。)、子セレクタ(>)、一般兄弟セレクタ(~)、隣接兄弟セレクタ(+)など、様々なセレクタを使って記述量の圧縮に挑戦しましょう。width,height,top,right,bottom,leftなどは単位を省略しても自動的にpxで計算されます。0pxは大抵の場合0で代用が効きます。2文字ですが、ちりも積もれば何とやらです。position:fixedを活用する。場合、position:absoluteよりもposition:fixedの方が少ない記述量で済みます。親要素にposition:relativeを指定したくなりますが、ぐっとこらえてtop,leftやmarginで位置調整しましょう。imgタグを活用する画像の使用は禁止されていますが、imgタグの使用は禁止されていません。<img>タグは<div></div>よりも短い記述量でinline-blockを作ることができます。実際にはwidthとheightを指定すると由来不明の線が表示されて減点されるため、次に紹介するborderプロパティを使って図形を描きます。borderを活用する。200このように書くと200pxの正方形になりますが、borderプロパティを使うともっと短く表現できます。#000;先ほど紹介したimgタグを使う場合は最初からinline-blockなので1行目が不要になります。box-shadowを活用する。divやimgを重ねて表現しないといけない場合、box-shadowが使えないか検討して見ましょう。構造を複雑にするよりも少ない記述量で済むことがあります。(inset);拡大量やinsetはあまり使ったことがないかもしれません。insetを指定すると内側に影を落とすことができます。Battle、ぜひ挑戦してみてください!我こそは!って方はコメント欄で点数を自慢していってOKです!これがコツだったなっていうのも添えていただけると嬉しいです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。