はじめに
CSSセレクターは、HTMLの要素を指定してスタイルを適用するための強力な機能です。初心者の方にとっては、CSSセレクターの種類や使い分けが理解するのに難しい部分かもしれません。しかし、CSSセレクターを習得することで、より柔軟でわかりやすいスタイリングができるようになります。本記事では、CSSセレクターの基礎から応用まで、チートシートを参考にしながらわかりやすく解説していきます。
基本的なセレクター
まずはCSSセレクターの基本から学びましょう。基本的なセレクターには、要素セレクター、クラスセレクター、IDセレクターなどがあります。
要素セレクター
要素セレクターは、HTMLの要素名を直接指定してスタイルを適用するものです。例えば、すべての<p>要素に対してスタイルを適用したい場合は、以下のようにセレクターを記述します。
p {
color: red;
font-size: 16px;
}
この方法は、ページ内のすべての<p>要素に一括でスタイルを適用できるので便利ですが、他の要素への影響も出てしまいます。より細かく要素を指定したい場合は、クラスセレクターやIDセレクターを使用するのがおすすめです。
クラスセレクター
クラスセレクターは、HTMLの要素にクラス属性を付与して、そのクラスに属する要素にスタイルを適用するものです。クラス名の前に「.」を付けて指定します。
<div class="box">ボックス</div>
.box {
width: 200px;
height: 100px;
background-color: #ccc;
}
クラスセレクターの特徴は、同じクラスを複数の要素に指定できることです。つまり、ページ内のすべての「.box」クラスが付与された要素に対して、一括でスタイルを適用できます。また、1つの要素に複数のクラスを指定することもできるので、クラス指定の組み合わせでスタイリングの幅が広がります。
IDセレクター
IDセレクターは、HTMLの要素にid属性を付与して、その要素にスタイルを適用するものです。ID名の前に「#」を付けて指定します。
<div id="main-content">メインコンテンツ</div>
#main-content {
width: 600px;
margin: 0 auto;
}
IDセレクターの特徴は、ページ内で1つの要素にしか適用できないことです。つまり、同じIDを複数の要素に付与することはできません。したがって、IDセレクターは特定の要素に対してスタイルを適用したい場合に使用するのが一般的です。IDセレクターは、要素セレクターやクラスセレクターよりも優先度が高いため、上書きされにくいというメリットもあります。
高度なセレクター
次に、より高度なセレクターについて見ていきましょう。ここでは、子孫セレクター、子セレクター、隣接セレクター、属性セレクターなどを取り上げます。
子孫セレクター
子孫セレクターは、指定した要素の子孫にあたる要素にスタイルを適用するものです。セレクターの間に空白を入れて記述します。
ul li {
list-style-type: none;
}
.parent > .child {
color: blue;
}
1つ目の例では、すべての<ul>要素の子孫にある<li>要素のリストスタイルを無くしています。2つ目の例では、「.parent」クラスの直接の子要素である「.child」クラスに青色のテキストカラーを適用しています。このように、子孫セレクターは階層構造にあるHTMLの要素を柔軟に選択できるので便利です。
子セレクター
子セレクターは、指定した要素の直接の子要素にのみスタイルを適用するものです。子孫セレクターと似ていますが、「>」を使って直接の子要素を指定する点が異なります。
div > p {
font-weight: bold;
}
この例では、<div>要素の直接の子要素である<p>要素にのみ太字のスタイルが適用されます。<div>要素の子孫にある<p>要素には影響がありません。子セレクターは、より細かく要素を指定したい場合に役立ちます。
隣接セレクター
隣接セレクターは、指定した要素の隣接する要素にスタイルを適用するものです。「+」を使って隣接する要素を指定します。
h2 + p {
text-indent: 1em;
}
この例では、<h2>要素の直後に続く<p>要素の最初の行が1文字分インデントされます。隣接セレクターは、特定の位置関係にある要素に対してスタイルを適用したい場合に便利です。
属性セレクター
属性セレクターは、指定した属性を持つ要素にスタイルを適用するものです。「[]」の中に属性名や値を指定して使用します。
a[target="_blank"] {
font-weight: bold;
}
input[type="text"] {
width: 200px;
}
1つ目の例では、「target」属性の値が「_blank」である<a>要素に太字のスタイルが適用されます。2つ目の例では、「type」属性の値が「text」である<input>要素の幅が200pxに設定されます。属性セレクターは、HTMLの属性を利用してスタイルを適用したい場合に役立ちます。
擬似クラス・擬似要素
さらに、CSSには擬似クラスや擬似要素というセレクターも用意されています。これらを使うと、より高度なスタイリングが可能になります。
擬似クラス
擬似クラスは、要素の状態や構造上の位置に基づいてスタイルを適用するためのものです。「:」を使って指定します。
| 擬似クラス | 説明 |
|---|---|
| :link | 未訪問のリンクにスタイルを適用 |
| :visited | 訪問済みのリンクにスタイルを適用 |
| :hover | マウスオーバー時にスタイルを適用 |
| :active | 要素がアクティブ化された時にスタイルを適用 |
擬似クラスを使うと、リンクの状態に応じてスタイルを変更したり、ホバー効果を付けたりできるので、ユーザーインターフェースの向上に役立ちます。
擬似要素
擬似要素は、実際にはHTMLに存在しない要素に対してスタイルを適用するためのものです。「::」を使って指定します。
p::before {
content: "注意: ";
color: red;
}
p::after {
content: "";
display: block;
border-bottom: 1px solid #ccc;
}
1つ目の例では、<p>要素の前に「注意:」という文字列を挿入し、赤色で表示しています。2つ目の例では、<p>要素の後に空の要素を挿入し、下線を引いています。擬似要素は、装飾的な効果を加えたり、注釈を付けたりする際に便利です。
まとめ
本記事では、CSSセレクターの基礎から応用までを解説してきました。要素セレクター、クラスセレクター、IDセレクターなどの基本から、子孫セレクター、子セレクター、隣接セレクター、属性セレクターといった高度なセレクター、さらには擬似クラスや擬似要素まで、さまざまなセレクターの使い方を紹介しました。
CSSセレクターを効果的に使いこなすことで、HTMLの要素をより柔軟に選択し、きめ細かなスタイリングが可能になります。初心者の方は、まずはチートシートを参考にしながら、基本的なセレクターから練習していくことをおすすめします。徐々にセレクターの種類を増やし、組み合わせて使えるようになれば、より高度なスタイリングにも対応できるようになるでしょう。
