仕組みを知るためのHTML・CSS基本用語集

HTMLとCSSに関わる言葉の意味

HTMLやCSSを書き進める上で、避けては通れない「名前」があります。
これらは、ブラウザ（画面）に対して「ここを、こうしてほしい」と正確に伝えるための共通のルール（言葉）です。

意味を知らなくてもコードは書けますが、言葉の役割を正しく知ることで、迷わずにデザインを支配できるようになります。

用語	読み（役割）	解釈
タグ (Tag)	標識	`< >` で囲まれた記号。`<a>` や `<li>` そのもの。
セレクタ (Selector)	照準	CSSで「誰を」変えるか指名する名前。`.entry-title` など。
疑似クラス (Pseudo-class)	状態の指定	`:nth-child(1)` や `:hover`。特定の順番や、その時の状態を精密に指定する。
プロパティ (Property)	属性	`color` や `font-size`。何を変えるかという「項目」。
値 (Value)	数値・設定	`#43577a` や `18px`。プロパティに与える「具体的な中身」。

「では、これらの言葉が実際のコードの中でどのように機能しているのか。その『設計図の解剖』を見てみましょう。」

.entry-title{color: #43577a;}

名前は難しいですが、やっていることは単純です。
カッコの中に数字を書くことや、文字を後から付け足すこと。
その一つひとつの動作に、たまたま世界共通の難しい名前がついているだけなのです。

用語	読み（役割）	解釈
疑似要素	新しい要素の生成	HTMLに直接書かなくても、CSSを使って「文字」や「記号」を後から付け足す機能。
ボックスモデル	余白の仕組み	すべての文字や画像は「透明な箱」に入っているという考え方。箱の周りのスキマ（余白）のルール。
カッコ内の数字	（引数・ひきすう）	`nth-child(1)` の `(1)` のこと。具体的に「何番目か」を指さして教えるための数字。
設定の一行	（宣言・せんげん）	`color: #43577a;` のように、色やサイズの「指示を一文にまとめたもの」。

HTMLを書き換えなくても、CSSで ::before を使えば、タイトルの前に「NEW」や「■」などの記号を後から付け足せます。

例：.entry-title::before { content: “NEW”; } /* タイトルの前にNEWを表示 */

padding（内側の余白）を調整すれば、箱の中身を窮屈にせず、読みやすいスキマを作れます。

例：.entry-item { padding: 15px; } /* 箱の中に15pxのゆとりを作る */

nth-child(1) のように、カッコの中に「何番目か」を指さす数字を書くだけで、特定のターゲットを指定します。

例：.entry-item:nth-child(1) { color: red; } /* 1番目の項目だけ赤くする */

color: #43577a; という一行の指示を書くことが、ブラウザへの正式な命令になります。

例：.entry-title { color: #43577a; } /* タイトルを群青色にする指示 */

言葉の意味を知ることは、ブラウザを自由に操るための第一歩です。

最初は難しく感じるかもしれませんが、一つひとつのプロパティや値を積み重ねていけば、理想のデザインは必ず形になります。