【Web系エンジニア注目】CSSセレクタ・チートシートとは?

テクノロジー
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「CSS SELECTORS CHEATSHEET」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・CSSセレクタのチートシートを探している方
・CSSを学習したい方
・CSSセレクタを使いこなしたい方

「CSS SELECTORS CHEATSHEET」って何?

CSS SELECTORS CHEATSHEET」とは、クイズ形式で「CSSセレクタ」が学べるチートシートのことです。図解でわかりやすくまとめられているので、パッと復習したいときにもおすすめとなっています!(便利〜)

CSS Selectors Cheatsheet - FrontEnd30

セレクタとは?

CSSにおけるセレクタとは、スタイルを適用する箇所のことです。カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することができます。セレクタは要素名、id識別子やclass属性値、または属性名と属性値の組み合わせなどを用いて指定します。

「ミツエーリンクス」より引用
【ぐるぐる】「読み込み中」のアニメーションが見つかる!【CSS loaders and Spinners】とは?
みなさんこんにちは!おさかなです!今回は「CSS loaders and Spinners」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・読み込み中のデザインを探している方・ローディング...

実際に使ってみよう!

クイズに挑戦しよう!

それでは早速サイトにアクセスしましょう!

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

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

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

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

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

【CSS】FlexBoxの使い方が学べるサイト【FLEXBOX FROGGY】とは?
みなさんこんにちは!おさかなです!今回は「FLEXBOX FROGGY」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・FlexBoxをマスターしたい方・Webサイト作成・Webデザインに...

(あと、もう少し…🚩)

解説を見よう!

右上のボタンを「game」→「answers」に切り替えると…?

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

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

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

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

MDN」を押すと…?

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

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

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

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

(ロケット可愛い🚀)

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

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

https://amzn.to/3sEBckI
おさかな
おさかな

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

ナビまる
ナビまる

人生は自分で切り拓くから面白いんだろ〜
奇跡は起こすもの!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

現在時刻と連動!?「ドット絵」風景アニメ【Living Worlds in HTML5】とは?
みなさんこんにちは!おさかなです!今回は「Living Worlds in HTML5」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・幻想的な風景を探している方・風景アニメーションを流し...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。紆余曲折あり、現在はライターとして活動中。IT技術、サブカルチャーから、シナリオまで色々書きます。
SAOのユウキが好きです!

おさかなをフォローする
タイトルとURLをコピーしました