WebDesignFactsカラーパレットカテゴリーお問い合わせ日本語English中文ホームCSS「CSSバトル」が面白い!自分のCSSスキルを活用してハイスコアを目指そう!【CSSのお勉強】2019/09/19ツイートシェアはてブLINEPocket全て英語なのですが、『CSSBattle』(CSSバトル)というサイトが先日オープンしました。その名の通り、CSSを使用して他のユーザーとバトルを行う内容になっています。遊んでみて面白かったので、今回はCSSバトルの遊び方をご紹介したいと思います。お時間あるデザイナー、コーダーの方はぜひ遊んでみてはいかがでしょうか。CSSBattleCSSBattle目次CSSバトルの遊び方は?CSSバトルの利用方法CSSバトルのまとめCSSバトルの遊び方は?ゲームの目的は与えられたターゲット画像を、可能な限り少ないコード(HTMLとCSS)で表現するといったシンプルな内容になっています。画像の内容を100%表現しつつ、少ないコードで書くことによってスコアが表示され、他のユーザーと競い合うといったイメージです。2019年4月現在は12つのターゲットが用意されており、ユーザーと競い合うポイントは12つの総合ランキングと、各1つ1つのターゲットのランキングの2つあります。利用方法は至って簡単。サイトTOPに遷移すると、GitHubアカウント、Twitterアカウント、Googleアカウントでのログインが求められるので、好きなアカウントでログインをします。画面上にターゲットが12つ表示されているので好きなターゲットを選択します。次の画面に左にコードを書くエディタ、中央にはエディタに書いた内容が出力画面、右には目標とするターゲット画像が表示されます。エディタにどんどん目標となるターゲットの画像に合わせたコードを書いていくだけです。完成したら画面下部の「submit」を押すと、自身のスコアが表示されます。筆者もコース1をやってみましたが、結果は[601.49ポイント]でした・・・。現在コース1の最高得点は834.56ポイントのようです。うーん、どうやったらそんなに行くのか・・・。CSSバトルのまとめこういった楽しみながら勉強できる仕組というのは良いですね。気になった方は一度一度お試しください。【無料】カラフルな質感の水彩風テクスチャ素材8種【psd/マー...\Amazonで買うと格安!/広告掲載やタイアップ記事の依頼など、WebDesignFactsへのお問い合わせは以下のメールフィームよりご連絡ください。