作成日: 2022/08/04 更新日: 2023/03/25 サイトの紹介と使い方
概要
- 主要な部分のCSSの記述は、セレクタが最小単位（ブロック）になります。
- セレクタの種類やその組み合わせの数は膨大ですが、この記事では筆者がよく使うセレクタのみ紹介します。
- 詳細を知りたい方は、CSS セレクタの種類と書き方を参照してください。
- また、検索キーワード「CSS セレクタ」でググればより多くの情報が得られます。
セレクタとは
- 特定のHTMLのタグに対してCSSを使って表示形態を構成したり、マウスアクションに対して表示形態を変化させることができます。
この特定のHTMLのタグとマウスアクションを指定するためにセレクタは使われます。 - CSSはHTMLと一緒にWEB画面を構成するために使われます。
WEB画面に読者が行う操作は、次の2つになります。- 閲覧する（見る）：CSSはWEB画面の表示形態を設定できます。
- マウスで、スクロールしたりクリックする（アクション）：CSSは特定のマウス操作に対して表示形態を変化させることができます。
- セレクタは、CSSにセレクタ名{}のように記述します。
{}の中は表示形態になります。
セレクタの種類
class セレクタ
- class セレクタは、HTMLの全ての要素に対して使用できます。
- class名は、独自に名付けることができます。
- 独自に名付けることができますが、他の人も同じように名付けることができるので、同じホームページを作成するときなどに、同じ名前で重複しないようにclass名の名付けルールを決めた方が安全だと思います。
- 筆者は、複数人で作成することはないので、WordPressのテーマとだけ重複しないように、名前の先頭に"my_"を付けています。
例）
.my_class{
color: red;
}親子関係がある時
- HTMLのタグが、親子関係（ネストされている）時、CSSにも影響します。
<div class="my_01">
<p>明日</p>
</div>.my_01{
color:green;
}- 上の例では、<p>タグが<div>タグの子になっているので、親タグ<div>で指定したclass"my_01"が子タグ<p>にも反映されています。
つまり、「明日」は"green"で表示されます。
.my_01{
color:green;
}
.my_01 p{
color:yellow;
}- 上の例では、明示的に子タグ<p>は"yellow"と記述しているので、「明日」は"yellow"で表示されます。
id セレクタ
- id セレクタは、表示順位を除けば、class セレクタと同じです。
- 表示順位については、CSS-02.セレクタの表示優先順位を参照してください。
ユーザーアクション疑似クラス
- 特定のクラスのアクションの時だけ、表示形態を変化させることができます。
- 下の例では、my_classを持つHTML要素に対して、マウスが要素範囲に移動してきた時（hover）に実行されるセレクタです。
- 注意点は、class名:アクションの":"を忘れずに付けることです。
例）
.my_class:hover{
color : green;
}