HTMLやCSSの記事を読んでいると、タグ、属性、class、セレクタ、プロパティ、値など、いろいろな言葉が出てきます。
最初は、用語を覚えるだけでも大変です。
けれど、これらの言葉は暗記するためのものではありません。
コードの中で、どの部分が何をしているのかを見分けるための目印です。
この記事では、HTMLに使うタグと、CSSに使うセレクタ・プロパティ・値を中心に、短いコードを分解しながら整理します。
この記事は、HTMLやCSSをこれから触る人、コピーしたコードのどこを直せばいいのか分からない人向けの基本メモです。専門用語を完璧に覚えるより、まずはコードの見分け方をつかむことを目的にしています。
HTMLとCSSは役割が違う
まず、HTMLとCSSは同じ「コード」でも役割が違います。
| 種類 | 役割 | イメージ |
|---|---|---|
| HTML | 文章、画像、リンク、見出しなど、ページの中身を作る | 骨組み・材料 |
| CSS | 色、余白、文字サイズ、配置など、見た目を整える | 装飾・デザイン |
見出しを置く、リンクを作る、画像を表示する。こうしたページの中身を作るのがHTMLです。
その見出しの色を変える、リンクに余白を付ける、画像の角を丸くする。こうした見た目を整えるのがCSSです。
この違いが分かると、コードを見たときに「これは中身の指定なのか」「これは見た目の指定なのか」を分けて考えられます。
HTMLを分解してタグを読む
HTMLでよく見る <a>、<img>、<li> などの記述をタグと呼びます。
タグは、「これはリンク」「これは画像」「これはリストの項目」と、その部分の役割をブラウザに伝えるためのものです。
<a class="entry-title" href="https://example.com/">最新記事を見る</a>この1行は、ただ文字を並べているわけではありません。
ブラウザに対して、「これはリンクです」「この文字を表示します」「リンク先はここです」と伝えています。
| 部分 | 名前 | 役割 |
|---|---|---|
<a class="entry-title" href="https://example.com/"> | 開始タグ | リンクの始まりと必要な情報を指定する |
a | タグ名 | リンクを表す |
class="entry-title" | class属性 | class が属性名、entry-title がclass名 |
href="https://example.com/" | href属性 | href が属性名、URL部分が属性値 |
最新記事を見る | 要素の中身 | 画面に表示されるリンクテキスト |
</a> | 終了タグ | リンクの終わりを示す |
<a ...> が開始タグ、</a> が終了タグです。開始タグ、中身、終了タグをまとめた全体が、1つのHTML要素になります。
HTMLを見るときは、まず「何のタグか」「どんな属性が付いているか」「画面に出る中身はどこか」を分けて見ると読みやすくなります。
classはCSSから指定するための目印
class="entry-title" のうち、class が属性名、entry-title がこの要素に付けたclass名です。
CSSと組み合わせると、このclass名が「どの部分のデザインを変えるのか」を見分けるための目印になります。
<a class="entry-title" href="https://example.com/">最新記事を見る</a>このHTMLに対して、CSSでは次のように書きます。
.entry-title {
color: #43577a;
}HTML側では class="entry-title" と書きます。
CSS側では、class名の前に . を付けて .entry-title と書きます。
このつながりが分かると、CSSがHTMLのどこに効いているのかを追いやすくなります。
CSSを分解してセレクタ・プロパティ・値を読む
CSSでは、HTMLのどこを変えるのかを指定して、見た目を調整します。
基本となるのが、どこを変えるかを示すセレクタ、何を変えるかを示すプロパティ、どのように変えるかを示す値です。
.entry-title {
color: #43577a;
font-size: 18px;
}CSSは、基本的に「誰を」「何を」「どう変えるか」で読みます。
| 部分 | 名前 | 役割 |
|---|---|---|
.entry-title | セレクタ | どのHTMLを変えるか指定する |
{ } | 波かっこ | この中にデザイン指定を書く |
color | プロパティ | 何を変えるか指定する |
#43577a | 値 | どのように変えるか指定する |
font-size | プロパティ | 文字サイズを変える項目 |
18px | 値 | 文字サイズの具体的な指定 |
; | セミコロン | 1つの指定の終わりを示す |
誰を変えるかがセレクタ。
何を変えるかがプロパティ。
どう変えるかが値です。
たとえば、次の指定は「.entry-title というclassが付いた部分の文字色を、#43577a にする」という意味です。
.entry-title {
color: #43577a;
}コードが長くなっても、基本の読み方は同じです。
セレクタを見て対象を確認し、プロパティと値を見て何を変えているのかを読みます。
よく出てくるセレクタの種類
CSSのセレクタには、いくつか種類があります。
最初に全部を覚える必要はありませんが、よく見るものだけでも意味を知っておくと、コードを読みやすくなります。
| 書き方 | 名前 | 意味 |
|---|---|---|
p | 要素セレクタ | <p> など、HTMLタグ名で指定する |
.entry-title | classセレクタ | class="entry-title" が付いた要素を指定する |
#main | idセレクタ | id="main" が付いた要素を指定する |
.entry-title:hover | 疑似クラス | マウスを乗せたときなど、状態を指定する |
.entry-title::before | 疑似要素 | 要素の前など、特定の部分をCSSから扱う |
特にclassセレクタの . はよく出てきます。
HTMLでは class="entry-title"、CSSでは .entry-title です。
この . を忘れると、class名を指定できません。
コピーしたCSSが効かないときは、HTML側のclass名とCSS側のセレクタがつながっているかを確認します。
初心者がつまずきやすい記号
HTMLやCSSでは、短い記号にも意味があります。
エラーの原因は、大きな考え方よりも、.、#、:、; の付け忘れだったりします。
| 記号 | 主な場所 | 意味 |
|---|---|---|
. | CSS | class名を呼び出す |
# | CSS / 色コード | idを呼び出す、または色コードに使う |
: | CSS | 疑似クラスや、プロパティと値の区切りに使う |
:: | CSS | 疑似要素に使う |
{ } | CSS | セレクタに対する指定をまとめる |
; | CSS | 1つの指定の終わりを示す |
" " | HTML / CSS | 属性値や文字列を囲む |
たとえば、次のCSSでは color と #43577a の間に : が必要です。
また、指定の最後には ; を付けます。
.entry-title {
color: #43577a;
}CSSが効かないときは、いきなり難しい原因を疑う前に、記号の付け忘れや書き間違いを見ます。
疑似クラスは状態や順番を指定する
疑似クラスは、HTMLに直接書かれていない「状態」や「順番」をCSSで指定するためのものです。
.entry-title:hover {
color: red;
}:hover は、マウスを乗せたときの状態を指定する疑似クラスです。
この例では、リンクにマウスを乗せたときだけ文字色が赤くなります。
.entry-item:nth-child(1) {
color: red;
}:nth-child(1) は、親要素の中で1番目にある子要素を指定する疑似クラスです。
この例では、1番目の子要素に entry-item というclassが付いている場合に適用されます。
疑似クラスは、HTMLそのものを書き換えるのではなく、CSS側で状態や順番を見て指定します。
疑似要素はCSSから一部を作る
疑似要素は、指定した要素の一部をCSSから扱うための仕組みです。
.entry-title::before {
content: "NEW";
}::before を使うと、指定した要素の前に内容を追加できます。
この例では、タイトルの前に NEW という文字を表示します。
HTML本文を書き換えずに装飾用の文字や記号を足せるため、見出しの前にマークを付けたいときなどに使います。
疑似クラスは :hover のようにコロン1つ、疑似要素は ::before のようにコロン2つで書く形をよく見ます。まずは、状態を指定するのが疑似クラス、一部を作る・扱うのが疑似要素と分けて考えると整理しやすくなります。
ボックスモデルは余白を考えるための基本
CSSでは、文字や画像などの要素を箱として考えます。
この箱の内側や外側に余白を作る考え方が、ボックスモデルです。
.entry-item {
padding: 15px;
margin-bottom: 20px;
}| 用語 | 役割 |
|---|---|
padding | 箱の内側の余白 |
margin | 箱の外側の余白 |
padding は、中身と枠の間にゆとりを作ります。margin は、要素同士の間隔を作ります。
余白が思った通りにならないときは、「内側の余白なのか」「外側の余白なのか」を分けて見ると整理しやすくなります。
コピーしたコードを直すときの見方
コードを読むときは、いきなり全体を理解しようとしなくて大丈夫です。
まずは、次の順番で見ます。
- これはHTMLなのか、CSSなのか
- HTMLなら、どのタグにどんなclass名が付いているのか
- CSSなら、どのセレクタを指定しているのか
- そのセレクタはHTML側のclass名やid名とつながっているのか
- どのプロパティを変えているのか
- 値を変えれば、目的の表示に近づくのか
たとえば、文字色だけを変えたいなら、まず color を探します。
余白を変えたいなら、margin や padding を見ます。
逆に、どこに効いているか分からないCSSを直すときは、セレクタを見ます。.entry-title と書かれているなら、HTML側に class="entry-title" があるかを確認します。
CSSを直すときは、先にセレクタで対象を確認します。そのうえで、プロパティと値を見れば、どこを変えればいいのか判断しやすくなります。
コードは分解すると読みやすくなる
HTMLやCSSの用語は、ひとつずつ見ると難しく感じます。
けれど、実際のコードの中で見ると、それぞれの役割は見分けやすくなります。
| 用語 | 見るポイント |
|---|---|
| タグ | HTMLでどのような役割を表しているか |
| 属性 | HTMLにどんな情報を追加しているか |
| class | CSSから指定するためにどんな名前が付いているか |
| セレクタ | CSSでどの部分を指定しているか |
| プロパティ | 何を変えようとしているか |
| 値 | どのように変えようとしているか |
| 疑似クラス | 状態や順番を指定しているか |
| 疑似要素 | 要素の一部をCSSから扱っているか |
コードが読みにくいときは、まず「これはHTMLなのかCSSなのか」「どこを指定しているのか」「何を変えようとしているのか」を分けて見ます。
それだけでも、コピーしたコードを少し直したいときや、自分のサイトのデザインを調整したいときに、触る場所を見つけやすくなります。
参考にしやすい公式リファレンス
この記事では、コードを読むための基本だけを整理しました。
HTMLやCSSの仕様を詳しく確認したい場合は、MDN Web Docsのリファレンスを見ると確認しやすいです。
最初から公式リファレンスを全部読む必要はありません。
分からない用語が出てきたときに、少しずつ確認していけば十分です。
まとめ｜用語は暗記ではなく、コードを読むための目印
HTMLやCSSの基本用語は、最初からすべて暗記する必要はありません。
HTMLで使うタグは、その部分の役割をブラウザに伝えます。
CSSでは、セレクタでどこを変えるかを指定し、プロパティで何を変えるか、値でどのように変えるかを指定します。
タグ、セレクタ、プロパティ、値は、コードの中で「どの部分が何をしているのか」を知るための目印です。
コードが分からなくなったときは、いきなり全体を理解しようとせず、短く分けて見ます。
これはHTMLなのかCSSなのか。
どこを指定しているのか。
何を変えようとしているのか。
そこから見ていけば、コピーしたコードを直すときも、自分のサイトのデザインを調整するときも、触る場所を見つけやすくなります。
コメント