あなたは何点?Webデザイナーのためのクイズサイト12

thumb_question

Webサイト制作や色彩感覚、タイポグラフィの知識をクイズ感覚で勉強できるサイトをまとめてみました。どれも短時間で楽しみながらできるものばかりなので、気軽に挑戦できますよ!Webデザインや制作の勉強中のあなたも、ベテランさんのあなたも、ぜひ試してみてください :)


休憩時間にサクッと挑戦!

選択問題やドラッグ&ドロップでできるゲーム感覚な問題いろいろ!

1. HTML/CSS

HTML5実力テスト HTML/CSSコース

HTML5実力テスト

「実力テスト」という名のクイズサイト。HTML/CSSコースではHTML5とCSSの基本問題がクイズ形式で出題されます。制限時間は15分。「HTMLやCSSを見てどのように表示されるか?」「smallタグは何を意味するか?」などなど、問題を解きながら勉強になります!

2. CSS

Nettuts+ Quiz #5: CSS Specificity and Cascading

CSS Specificity and Cascading

サイト自体は英語で書かれていますが、問題はCSSコードのみで問われるので英語力不要です。以下のHTMLで、問いのCSSを設定した場合、何色で表示されるかのクイズです。「Start Quiz」ボタンをクリックしてスタート。

<div id="main" class="container">
    <p id="foo" class="bar boo">Something clever goes here</p>
</div>

3. JavaScript

Nettuts+ Quiz #3: JavaScript

JavaScript

こちらも同じ英語サイトですが、同様に問題はJavaScriptコードのみなので英語力不要。表示される数値などを答えます。

4. JavaScript

HTML5実力テスト JavaScriptコース

HTML5実力テスト JavaScriptコース

上記「実力テスト」と同じサイトのJavaScriptコース。制限時間は15分。「下記のコードでどのように表示されるか?」「IE9でサポートされていないAPIは?」などなど。

5. 色彩感覚

FM 100 Hue Test

FM 100 Hue Test

左右にならぶ色相をドラッグして並び替えてグラデーションを作ります。少ないスコアほど色彩感覚が優れています(最高スコアはゼロ)。

6. ベジエ曲線

Shape Type

Shape Type

ベジエ曲線を操作して文字の形を整えるサイト。形のバランス感覚はもちろん、苦手な人も多いベジエ曲線の練習にもなります!Shiftキーを押せば直線に。

7. 文字詰め

Kern Type

Kern Type

文字詰めをゲーム感覚で勉強できる素敵サイト。文字と文字の間のスペースをドラッグか矢印キーで調節します。

英語の問題にもじっくり挑戦!

ここからは英語力も必要なのでちょっと難易度があがります…!英語の勉強にもなりますね!

8. Web総合

The Web IQ Quiz

The Web IQ Quiz

「Twitterは何文字まで入力できる?」「このWebサービスの創始者は?」などなど、Webにまつわるクイズに30秒以内で答えるクイズサイト。Web総合問題であるQuiz01に答えると、ソーシャル・ゲーム・モバイルなどその他のジャンルのクイズもできるようになります。上の図のように答えが一択という謎の問題もありますw

9. CSS基本

Nettuts+ Quiz #1: Beginner CSS

Beginner CSS

CSSの基礎クイズ。「セレクターの記述方法として、正しくないものは?」「正しくコメントアウトされているのはどれ?」など。

10. jQuery

Nettuts+ Quiz #2: jQuery Basics

jQuery Basics

jQueryの基礎クイズ。「jQueryって何?」「jQuery.noConflict(true)って何のために使う?」など。

11. Photoshop

Test Your Photoshop Knowledge #1

Test Your Photoshop Knowledge

Photoshopのショートカットキーや操作方法など。PhotoshopのバージョンはCS5です。

12. HTML5

Nettuts+ Quiz #6: How Well do you Know HTML5?

How Well do you Know HTML5

HTML5の基礎クイズ。「HTML5の正しいDOCTYPE宣言の記述方法は?」「HTML5でサポートされていない要素は?」など。


いかがでしたか?私は全てトライしましたが、一番スコアがとれたのは色彩感覚のテストでした(満点!わーい!)。他はもっと勉強しなきゃです…。職場のみんなでわいわいやってみるのも楽しそうですね!

シェアする

コメント

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)