1. タイプセレクタ (Type Selectors)
CSSのセレクタはHTML要素を選択してスタイルを適用するためのものだよ。基本的なセレクタを知ることで、ページ上の要素を効率的かつ正確に選択できて、CSSがウェブコンテンツをスタイリングするための強力なツールになるんだ。この講義ではタイプセレクタ、クラスセレクタ、IDセレクタ、グループセレクタ、ユニバーサルセレクタを見ていくよ。
タイプセレクタは特定のタグのすべての要素を選択するよ。例えば、ページ内のすべての段落にスタイルを適用したい場合、<p>タグのタイプセレクタを使うよ。
p {
color: blue;
font-size: 16px;
}
<p>このテキストは青色でサイズは16ピクセルだよ。</p>
<p>同じスタイルの2つ目の段落だよ。</p>
タイプセレクタは、特定の種類のすべての要素、例えばすべての見出しや段落にスタイルを適用したいときに便利だよ。要素のグループ全体の見た目を簡単に管理できるんだ。
2. クラスセレクタ (Class Selectors)
クラスセレクタは特定のclass属性値を持つ要素を選択するよ。クラスは名前の前にドット (.) が付いているよ。同じクラスを複数の要素で使うことができるから、複数の要素に同じスタイルを適用するのに便利。
.highlight {
background-color: yellow;
color: blue;
font-weight: bold;
}
<p class="highlight">このテキストは黄色の背景に青色で強調されてるよ。</p>
<p>クラスがない普通のテキストだよ。</p>
<div class="highlight">このブロックもhighlightクラスのスタイルが適用されるよ。</div>
クラスセレクタは汎用性が高くて便利だよ。クラスを使えば、関連のない要素のグループにスタイルを簡単に適用できるんだ。
3. IDセレクタ (ID Selectors)
IDセレクタは特定のid属性値を持つ要素を選択するよ。IDは名前の前に#が付いてるよ。クラスとは違って、IDはページ内で一意でなければならないから、見出しやナビゲーションバーみたいなユニークな要素のスタイリングに最適だよ。
#main-header {
font-size: 24px;
color: green;
text-align: center;
}
<h1 id="main-header">ページの見出し</h1>
<p>この段落はIDセレクタの影響を受けないよ。</p>
IDセレクタはページ内の1つの要素にだけスタイルを適用するから、特定のユニークな要素を明確にスタイリングしたいときに使われるよ。
4. グループセレクタ (Group Selectors)
グループセレクタは複数の要素に同じスタイルを同時に適用することができるよ。カンマを使っていくつかのセレクタを1つのCSSルールにまとめることで実現するんだ。グループセレクタを使うとコードが簡素化されて、複数のタイプの要素に共通のスタイルを適用できるよ。
h1, h2, h3 {
color: navy;
font-family: Arial, sans-serif;
}
<h1>第一レベルの見出し</h1>
<h2>第二レベルの見出し</h2>
<h3>第三レベルの見出し</h3>
<p>このテキストはグループセレクタの影響を受けないよ。</p>
グループセレクタはCSSコードを短縮してスタイリングを簡略化してくれるよ。特に、複数の見出しレベルみたいな異なる要素に同じプロパティを適用したい場合に便利だよ。
5. ユニバーサルセレクタ (Universal Selectors)
ユニバーサルセレクタはアスタリスク (*) で表されて、ページ内のすべての要素を選択するよ。これを使えば、すべての要素に基本的なスタイルをすばやく設定できるんだ。例えば、同じマージンや標準のフォントを設定するために使えるよ。ユニバーサルセレクタは、ブラウザのデフォルトのマージンやパディングをリセットする（reset）ときに特に役立つんだ。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<h1>見出し</h1>
<p>マージンとパディングがゼロ設定されている段落。</p>
<div>マージンとパディングがゼロ設定されているコンテナ。</div>
この例では、ユニバーサルセレクタがすべての要素のマージンとパディングをリセットしているよ。そのおかげでページ全体のスタイルが一貫性を保てるようになるんだ。このテクニックはCSSコードの最初に使われることが多いよ。
GO TO FULL VERSION