CSSセレクタとは何か
CSSセレクタは、スタイルを適用する対象のHTML要素を選ぶための書き方です。「この要素にこの色を当てる」というときの「この要素」を指定する部分にあたります。
セレクタの後に波括弧で囲んだ宣言を書くことで、選んだ要素にまとめてスタイルが適用されます。選び方の精度が、デザインの当たり方を左右します。
基本となる3つのセレクタ
もっとも使うのが要素セレクタ、クラスセレクタ、IDセレクタの3つです。要素セレクタはpやhなどタグ名で全体に当て、クラスセレクタはドットに続けて名前を書き、複数の要素にまとめて当てられます。
IDセレクタはシャープに続けて名前を書き、ページ内で1つだけの要素に当てます。汎用的に使い回したいときはクラス、固有の1要素にはID、と覚えると整理しやすくなります。
実務ではどこで関係する？
CSSセレクタは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
CSSセレクタについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
組み合わせて絞り込む
セレクタはつなげて使えます。スペースで区切ると「ある要素の中にある特定の要素」を指定でき、要素名とクラスを連結すると「そのタグでかつそのクラスを持つもの」に絞り込めます。
細かく絞れるほど狙った場所だけにスタイルを当てられますが、複雑にしすぎると後で読みにくくなります。必要な範囲で簡潔に書くのがコツです。
セレクタを書く手順
初めてスタイルを当てるときの基本的な流れを示します。
- スタイルを変えたいHTML要素を決める
- その要素にclass属性で名前を付ける
- CSS側でドットに続けて同じ名前を書く
- 波括弧の中にcolorやmarginなどの宣言を書く
- ブラウザで再読み込みし、意図どおり当たっているか確認する
優先順位でつまずかない
同じ要素に複数のスタイルが当たると、優先順位の高いものが勝ちます。一般にIDセレクタはクラスセレクタより強く、クラスは要素セレクタより強い、という順序があります。
思ったとおりに反映されないときは、別の場所でより強いセレクタが当たっていないか疑いましょう。むやみに強いセレクタや上書き指定を多用すると管理が難しくなるので、なるべくクラス中心で揃えるのがおすすめです。
見た目をすぐ確認したいとき
セレクタの当たり方は実際にブラウザで見ないと分かりにくいものです。修正のたびに公開し直すのは手間がかかり、レビュー相手に何度もリンクを送り直すのも煩雑です。
ギガサイト便はHTMLやCSSを含むZIPをドロップすると共有URLを発行でき、同じURLのままファイルを差し替えられます。セレクタを調整した最新版をその場で確認・共有でき、リンクを送り直さずにレビューを回せます。
よくある質問
classとidはどう使い分ければよいですか
複数の要素に同じスタイルを使い回したいときはclass、ページ内で1つだけの固有要素を指すときはidが向いています。実務では再利用しやすいclassを中心に使うことが多いです。
スタイルが反映されないのはなぜですか
別の場所でより優先順位の高いセレクタが当たっている、クラス名のつづりが違う、CSSが正しく読み込まれていない、といった原因が考えられます。優先順位とつづりをまず確認してください。
セレクタは細かく書くほどよいのですか
必ずしもそうではありません。細かく絞ると狙いやすい反面、複雑になりすぎると後で読みにくく管理が大変になります。必要な範囲で簡潔に書くのが保守しやすいコツです。
同じクラスを複数の要素に付けてもよいですか
問題ありません。クラスはまさに複数要素へ同じスタイルをまとめて当てるための仕組みです。共通の見た目を統一したいときに積極的に使ってください。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。