![[CSS]セレクタの指定方法](https://techmemo.biz/wp-content/uploads/2012/11/N811_higewoijirudansei500-thumb-750x500-2175.jpg "[CSS]セレクタの指定方法")
セレクタの指定方法は様々あって、非常に複雑な構成にすることも可能です。よく使う基本的な書き方について説明いたします。
セレクタの指定方法は、大きく分けて4通りあります。
- アスタリスクで指定
- HTMLのタグで指定
- クラスで指定
- IDで指定
実際に以下のようなHTMLがあると仮定して説明していきます。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 | <!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css" /> <title>セレクタの指定方法</title></head><body><h1>セレクタとは</h1><p>CSSで要素を指定する記述のことです。</p><div class="hoge">本記事では<span id="foo">セレクタ</span>について記述します。</div></body></html> |
アスタリスクで指定
すべての要素に対して同じスタイルを適用する時は、セレクタにアスタリスク(*)を使います。
1 2 3 | * { color:red;} |
このようにアスタリスクをセレクタに書くと、すべての要素が同じスタイルになります。
HTMLのタグで指定
セレクタの指定には、HTMLのタグをそのまま使うことができます。
01 02 03 04 05 06 07 08 09 10 11 | h1{ color:blue;}p{ color:red;}div{ font-size:8px;} |
このようにタグをセレクタとして指定することで、h1要素が青色、p要素が赤色、div要素のフォントサイズが8pxになります。
クラスで指定
クラスに対してスタイルを適用する場合、頭にピリオド(.)をつけたクラス名をセレクタに指定します。
1 2 3 | .hoge{ background-color:yellow;} |
このように記述することで、クラス”hoge”の背景色が黄色になります。
IDで指定
指定されているIDに対してスタイルを変更したい場合、頭にシャープ(#)をつけたID名をセレクタに指定します。
1 2 3 4 | #foo{ font-style:italic; font-size:20px;} |
このように記述すると、fooのスタイルを”斜体”で”文字の大きさを20px”に変更することができます。
他にももっと複雑な指定方法もありますが、まずはこれらの方法を押さえておけば、なんとなくセレクタの指定方法がイメージできると思います。他の複雑な指定方法も覚えてくると効率が良くなりますが、最初から複雑な指定をすると混乱してくるので、地道に色んなスタイルを試して覚えていくのがいいでしょう。