前回CSSファイルを作って、HTMLとリンクできたよ！でも、あのCSSのコードってどういう仕組みになってるの？なんかルールがありそうだけど…
そうだよ。CSSには独自の文法ルールがあって、それを理解することが大事なんだ。特に「セレクター」っていう部分が重要で、これを使ってHTMLのどの要素にスタイルを適用するかを指定するんだよ。今回はその基本をしっかり押さえていこう！
セレクターって何？HTMLの要素を選ぶってこと？
その通り！セレクターは「スタイルを適用したい要素を指定する方法」なんだ。例えば「すべての見出しを青くしたい」とか「特定のボタンだけ大きくしたい」とか、そういう細かい指定ができるようになるよ。
CSSの基本文法を理解しよう
CSSを書く前に、まずはCSSがどのような構造になっているかを理解しましょう。CSSはルールセット（ruleset）という単位で記述し、各ルールセットには決まった書き方があります。
ルールセットの基本形
ルールセットの3つの要素について、もう少し詳しく見てみましょう：
- セレクター HTMLのどの要素にスタイルを適用するかを指定する部分。
h1（見出し1）、p（段落）、.intro（クラス名）などがある - プロパティ 変更したいスタイルの種類を指定する部分。
color（文字色）、font-size（文字サイズ）、text-align（テキスト揃え）など数百種類存在 - 値 プロパティに対して具体的にどのような内容にするかを指定する部分。
blue（青色）、20px（20ピクセル）、center（中央揃え）など - 記号 波括弧
{}でプロパティと値をまとめ、コロン:でプロパティと値を区切り、セミコロン;で各宣言を終了する
試してみよう
今学んだルールセットを使って、実際にh1タグのcolor: blue;の部分を変更して、見出しの色がどう変わるか試してみてください。
おお！CSSタブでコードを変更すると、プレビューがすぐに変わるんだね！color: blue;の部分を他の色に変えてみたら、見出しの色が変わった！
そうそう！それがCSSの面白いところなんだ。blueをredやgreenに変えたり、#ff0000のような色コードを使ったりもできるよ。どんどん試してみよう！
CSSコメントの書き方
CSSでは、コードに説明を付けるためのコメント機能があります：
/* これがCSSのコメントです */
h1 {
color: blue; /* 色を青に設定 */
}
/*
複数行に
わたるコメントも
書けます
*/- 目的 コードの説明や、一時的にスタイルを無効化
- 記法
/*で始まり*/で終わる - 活用 複雑なスタイルの意図を残すときに便利
- 注意 HTMLのコメント
<!-- -->とは書き方が違う
コメントの使い方はわかりましたが、実務ではいつ書けばいいですか？
実務では主に次のような3つのパターンで使うよ。
- 複雑なレイアウトの理由を説明したいとき
- TODO や調整が必要な箇所を記録するとき
- 一時的にスタイルを無効化するとき
長すぎると読みにくいから、簡潔に書くのがコツだよ。
セレクターの種類と使い方
ルールセットの書き方はわかったけど、セレクターってさっき言ってた「h1」以外にもあるの？
そうそう！セレクターには色々な種類があって、HTMLの要素を細かく指定できるんだ。主要なものを3つ紹介するよ。要素セレクター、クラスセレクター、IDセレクターの3つだね。
3つもあるんですね。どう使い分けるんですか？
用途によって使い分けるんだ。要素セレクターは「すべての見出し」、クラスセレクターは「特定のグループ」、IDセレクターは「1つだけの特別な要素」って感じかな。実際に見てみよう！
以下のプロパティを使ってセレクターの動作を確認します：
- color 文字の色を指定（例：
red、blue、green） - background-color 背景色を指定（例：
lightblue、lightgreen） - font-size 文字の大きさを指定（例：
16px、24px） - text-align 文字の位置を指定（例：
center、left、right）
これらのプロパティの詳しい使い方は、別のレッスンで学習します。今回はセレクターの動作に注目してください！
要素セレクター（タグセレクター）
要素セレクターは、HTMLタグ名をそのまま使ってスタイルを指定する最も基本的なセレクターです。ページ内のすべての該当するタグに同じスタイルが適用されるため、サイト全体の基本的なデザインを設定するのに最適です。
基本的な書き方
要素名 {
プロパティ: 値;
}- 特徴 HTMLタグ名をそのまま使用（h1、p、divなど）
- 記法 タグ名を直接記述
- 適用範囲 指定したタグすべてに適用される
- 用途 基本的なスタイルを一括で設定したいとき
実際のコード例
/* すべてのh1要素に適用 */
h1 {
color: blue;
font-size: 24px;
}
/* すべてのp要素に適用 */
p {
color: green;
font-size: 16px;
}対応するHTML（ハイライトされている箇所が対象要素）
<h1>これは見出しです</h1>
<p>これは段落です。</p>
<p>これも段落です。</p>
<div>これはdivタグ（スタイル適用外）</div>プレビューで確認(「コード編集」ボタンでコードを変更できるので、色々試してみてください)：
クラスセレクター
クラスセレクターは、HTMLのclass属性に付けた名前を使ってスタイルを指定します。同じクラス名を複数の要素に付けることで、統一されたデザインを効率的に適用でき、Webサイト制作において最も頻繁に使用されるセレクターです。
基本的な書き方
.クラス名 {
プロパティ: 値;
}- 特徴 ドット（.）に続けてクラス名を記述
- 適用範囲 同じクラス名を持つすべての要素
- 用途 特定のスタイルを複数の要素で共有したいとき
- 利点 再利用しやすく、保守性が高い。1つのCSSで複数の要素をスタイル可能
実際のコード例
/* クラス名が"intro"の要素に適用 */
.intro {
background-color: lightblue;
color: darkblue;
}
/* クラス名が"highlight"の要素に適用 */
.highlight {
background-color: darkgray;
color: white;
text-align: center;
}対応するHTML（ハイライトされている箇所が対象要素）
<p class="intro">これは導入文です</p>
<div class="highlight">重要な情報</div>
<div class="highlight">注目ポイント</div>
<p>クラスなしの普通の段落（スタイル適用外）</p>プレビューで確認
同じクラス名を複数の要素に付けることで、1つのCSSルールで複数の要素を同時にスタイルできます。上の例では、2つの異なる要素が同じ「highlight」デザインになります。
IDセレクター
IDセレクターは、HTMLのid属性に付けた名前を使ってスタイルを指定します。ページ内で唯一の特別な要素（ヘッダー、フッター、メインコンテンツなど）に使用し、特定性が高いため他のセレクターよりも優先的に適用されます。
基本的な書き方
#ID名 {
プロパティ: 値;
}- 特徴 ハッシュ（#）に続けてID名を記述
- 適用範囲 指定したIDを持つ1つの要素のみ
- 用途 ページ内で唯一の特別な要素をスタイルしたいとき
- 注意 HTMLでは同じIDを複数の要素に付けてはいけない
/* ID名が"site-header"の要素に適用 */
#site-header {
background-color: darkblue;
color: white;
text-align: center;
}
/* ID名が"main-content"の要素に適用 */
#main-content {
background-color: lightgray;
color: black;
}対応するHTML（ハイライトされている箇所が対象要素）
<header id="site-header">サイトのヘッダー</header>
<main id="main-content">
<h2>メインコンテンツ</h2>
<p>ここにコンテンツが入ります。</p>
</main>
<footer>IDなしのフッター（スタイル適用外）</footer>プレビューで確認
なるほど！3つのセレクターの違いがわかってきた。要素セレクターは「すべて」、クラスセレクターは「グループ」、IDセレクターは「1つだけ」って感じだね。
その通り！この使い分けを理解すると、CSSでできることが一気に広がるよ。例えば、ブログの記事で「導入文だけ目立たせたい」ときはクラスセレクター、「サイト全体のヘッダー」のようにページに1つしかないものはIDセレクターを使う感じだ。
IDセレクターとクラスセレクターって、どっちを使えばいいか迷いそうです…
基本的にはクラスセレクターを多用するのがおすすめだよ。IDセレクターは「ヘッダー」「フッター」みたいに、ページに1つしかない特別な部分に使う感じかな。迷ったらクラスを使っておけば大丈夫！
- 要素セレクター すべての同じタグに基本スタイルを設定（例：
h1、p） - クラスセレクター 特定のスタイルを複数の要素で共有（例：
.intro、.highlight） - IDセレクター ページ内で唯一の特別な要素に使用（例：
#header、#footer） - 迷ったらクラス 再利用性が高く、保守しやすいクラスセレクターを優先的に使用
これら3つの基本セレクターをマスターすることで、HTMLの要素に自在にスタイルを適用できるようになります。
実践：3つのセレクターを使ってみよう
今まで学んだセレクターを使って、実際に簡単なコードを書いてみよう！要素セレクター、クラスセレクター、IDセレクターをすべて使った例を一緒に確認してみるよ。
実際に使ってみると、どのセレクターがどう働くかよくわかりそう！
その通り！下のコードエディターで、3つのセレクターがどのように使われているか確認してみて。そして、色や文字サイズを変更してみよう！
セレクターの違いを確認しよう
- 要素セレクター（
p） 両方の段落が青色になる - クラスセレクター（
.special） 「特別な段落」だけ緑色の背景と文字色が適用される - IDセレクター（
#title） 見出しだけ赤色で中央揃えになる - 対象外 divタグはどのセレクターにも該当しないため、スタイルが適用されない
なるほど！同じpタグでも、クラスが付いている方は緑色の背景になるんですね。
そうそう！クラスセレクターは要素セレクターに追加でスタイルを適用できるんだ。色を変えたり、文字サイズを調整したりして、どう変わるか試してみよう！
理解度チェッククイズ
それでは、今回学んだCSSの基本文法とセレクターについて、理解度をチェックしてみよう！クイズを通して知識を定着させていこう。
CSS基本文法とセレクター ミニクイズ
h1 {
①
}<div class="button">普通のボタン</div>
<div class="button">普通のボタン</div>
<div id="special-button">特別なボタン</div>p {
color: blue
font-size: 16px;
}まとめ
CSS の基本文法とセレクターについて学んできたけど、思ったより奥が深いんだね！
そうだね！今回学んだのはCSSの基礎中の基礎だけど、これらをしっかり理解することで、美しいWebページを作る第一歩が踏めるんだ。特に重要なポイントを振り返ってみよう。
ルールセットの書き方とセレクターの使い分けが一番大切だと感じました。
まさにその通り！ルールセットの正しい書き方と、状況に応じたセレクターの選択ができれば、CSSの基本はバッチリだよ。実際のWebサイト制作でも、これらの知識は毎日使うからね。
- ルールセット セレクター、プロパティ、値の3つの要素でCSSを記述
- 要素セレクター すべての同じHTMLタグにスタイルを適用（例：
h1、p） - クラスセレクター 特定のスタイルを複数の要素で共有（例：
.button、.intro） - IDセレクター ページ内で唯一の特別な要素に使用（例：
#header、#footer） - 選択の基準 迷ったらクラスセレクターを選択し、再利用性を重視する
- 実践的な活用 基本スタイルは要素セレクター、デザイン要素はクラスセレクター、特別な箇所はIDセレクター
次回は、セレクターをより高度に組み合わせる技術について学んでいきましょう。