Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/attlabo-ssl/web/buchiko-web.com/wp-content/plugins/all-in-one-seo-pack/modules/aioseop_opengraph.php on line 844
CSSをゲーム感覚で学べる「CSSバトル」が面白い! | ぶちろぐ

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

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

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

投稿日:

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

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

 

CSSバトルのご紹介

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

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

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

 

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

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

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

 

まとめ

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

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

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

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

執筆者:


comment

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

関連記事

なぜWebデザイナーを目指したのか

    私がWebデザイナーを目指そうと思ったのは、前職で飲食店スタッフをしていた2017年の頃です。 前職でもそれなりに楽しく働いていたのですが、どこかでずっと、手に職をもった職人や技術者に憧れてい …

【Illustrator】台形を作る方法

みなさんこんにちは、ぶちこです。 今日は、Illustratorで台形を作る方法について、簡単にですがご紹介します! 制作の手順は以下の通りです。   1.長方形ツールで長方形を描き、選択し …

【Illustrator】印刷データ入稿時に気をつけること

製作会社に入社して早半年…今回初めて紙のデザインを担当させていただくことになりました。 Webでのデザインと違い、後からの修正がきかないものなので緊張感がすごい(ドキドキ)です&#8230 …

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

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

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

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