みなさんこんにちは!おさかなです!
今回は「Semblance: a frontend design quiz」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・Webの基礎知識を深めたい方
・HTML・CSSなど、Webコーディング・デザインを勉強中の方
・自分の理解度をチェックしたい方
「Semblance: a frontend design quiz」って何?
「Semblance: a frontend design quiz」とは、Web制作・デザインの基礎知識を、クイズ形式で確認できるサイトのことです。HTML・CSSを学習中の方など、自分の理解度を確かめるときにおすすめとなっています!(いいね👍)


実際に使ってみよう!
それでは早速サイトにアクセスしましょう!

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

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

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

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

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

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


(ひと休み🍵)
他にもたくさんの問題が!
他にも、テキストの「フォント」問題や……。

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

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

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

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

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

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

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

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

→「彩度」って何?という方は、こちらでWebデザインを勉強してみませんか?
結果チェック
ページ最下部には、「結果」が表示されます。
Webの基礎知識について実力試しをしたい方は、ぜひ挑戦してみてはいかがでしょうか?(お疲れ様です🍞)


英語読めずに0点。

大丈夫!Google先生に翻訳してもらうんだ…!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
↓制作に携わった記事
ツイート大量
— アニメイトタイムズ公式 (@animatetimes) January 4, 2023
2022年話題になったあの作品や2023年冬放送アニメのお正月ツイートまとめ!
『リコリス・リコイル』や『機動戦士ガンダム 水星の魔女』、『#お隣の天使様』など【注目トレンド】#リコリコ#水星の魔女#G_Witchhttps://t.co/t8Yy5UJCA1
