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

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

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

投稿日:

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

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

 

CSSバトルのご紹介

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

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

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

 

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

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

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

 

まとめ

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

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

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

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

執筆者:


comment

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

関連記事

使える背景フリー素材サイト6選!

デザインの背景画像で迷ったときにチェックしたい背景素材サイトをまとめてみました! なんかデザインが物足りないな〜なんて時にも使えるサイトばかりなので、よかったら参考にしてみてください。 それでは、さっ …

【Webデザインおすすめ書籍】10倍ラクするIllustrator仕事術 【増強改訂版】

今までイラレの本は買ったことがなくほぼ自己流で操作していたのですが、今回評判のよいこちらの本を購入してみたので、ご紹介します。 10倍ラクするIllustrator仕事術 【増強改訂版】CS5/CS6 …

デスクトップやWeb上の画面から色を簡単に抽出する方法

デザイン制作時に参考サイトから色を抽出したい時、皆さんはいつもどうしていますか? 私は初めの頃、参考をキャプチャ→保存→Illustrator・Photoshopで開いて色を抽出、という流れでやってい …

ボタンを自動で生成してくれる「Button Maker」

今回は 「Button Maker」という、ボタンを自動生成してくれるウェブサービスをご紹介します。 文字やサイズ、色などを指定するだけで、簡単にそれっぽい綺麗なボタンを作ってくれるので、時間がない時 …

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

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