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

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

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

投稿日:

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

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

 

CSSバトルのご紹介

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

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

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

 

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

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

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

 

まとめ

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

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

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

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

執筆者:


comment

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

関連記事

【Illustrator】ドキュメントのタブが消えた時の対処法

突然ですが、みなさんはイラストレータを使用中にドキュメントのタブがいつの間にか消えてしまったことはありませんか? 通常だと開いたドキュメントはコントロールパネルの下にタブで表示されますよね。 ですが、 …

PC内のフォントを一覧表示できる「wordmark.it」が便利!

色々なフォントをインストールしてあるのはいいけれど、選ぶ時がけっこう大変…という方も多いのでは? そこで今回は、フォント選びを楽にしてくれるwebサービス「wordmark.it」をご紹介 …

Webデザインを始めて変わったこと

こんにちは、ぶちこです。 毎日狂ったように暑いですが、皆さん大丈夫でしょうか…。     最近、ふと思うことがあります。     それは、webデザインを始めてから、自分変わったなあということ。   …

適切なシャドウの色が分かる「Material Icon Shadow Color Picker」

オブジェクトを立体的に見せたいときに使うシャドウですが、新米デザイナーさんはつい黒ばかり使っていませんか?(私がまさにそうなんですが…。) シャドウというと黒をイメージしがちですが、実はオブジェクトの …

転職活動、応募先の選び方。私が大切にしていた4つのポイント。

  みなさんはWebデザイナーとして応募先の企業を決めるとき、何を基準に決めますか?   お給料? 会社の規模? 通勤時間?     人それぞれ選ぶポイントは様々だと思いますが、 私は4つのことを大切 …