みなさんこんにちは!おさかなです!
今回は「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セレクタを、オフラインでも確認したい方はダウンロードしておくと良いでしょう!(お疲れ様です☕)
人生のチートシートが欲しいですねッ!はい!笑
人生は自分で切り拓くから面白いんだろ〜
奇跡は起こすもの!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!