・CSSを書いたのに反映されない
・なぜこの要素だけ変わらないのか分からない
・どこを指定しているのか曖昧

その原因の多くは、
CSSセレクタの理解不足にあります。

この記事では、
CSSの中核となる
セレクタの基本（要素 / class / id） を整理し、
「なぜこのCSSが当たるのか」を説明できる状態を目指します。

この記事で学べること

・CSSセレクタとは何か
・要素セレクタ
・classセレクタ
・idセレクタ
・正しい使い分けの考え方

CSSセレクタとは何か

CSSセレクタとは、
「どのHTML要素にスタイルを適用するか」
を指定するための仕組みです。

CSSは、
「誰に」「何を」適用するか
をセットで指定しています。

・セレクタ：誰に
・スタイル：何を

この関係を理解することが重要です。

要素セレクタとは

要素セレクタは、
HTMLタグそのものを指定する方法です。

例
・p
・h1
・a

など、タグ名をそのまま使います。

要素セレクタの特徴

要素セレクタの特徴は次のとおりです。

・同じタグすべてに適用される
・広範囲に影響する
・デザインのベース指定に向いている

ページ全体の
「基本ルール」を決めるときに使われます。

classセレクタとは

classセレクタは、
class属性を持つ要素を指定する方法です。

HTML側で付けた class を使って、
特定のグループにスタイルを当てます。

classセレクタの特徴

classセレクタの特徴は次のとおりです。

・複数の要素に使える
・最もよく使われる
・柔軟にデザイン指定できる

実務では、
CSS指定の中心は class になります。

idセレクタとは

idセレクタは、
id属性を持つ要素を指定する方法です。

idは、
ページ内で一意（1回のみ）
というルールがあります。

idセレクタの特徴

idセレクタの特徴は次のとおりです。

・1ページに1つだけ
・強い指定になる
・ピンポイント指定向き

ただし、
CSSでは 多用しません。

class と id の使い分け

ここで、
多くの初心者が迷うポイントを整理します。

・class
　複数要素
　デザイン指定の基本

・id
　単一要素
　JavaScriptやリンク用途が中心

CSSでは、
「迷ったら class」
が基本ルールです。

なぜidセレクタは避けられがちなのか

idセレクタは便利ですが、
CSSでは次の理由から控えめに使われます。

・指定が強すぎる
・後から上書きしづらい
・再利用できない

そのため、
CSS設計では
class中心の指定が推奨されます。

セレクタの強さ（優先順位）

CSSには、
どの指定が優先されるか
というルールがあります。

基本的な強さは次の順です。

・要素セレクタ
・classセレクタ
・idセレクタ

強い指定ほど、
他のCSSを上書きします。

CSSが効かないときの考え方

CSSが効かない場合、
次の順で確認してください。

・そもそも指定している要素は合っているか
・class名やid名に間違いはないか
・他のCSSに上書きされていないか

この切り分けができるようになると、
CSSのトラブルは激減します。

HTMLとCSSは必ずセットで考える

CSSセレクタは、
HTMLの構造が分かっていないと使えません。

・HTMLで何にclassを付けたか
・どのタグが使われているか

CSSを書くときは、
必ずHTMLと行き来しながら考えましょう。

初心者がよくやるミス

よくあるミスを整理します。

・idを多用してしまう
・意味のないclass名を付ける
・どこに効いているか分からない

これらはすべて、
セレクタの役割を意識することで防げます。

まとめ

CSSセレクタは、
CSSの中で最も重要な要素のひとつです。

・要素セレクタ：全体ルール
・classセレクタ：基本の指定
・idセレクタ：限定的な指定

この使い分けを理解できれば、
CSSが「なんとなく」ではなく
論理的に書ける ようになります。

次は、
CSS理解の最大の壁である
ボックスモデル に進みます。

次に読むべき記事

▶ 次の記事
4-4 ボックスモデルを完全に理解する

