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

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

関連記事

【Illustrator】文字を斜体にする方法

Illustratorのテキストを斜体にして配置したい場合、英字フォントであれば「Italic指定」ですぐに斜体に変換できるものが多いですが、日本語フォントの場合は「Italic」がないですよね。 じ …

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

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

カーンング練習ができるサイト「KernType」

Webデザインにおいて、重要だけどつい見落としがちな文字詰め(カーニング)。 そんなカーニングを体感的に楽しく学べるWebサービス「KernType」をご紹介します。   KernTypeの …

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

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

「ヒアリング能力」をアップさせるのに参考になる記事3選

デザイナーはディレクターを間に介してクラインアントの要望やデザインのイメージを聞くわけですが、ただ指示の通りに作っていただけでは、結果的にクライアントの抱いていたイメージとはかけ離れたものになってしま …