Web制作・デザインの基礎知識を、クイズ形式でチェックしよう!

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Semblance: a frontend design quiz」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・Webの基礎知識を深めたい方
・HTML・CSSなど、Webコーディング・デザインを勉強中の方
・自分の理解度をチェックしたい方

「Semblance: a frontend design quiz」って何?

Semblance: a frontend design quiz」とは、Web制作・デザインの基礎知識を、クイズ形式で確認できるサイトのことです。HTML・CSSを学習中の方など、自分の理解度を確かめるときにおすすめとなっています!(いいね👍)

Semblance: A Frontend Design Quiz
Try this fun, online quiz to test your ability to notice small changes in the design of components and patterns on the web.
【Web技術】ブラウザのサポート状況をチェックできる【Can I use】とは?
みなさんこんにちは!おさかなです!今回は「Can I use」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・CSS・各ブラウザの対応状況を知りたい方・IE・Chromeなどブラウザごとに...

実際に使ってみよう!

それでは早速サイトにアクセスしましょう!

クイズに挑戦!

最初の問題は、16進数カラーコードである「#0000FF」がどれかを当てるもの。(どれだっけ……?)

回答は「A~D」の4択で行います。

正解した場合は、「緑色」に光ります!(やった〜⭐)

一方で、不正解の場合は「青色のまま」、再挑戦を促す文言がでてきます。(ふむふむ…。)

ページをスクロールすると、「次の問題」へと進めます!

こちらは、外側の角を5px丸めたものを選ぶ問題。
正解以外の選択肢についても、「A=3px」「B=7px」「C=10px」といった、解説がありました!(おお!)

【無料】VTuberになれちゃう?!【Webcam VTuber】とは?
みなさんこんにちは!おさかなです!今回は「Webcam VTuber」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・VTuberの始め方、なり方を知りたい方・無料でVTuber体験がした...

(ひと休み🍵)

他にもたくさんの問題が!

他にも、テキストの「フォント」問題や……。

Googleのロゴ」を当てるものまでありました!(おもしろい😂)

こちらは正方形を当てる問題。(一瞬迷う。笑)

こちらは「マウスカーソル」を乗せた場合の、動作についての問題です!

このような問題は実際にパーツを動かしてみて」、違いをチェックします。(なるほど💡)

こちらは「透明度」の問題です。

他にも「外枠」についての問題や……。

彩度」など、配色についての問題もありました!(頼もしい🌱)

点が中心にあるもの」を選ぶ問題は、Webの知識のない方でも回答できそうです…!

→「彩度」って何?という方は、こちらでWebデザインを勉強してみませんか?

結果チェック

ページ最下部には、「結果」が表示されます。
Webの基礎知識について実力試しをしたい方は、ぜひ挑戦してみてはいかがでしょうか?(お疲れ様です🍞)

Amazon.co.jp
おさかな
おさかな

英語読めずに0点。

ナビまる
ナビまる

大丈夫!Google先生に翻訳してもらうんだ…!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

↓制作に携わった記事

【LPデザイン】まとめサイト【Web Design Clip】とは?
みなさんこんにちは!おさかなです!今回は「Web Design Clip」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ランディングページを作成したい方・LPデザインの見本を探している方...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました