みなさんこんにちは！おさかなです！
今回は「CSS SELECTORS CHEATSHEET」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・CSSセレクタのチートシートを探している方
・CSSを学習したい方
・CSSセレクタを使いこなしたい方
「CSS SELECTORS CHEATSHEET」って何？
「CSS SELECTORS CHEATSHEET」とは、クイズ形式で「CSSセレクタ」が学べるチートシートのことです。図解でわかりやすくまとめられているので、パッと復習したいときにもおすすめとなっています！(便利〜)
https://frontend30.com/css-selectors-cheatsheet/
セレクタとは？
CSSにおけるセレクタとは、スタイルを適用する箇所のことです。カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することができます。セレクタは要素名、id識別子やclass属性値、または属性名と属性値の組み合わせなどを用いて指定します。
「ミツエーリンクス」より引用
https://osakanav.com/css-loaders-and-spinners
実際に使ってみよう！
クイズに挑戦しよう！
それでは早速サイトにアクセスしましょう！
真ん中にある「選択肢」を押すと、クイズに回答できます。(えい！)
不正解の場合は「赤」になり、正解の場合は「緑」になります！(ブルブルしてる！笑)
また、問題によっては「複数回答」が可能なものもあります！(おお！)
ページを更に下にスクロールすると、「複数条件」の問題もあるので1つ1つ丁寧に解いてみましょう〜！(よし！)
問題はぜんぶで「28問」あります。
https://osakanav.com/flexbox-froggy
(あと、もう少し…🚩)
解説を見よう！
右上のボタンを「game」→「answers」に切り替えると…？
こんな感じで、すべての問題の「答え」がわかります。(ふむふむ…。)
ちなみに、左側にある「本のマーク」を押すと…？
こんな感じで「解説ページ」が見れます！(これは助かる〜)
例えばこちらは「Type Selector（要素型セレクタ）」といったもので、指定されたすべての要素にスタイルが適用される、基本的な形です。
「MDN」を押すと…？
実際のコードが書かれたMDNの解説も読めるので、ぜひご活用ください…！(いいね)
左側メニューの「コードアイコン」を押すと…？
CSSをもっと勉強したい方向けの「学習サイト」に飛びます。(おー！)
10分ほどでサクッと学べるものから、4時間ガッツリ学べるものまで色々あるので、気になる方はぜひこちらもチェックしてみてください✨
(ロケット可愛い🚀)
左側メニュー「指マーク」を押すと…？
チートシートを「PDF形式」で保存できます！
CSSセレクタを、オフラインでも確認したい方はダウンロードしておくと良いでしょう！(お疲れ様です☕)
人生のチートシートが欲しいですねッ！はい！笑
人生は自分で切り拓くから面白いんだろ〜
奇跡は起こすもの！
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
https://osakanav.com/living-worlds-in-html5
