みなさんこんにちは!おさかなです!
今回は「CSS SELECTORS CHEATSHEET」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・CSSセレクタのチートシートを探している方
・CSSを学習したい方
・CSSセレクタを使いこなしたい方
「CSS SELECTORS CHEATSHEET」って何?
「CSS SELECTORS CHEATSHEET」とは、クイズ形式で「CSSセレクタ」が学べるチートシートのことです。図解でわかりやすくまとめられているので、パッと復習したいときにもおすすめとなっています!(便利〜)
セレクタとは?
CSSにおけるセレクタとは、スタイルを適用する箇所のことです。カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することができます。セレクタは要素名、id識別子やclass属性値、または属性名と属性値の組み合わせなどを用いて指定します。
「ミツエーリンクス」より引用


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

真ん中にある「選択肢」を押すと、クイズに回答できます。(えい!)

不正解の場合は「赤」になり、正解の場合は「緑」になります!(ブルブルしてる!笑)

また、問題によっては「複数回答」が可能なものもあります!(おお!)

ページを更に下にスクロールすると、「複数条件」の問題もあるので1つ1つ丁寧に解いてみましょう〜!(よし!)

問題はぜんぶで「28問」あります。


(あと、もう少し…🚩)
解説を見よう!
右上のボタンを「game」→「answers」に切り替えると…?

こんな感じで、すべての問題の「答え」がわかります。(ふむふむ…。)

ちなみに、左側にある「本のマーク」を押すと…?

こんな感じで「解説ページ」が見れます!(これは助かる〜)

例えばこちらは「Type Selector(要素型セレクタ)」といったもので、指定されたすべての要素にスタイルが適用される、基本的な形です。

「MDN」を押すと…?

実際のコードが書かれたMDNの解説も読めるので、ぜひご活用ください…!(いいね)

左側メニューの「コードアイコン」を押すと…?

CSSをもっと勉強したい方向けの「学習サイト」に飛びます。(おー!)

10分ほどでサクッと学べるものから、4時間ガッツリ学べるものまで色々あるので、気になる方はぜひこちらもチェックしてみてください✨

(ロケット可愛い🚀)

左側メニュー「指マーク」を押すと…?

チートシートを「PDF形式」で保存できます!
CSSセレクタを、オフラインでも確認したい方はダウンロードしておくと良いでしょう!(お疲れ様です☕)



人生のチートシートが欲しいですねッ!はい!笑

人生は自分で切り拓くから面白いんだろ〜
奇跡は起こすもの!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
