HTMLとCSSのコードを分解して読む｜タグ・セレクタ・プロパティ・値の基本

HTMLやCSSを学び始めると、タグ、セレクタ、プロパティ、値など、聞き慣れない言葉がたくさん出てきます。

最初は「名前を覚えるだけでも大変」と感じるかもしれません。
けれど、これらの言葉は暗記するためのものではなく、コードの中でどの部分が何をしているのかを見分けるための目印です。

この記事では、HTMLとCSSの基本用語をただ並べるのではなく、実際のコードを分解しながら確認していきます。

この記事は、HTMLやCSSをこれから触る人、コードを見ても「どこが何の役割なのか分からない」と感じる人向けの基本メモです。

HTMLとCSSは役割が違う

まず、HTMLとCSSは同じ「コード」でも役割が違います。

たとえば、見出しやリンク、リスト、画像などを置くのがHTMLです。
その見出しの色を変えたり、リンクに余白を付けたり、画像の角を丸くしたりするのがCSSです。

この違いが分かると、コードを見たときに「これは中身の指定なのか」「これは見た目の指定なのか」を分けて考えやすくなります。

HTMLの基本｜タグ・属性・中身

HTMLでは、文章や画像などをタグで囲んで意味を持たせます。

<a class="entry-title" href="https://example.com/">最新記事を見る</a>

この1行には、いくつかの役割が入っています。

ここで大事なのは、HTMLはただ文字を並べているのではなく、ブラウザに対して「これはリンクです」「この文字を表示します」と意味を伝えていることです。

classはCSSから呼び出すための名前

class="entry-title" は、HTML側で付けた名前です。
この名前をCSSから呼び出すことで、「この部分だけ色を変える」「この部分だけ余白を付ける」といった指定ができます。

HTMLだけを見るとただの名前ですが、CSSと組み合わせると、デザインを当てるための目印になります。

CSSの基本｜セレクタ・プロパティ・値

次にCSSです。CSSでは、HTMLのどこを変えるのかを指定して、見た目を調整します。

.entry-title {
  color: #43577a;
  font-size: 18px;
}

CSSは、基本的にこの形で読みます。

誰を変えるかがセレクタ。
何を変えるかがプロパティ。
どう変えるかが値です。

HTMLとCSSをつなげて読む

HTMLとCSSは別々に書きますが、実際にはつながっています。

HTML側に、このようなコードがあるとします。

<a class="entry-title" href="https://example.com/">最新記事を見る</a>

そしてCSS側に、このようなコードを書きます。

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

この場合、HTMLの class="entry-title" と、CSSの .entry-title がつながっています。

HTMLでは entry-title という名前を付け、CSSではその名前を . を付けて呼び出します。
その結果、「最新記事を見る」というリンク文字の色が #43577a に変わります。

class名をCSSで呼び出すときは、先頭に . を付けます。HTML側では class="entry-title"、CSS側では .entry-title と書くのがポイントです。

初心者がつまずきやすい用語

ここからは、HTMLとCSSを触り始めたときにつまずきやすい用語を、短い例と一緒に整理します。

疑似クラス｜状態や順番を指定する

疑似クラスは、HTMLに直接書かれていない「状態」や「順番」をCSSで指定するためのものです。

.entry-title:hover {
  color: red;
}

:hover は、マウスを乗せたときの状態を指定する疑似クラスです。
この例では、リンクにマウスを乗せたときだけ文字色が赤くなります。

.entry-item:nth-child(1) {
  color: red;
}

:nth-child(1) は、同じ並びの中で1番目の要素を指定する疑似クラスです。
カッコの中の数字で「何番目か」を指定しています。

疑似要素｜CSSで中身を付け足す

疑似要素は、HTMLに直接書かなくても、CSS側から文字や記号を付け足すための仕組みです。

.entry-title::before {
  content: "NEW";
}

::before を使うと、指定した要素の前に内容を追加できます。
この例では、タイトルの前に NEW という文字を表示します。

HTMLを書き換えずに装飾用の文字を足せるので、見出しの前に記号を付けたいときなどに使われます。

ボックスモデル｜余白を考えるための箱

CSSでは、文字や画像などの要素を「箱」として考えます。
この箱の中や外に余白を作る考え方が、ボックスモデルです。

.entry-item {
  padding: 15px;
  margin-bottom: 20px;
}

padding は中身と枠の間にゆとりを作ります。
margin は要素同士の間隔を作ります。

余白が思った通りにならないときは、「内側の余白なのか」「外側の余白なのか」を分けて考えると整理しやすくなります。

コードは分解すると読みやすくなる

HTMLやCSSの用語は、ひとつずつ見ると難しく感じます。
けれど、実際のコードの中で見ると、役割はかなりはっきりしています。

コードが読みにくいときは、いきなり全体を理解しようとしなくても大丈夫です。
まずは「これはHTMLなのかCSSなのか」「どこを指定しているのか」「何を変えようとしているのか」を分けて見るだけでも、かなり読みやすくなります。

まとめ｜用語は暗記ではなく、コードを読むための目印

HTMLやCSSの基本用語は、最初からすべて暗記する必要はありません。

タグ、属性、セレクタ、プロパティ、値。
これらは、コードの中で「どの部分が何をしているのか」を知るための目印です。

意味が分かってくると、コピーしたコードを少し直したいときや、自分のサイトのデザインを調整したいときに、どこを触ればいいのか見つけやすくなります。

HTMLとCSSは、難しい言葉を覚えるためのものではなく、自分の作りたい表示に少しずつ近づけるための道具です。
まずは短いコードを分解しながら、ひとつずつ役割を見ていくのが良いと思います。