CSSのセレクタを覚えずに簡単に理解する方法
CSSを理解する上でセレクタは避けて通れません。ですが覚えるには量が多くてとっても大変です。
この記事では、あんまり勉強しなくてもCSSセレクタを理解する方法を紹介します。
その1：チートシートを見る
チートシートとは分からなくなった時にサッと見れるクイックリファレンス的な画像です。この1枚を見れば大体は分かるようにまとめられています。
CSSセレクタのチートシートは以下のようなものがあります。
以下は @hasantoxr が作成したチートシートです。
I made a CSS Selectors Cheat Sheet🔥
I hope it can help you pic.twitter.com/8l1kQy6dBq
— Hasan Toor ✪ (@hasantoxr) August 22, 2022
字が小さくてちょっと見にくいですが、ほとんど網羅されているのでこの画像1つでカバーできる範囲が広そうです。
2つ目は @sajid_curious が作成したチートシートです。
このチートシートはPart4まであります。
✨ CSS Selectors Cheatsheet Part 1✨ pic.twitter.com/WJi4rZpaWu
— Sajid Mohammed (@sajid_curious) October 30, 2022
✨ CSS Selectors Cheatsheet Part 2✨ pic.twitter.com/ncKHUnxzYr
— Sajid Mohammed (@sajid_curious) October 31, 2022
✨ CSS Selectors Cheatsheet Part 3✨ pic.twitter.com/Do8yQHC7j4
— Sajid Mohammed (@sajid_curious) November 1, 2022
✨ CSS Selectors Cheatsheet Part 4✨ pic.twitter.com/KJ677HPt3D
— Sajid Mohammed (@sajid_curious) November 7, 2022
その2：ゲームで勉強する
いわゆるゲーミフィケーションというやつですね。ゲーム感覚でCSSセレクタを習得しちゃおうというものです。
このゲームではHTMLをテーブルの上のお皿に見立てて、CSSセレクタでお皿を選択します。
左側がCSSエディタ、右側がHTMLソースコードになっています。
一問目は「Select the plates」ですので、 plate とCSSに記述すれば正解です。
やっぱり本で勉強することが大事
プログラミング（CSSをプログラミングと呼ぶのかは置いといて）を勉強するには、本やスクール、インターネット上の動画などいろんなものがありますが、私は断然、本派です。
理由は以下の通りです。
- 文字が読みやすい（ディスプレイを占有しない）
- 自分のペースでできる（動画やスクールは話し手のスピードに合わせる必要があるが、本は読み手のスピードで進められる（
-
再開が簡単（しおりを挟むだけでOK）
CSSの本はたくさんあるので、自分のお気に入りの1冊を探してみてください。
