みなさんこんにちは!おさかなです!
今回は「CSS SELECTORS CHEATSHEET」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・CSSセレクタのチートシートを探している方
・CSSを学習したい方
・CSSセレクタを使いこなしたい方
「CSS SELECTORS CHEATSHEET」って何?
「CSS SELECTORS CHEATSHEET」とは、クイズ形式で「CSSセレクタ」が学べるチートシートのことです。図解でわかりやすくまとめられているので、パッと復習したいときにもおすすめとなっています!(便利〜)
セレクタとは?
CSSにおけるセレクタとは、スタイルを適用する箇所のことです。カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することができます。セレクタは要素名、id識別子やclass属性値、または属性名と属性値の組み合わせなどを用いて指定します。
「ミツエーリンクス」より引用
![](https://osakanav.com/wp-content/uploads/2022/10/csssele.png)
![](https://osakanav.com/wp-content/uploads/2021/11/load-top-160x90.png)
実際に使ってみよう!
クイズに挑戦しよう!
それでは早速サイトにアクセスしましょう!
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30.png)
真ん中にある「選択肢」を押すと、クイズに回答できます。(えい!)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-select.png)
不正解の場合は「赤」になり、正解の場合は「緑」になります!(ブルブルしてる!笑)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30.gif)
また、問題によっては「複数回答」が可能なものもあります!(おお!)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-hukusuu.png)
ページを更に下にスクロールすると、「複数条件」の問題もあるので1つ1つ丁寧に解いてみましょう〜!(よし!)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-hukuzatu.png)
問題はぜんぶで「28問」あります。
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-end.png)
![](https://osakanav.com/wp-content/uploads/2022/10/flexboxfroggy-top-160x90.png)
(あと、もう少し…🚩)
解説を見よう!
右上のボタンを「game」→「answers」に切り替えると…?
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-kirikae.png)
こんな感じで、すべての問題の「答え」がわかります。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-a.gif)
ちなみに、左側にある「本のマーク」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-book.png)
こんな感じで「解説ページ」が見れます!(これは助かる〜)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-read.png)
例えばこちらは「Type Selector(要素型セレクタ)」といったもので、指定されたすべての要素にスタイルが適用される、基本的な形です。
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-read1.png)
「MDN」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-mdnbtn.png)
実際のコードが書かれたMDNの解説も読めるので、ぜひご活用ください…!(いいね)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-mdn.png)
左側メニューの「コードアイコン」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30r.png)
CSSをもっと勉強したい方向けの「学習サイト」に飛びます。(おー!)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-skill.png)
10分ほどでサクッと学べるものから、4時間ガッツリ学べるものまで色々あるので、気になる方はぜひこちらもチェックしてみてください✨
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-ko-su.png)
(ロケット可愛い🚀)
![](https://osakanav.com/wp-content/uploads/2022/10/rocket.gif)
左側メニュー「指マーク」を押すと…?
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-dl.png)
チートシートを「PDF形式」で保存できます!
CSSセレクタを、オフラインでも確認したい方はダウンロードしておくと良いでしょう!(お疲れ様です☕)
![](https://osakanav.com/wp-content/uploads/2022/10/frontend30-file.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
人生のチートシートが欲しいですねッ!はい!笑
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
人生は自分で切り拓くから面白いんだろ〜
奇跡は起こすもの!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2022/06/effectgames-top-160x90.png)