【初心者向け】CSSセレクタとは？様々な要素の指定方法 | CSS入門
CSSのセレクタとは何か？
CSSはWebページを装飾するためのスタイルシート言語です。CSSセレクタは、要素のスタイルを指定するための特定のHTMLタグ、またはクラスを指定する際に用いられます。
まずは本題であるCSSセレクタの説明を行う前に、前提となるHTMLおよびCSSの知識について復習していきましょう。
HTMLの構造
CSSおよびCSSセレクタを理解する前に、まずはHTMLの構造について理解しておく必要があります。
HTMLはタグと呼ばれるそれぞれが意味を持った記号によって構成されています。 タグには開始タグと終了タグが存在し、文章をタグで囲むことにより特定のルールに沿った文章構造を定義することができます。 またこの、HTMLタグで囲われた情報の単位のことを「要素」といいます。
さらに、この要素自身もタグで囲むことも可能です。 この場合、二つの要素は階層構造となり、外側にある要素を親要素、内側にある要素を子要素と呼びます。 子要素の中にさらに要素を配置した場合は、さらに一階層下に孫要素を定義したこととなります。
このようにHTMLは要素の階層を重ねていくことで、親の子、そのまた孫...というように子孫要素を内包することができます。
HTMLタグの属性
前段でHTMLタグはそれぞれが意味を持った記号であると説明しました。HTMLタグはその種類に応じて様々な設定を与えることが出来ます。 このそれぞれのHTMLタグに与えられる設定のことを属性、設定の内容のことを属性値と呼びます。
与えられる属性とその値はタグごとにそれぞれ異なります。 例えば以下はid属性にheaderという属性値を与えたdiv要素の例です。
<div id="header"> <h1>こんにちは、世界！</h1> </div>
また以下はリンクを定義するaタグに、リンク先を指定に用いるhref属性、属性値にリンク先のURLを設定した例です。
<a href="https://www.google.com/">Googleトップページ</a>
このようにHTMLタグごとに与えられる属性とその属性値が異なることがわかっていただけたかと思います。 CSSはこれらの要素、階層、属性、属性値を指定して任意の装飾を行なっていきます。
CSSの基本文法
CSSは「セレクタ」「プロパティ」「値」の3つから構成されます。 CSSファイルではそれぞれを以下のような対応で記述することでスタイリングを行なっていきます。
- セレクタ = HTMLのどの要素に
- プロパティ = 何を
- 値 = どのようにスタイリングする
p { color: red; }
上記の例はそれぞれ以下のような対応でpタグの文字色を赤色に変更しています。
- セレクタ = pタグの
- プロパティ = 文字色を
- 値 = 赤色にする
基本的なCSSセレクタについて
ここからは具体例を挙げながら実際にCSSセレクタによりHTMLの要素を指定してスタイルを当てる方法について見てみようと思います。
例えば、次のHTMLコードがあるとします。
<div class="box"> <h1 id="title">こんにちは、世界！</h1> <p>これはCSSのセレクタについての説明です。</p> </div>
このコードを使って、いくつかのセレクタを見てみましょう。
1. タグセレクタ
h1 { color: red; }
このセレクタは、h1タグに対してスタイルを適用します。この場合、h1タグ内のテキストの色が赤に変わります。
2. クラスセレクタ
.box { background-color: yellow; }
このセレクタは、class属性がboxである要素に対してスタイルを適用します。この場合、div要素の背景色が黄色に変わります。 また、CSSでクラスセレクタにアクセスする場合は「.（ドット）」に続けてクラス名を記述することで指定が可能です。
3. 子孫セレクタ
.box p { font-size: 18px; }
このセレクタは、.boxクラス内のp要素にスタイルを適用します。この場合、p要素内のテキストのフォントサイズが18pxに変わります。 スタイルが適用される範囲はboxクラス内に存在するp要素のみとなります。
4. IDセレクタ
#title { text-align: center; }
このセレクタは、id属性がtitleである要素に対してスタイルを適用します。この場合、h1要素内のテキストが中央揃えに変わります。 また、CSSでIDセレクタにアクセスする場合は「#（シャープ）」に続けてID名を記述することで指定が可能です。
5. 属性セレクタ
<a href="https://example.com" target="_blank">Link to Example Site</a>
a[target="_blank"] { color: blue; }
このセレクタは、target属性がblankであるa要素に対してスタイルを適用します。この場合、リンクのテキストの色が青に変わります。 ちなみにtarget属性とはリンク先の文書を開くウインドウを指定するための属性です。属性値としてblankを指定することで、クリックしたリンク先のページをブラウザの別タブで展開します。
以上がいくつかのCSSセレクタの例です。 セレクタを使って要素を選択し、スタイルを適用することで、Webページをより魅力的に装飾することができます。
