アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

CSSをゲーム感覚で学べる「CSSバトル」が面白い!

投稿日:

こんにちは、ぶちこです。

先日、CSSをゲーム感覚で楽しみながら学べる面白いサイトを見つけたのでご紹介したいと思います。

 

CSSバトルのご紹介

その名も「CSSBattle」という海外のサイトで、CSSを使用って他のユーザーと得点を競い合うという内容になっています。

利用方法ですが、まずはGitHubアカウント、Twitterアカウント、Googleアカウントのどれかからログインすることで利用可能になります。

ログインできたら次に、画面上のチャレンジしたい問題のイメージをクリックすることで、それぞれのページに移動し、ゲーム開始となります。

 

クリックするとこんな画面が表示されます。左側はコードを書くエディタ、中央はその内容が反映される出力画面、そして右側はお手本という並びになっています。

テキストエディタにコードを書いていき、完成したら画面下部の「submit」をクリック!すると、自身のスコアが表示されますよ。

高スコアを狙うには、可能な限り少ないコードで画像の内容を正確に表現することが大切なようです…!

 

まとめ

いかがでしたでしょうか?

海外サイトなので全て英語表記ではありますが、ゲーム感覚で楽しみながらCSSを勉強できるっていいですよね。

気になった方はぜひお試しください!

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

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

関連記事

【Illustrator】配置した画像にフチをつける方法

今日はIllustratorで配置した画像にフチをつける方法についてご紹介します。 もちろん、クリッピングマスクのかかった画像でもフチをつけることができますよ。 なんとなくフチって「線を追加」でつけら …

【Illustrator】使用していないスウォッチだけを削除する方法

デザインをするときは使用することも多いIllustratorのスウォッチ機能ですが、多用しすぎるとファイル容量が増えてデータを重くする原因になってしまいます。 スウォッチはどんどん自動保存されていくの …

Adobe Typekitのフォントが同期されなくなった時の対処法

AdobeのCreative Cloudを契約していると使える「Typekit」。 様々なタイプのフォントを自分のPCに同期させてPhotoshopやIllustrator等で使うことができるのでとて …

【Photoshop】レイヤーマスクを複製する方法

今回は久しぶりにphotoshopのテクニックについてご紹介したいと思います。 いきなりですが、私の会社では有料サイトの画像を使用する場合はまずカンプ画像を使い、その後クライアントからOKが出たら画像 …

Web制作会社の残業事情。Webデザイナーになった私がお答えします!

  web制作会社というと遅くまで仕事をしている、残業が多いといったイメージが強いですね。   転職するとき、実際残業がどのくらいあるのか気になるところ。   そこで今日は、実際私が働いていて残業があ …