▶ 関連記事
4-2 CSSの書き方（inline / internal / external）
3-3 HTML属性とは？class・id・nameの違い

・class
・id
・name

「何となく見たことはあるけど、
何が違うのかよく分からない」
という状態になりやすい部分です。

しかし、
この 属性の理解 は、
CSS・JavaScript・PHPすべてに直結します。

この記事では、
HTML属性とは何かから始めて、
class・id・name の役割と使い分けを
初心者向けに整理して解説します。

この記事で学べること

・HTML属性とは何か
・class の役割
・id の役割
・name の役割
・それぞれの正しい使い分け

HTML属性とは何か

HTML属性とは、
タグに追加情報を与えるためのものです。

タグだけでは表現できない情報を、
属性として指定します。

例としては、

・どこにリンクするか
・どのグループに属するか
・どの名前でデータを送るか

といった情報を属性で指定します。

属性はタグの「補足情報」

HTMLタグが「名詞」だとすると、
属性は「説明文」のようなものです。

・タグ：要素の種類
・属性：その要素の性質や役割

という関係になります。

class属性とは何か

class は、
複数の要素をまとめて扱うための属性です。

主に次の用途で使われます。

・CSSでデザインを指定する
・JavaScriptで要素を取得する

classの特徴

class には、次の特徴があります。

・同じ名前を複数の要素に使える
・デザイン指定に最もよく使われる
・1つの要素に複数指定できる

「この見た目のグループ」
を作るイメージです。

id属性とは何か

id は、
ページ内で唯一の要素を識別するための属性です。

idの特徴

id には、次のルールがあります。

・同じページ内で1回しか使えない
・特定の1要素を指定する
・JavaScriptやアンカーリンクで使われる

「このページでこの1つ」
を指し示すための属性です。

class と id の違いまとめ

ここで、
class と id の違いを整理します。

・class
　複数要素に使える
　主にデザインやグループ指定

・id
　1ページに1つだけ
　特定要素の識別

初心者のうちは、
迷ったら class を使う
くらいの感覚で問題ありません。

name属性とは何か

name は、
フォーム送信時に使われる属性です。

特に、
PHPなどのサーバー側処理と強く関係します。

nameの役割

フォームで入力された値は、
name 属性をキーとして
サーバーに送信されます。

そのため、
name がなければ、
入力された値を受け取ることができません。

class・id・name の使い分けイメージ

役割を簡単に整理すると、次のようになります。

・class
　見た目・グループ分け

・id
　ページ内の目印

・name
　データ送信用の名前

それぞれ目的が違うため、
同じ名前を付ける必要はありません。

初心者がよくやる間違い

ここで、
よくあるミスを押さえておきましょう。

idを何度も使ってしまう

idは、
ページ内で1回だけが原則です。

複数使いたい場合は、
classを使いましょう。

デザイン目的でnameを使う

nameは、
見た目指定には使いません。

CSSやJavaScriptで扱う場合は、
class や id を使います。

何となく全部付けてしまう

必要のない属性を
何となく付けると、
後で管理が大変になります。

「何のために使うのか」
を意識して付けることが大切です。

なぜ属性の理解が重要なのか

この理解があいまいだと、

・CSSが思った通りに効かない
・JavaScriptで要素が取得できない
・PHPでフォームの値が受け取れない

といった問題が起きます。

逆に言えば、
ここを理解できれば
Web開発の基礎が一気に安定します。

まとめ

HTML属性は、
タグに意味と役割を追加する重要な要素です。

・class：グループ・デザイン用
・id：ページ内で唯一の識別子
・name：データ送信用

この使い分けを意識することで、
CSS・JavaScript・PHPの理解が
自然につながっていきます。

次は、
HTMLでよく使うタグを実際に組み合わせる方法
を学んでいきましょう。

次に読むべき記事

▶ 次の記事
3-4 HTMLでよく使うタグ一覧と基本的な使い方

▶ 関連記事
3-2 HTMLの基本構造と必須タグを理解しよう