「CSSタグの一覧を見たい」と検索したものの、HTMLタグやCSSプロパティが混ざった説明ばかりで迷っていませんか？
最初に結論をお伝えすると、CSSそのものに「タグ」はありません。HTMLのタグから作られる要素をCSSの「セレクター」で選び、「プロパティ」と「値」で見た目を変更します。
この記事では、よく使うHTMLタグ、CSSセレクター、CSSプロパティを役割別に整理します。最後に小さなカードを作る実例も掲載するので、用語を覚えるだけでなく実際の書き方まで確認できます。
CSSタグとは？HTMLタグ・セレクター・プロパティの違い
HTMLはページの意味と構造を作り、CSSはその見た目を整えます。まずは次のHTMLを見てください。
<p class="message">CSSを練習中です</p><p>と</p>がHTMLタグです。開始タグから終了タグまでのまとまりはHTML要素と呼び、class="message"は要素へ追加情報を与える属性です。
この要素の文字色と余白を変えるCSSは次のように書きます。
.message {
color: #1d4ed8;
padding: 1rem;
}.message：装飾する要素を選ぶセレクターcolorとpadding：何を変えるかを示すプロパティ#1d4ed8と1rem：どのように変えるかを示す値
上の図のように、CSSはHTMLの中から対象を選び、その対象へ色・余白・大きさなどを適用します。「CSSタグ」と呼ばれているものは、実際にはHTMLタグを指定する要素型セレクターを指すことが多いです。
初心者がよく使うHTMLタグ一覧
HTMLには多くの要素がありますが、最初からすべてを暗記する必要はありません。まずはページの骨組み、文章、リンク、画像、リスト、フォームで使うタグを押さえましょう。
ページの骨組みを作るタグ
| タグ | 役割 |
|---|---|
<html> | HTML文書全体のルートを表す |
<head> | 文字コードやタイトルなどページ情報をまとめる |
<body> | ブラウザに表示する内容をまとめる |
<header> | ページやセクションの導入部分を表す |
<nav> | 主要なナビゲーションを表す |
<main> | ページ固有の主要コンテンツを表す |
<section> | 見出しを持つ内容のまとまりを表す |
<article> | 単独で配信・再利用できる記事を表す |
<footer> | ページやセクションの末尾情報を表す |
文章とリンクを作るタグ
| タグ | 役割 |
|---|---|
<h1>〜<h6> | 見出しを重要度順に表す |
<p> | 文章の段落を表す |
<a> | 別ページやページ内位置へのリンクを作る |
<strong> | 内容の強い重要性を表す |
<em> | 言葉の強調を表す |
<span> | 文章の一部を意味を追加せずまとめる |
<br> | 詩や住所など意味のある位置で改行する |
画像・リスト・フォームのタグ
| タグ | 役割 |
|---|---|
<img> | 画像を埋め込む |
<figure> | 画像や図など自己完結した内容をまとめる |
<ul> | 順番に意味がない箇条書きを作る |
<ol> | 手順など順番のあるリストを作る |
<li> | リストの各項目を表す |
<form> | 入力欄と送信処理をまとめる |
<label> | 入力欄の名前を表す |
<input> | 一行入力やチェックボックスを作る |
<button> | 操作を実行するボタンを作る |
タグは見た目で選ぶのではなく、内容の意味に合うものを使います。たとえば、文字を太く見せたいだけならCSSのfont-weightを使い、内容の重要性を示したいときに<strong>を使います。
CSSでHTMLタグを指定するセレクター一覧
セレクターを使うと、同じHTMLの中から「すべての段落」「特定のクラス」「マウスが重なったリンク」のように対象を絞れます。
| 種類 | 例 | 選ぶ対象 |
|---|---|---|
| 要素型 | p | すべての<p>要素 |
| クラス | .card | class="card"を持つ要素 |
| ID | #main | id="main"を持つ要素 |
| 全称 | * | すべての要素 |
| 属性 | input[type="email"] | 指定した属性や値を持つ要素 |
| 子孫 | .card p | .card内にあるすべてのp |
| 子 | .menu > li | .menuの直下にあるli |
| 隣接兄弟 | h2 + p | h2の直後にある1つのp |
| 一般兄弟 | h2 ~ p | h2より後にある同階層のp |
| 擬似クラス | a:hover | マウスが重なったリンクなど特定の状態 |
| 擬似要素 | p::first-line | 要素の一部分や生成する一部分 |
要素型・クラス・IDの使い分け
要素型セレクターはページ全体の基本スタイルに向きます。部品ごとの装飾は、複数の要素で再利用できるクラスセレクターを中心にすると管理しやすくなります。
p {
line-height: 1.8;
}
.card {
padding: 1.5rem;
}
#main {
max-width: 72rem;
}IDは同じページ内で一意にします。詳細度が高く上書きしにくいため、再利用するデザインはクラスで指定するのが基本です。
状態を表す擬似クラス
:hoverはマウスが重なった状態、:focus-visibleは主にキーボード操作でフォーカスが見えるべき状態を選びます。
.button:hover {
background-color: #1e40af;
}
.button:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}マウス操作だけでなく、キーボードでも現在位置が分かる見た目を残しましょう。outline: none;だけを書いてフォーカス表示を消すのは避けます。
初心者がよく使うCSSプロパティ一覧
プロパティは「何を変更したいか」で探すと見つけやすくなります。最初によく使うものを目的別にまとめました。
| 目的 | 主なプロパティ | 役割 |
|---|---|---|
| 文字 | color、font-size、font-weight、line-height | 文字色・大きさ・太さ・行間を整える |
| 背景と枠 | background-color、border、border-radius | 背景色・境界線・角丸を付ける |
| 余白 | margin、padding、gap | 外側・内側・要素間の空間を作る |
| 大きさ | width、max-width、min-height | 幅や高さの範囲を決める |
| 配置 | display、justify-content、align-items | 要素の並び方や揃え方を決める |
| 画像 | object-fit、aspect-ratio | 画像の比率や切り抜き方を整える |
| 操作 | cursor、transition、opacity | 操作の手がかりや変化を付ける |
各プロパティのコード例やFlexbox・Grid・レスポンシブ対応まで確認したい場合は、次の一覧を辞書として使ってください。
HTMLタグとCSSを使ってカードを作る
ここまでの内容を使い、記事カードを作ってみましょう。変更前はHTMLだけなので、見出し・説明・リンクが縦に表示されます。
<article class="card">
<h2 class="card__title">CSS入門</h2>
<p class="card__text">基本の書き方を練習します。</p>
<a class="card__link" href="/css/">記事を読む</a>
</article>次のCSSを追加します。要素型セレクターではなくカード専用のクラスを使うため、ほかの見出しやリンクへ影響しません。
.card {
max-width: 24rem;
padding: 1.5rem;
border: 1px solid #cbd5e1;
border-radius: 1rem;
background-color: #ffffff;
box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
}
.card__title {
margin: 0;
color: #0f172a;
font-size: 1.5rem;
}
.card__text {
margin-block: 0.75rem 1.25rem;
color: #475569;
line-height: 1.8;
}
.card__link {
display: inline-block;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
color: #ffffff;
background-color: #2563eb;
text-decoration: none;
}変更後は、カード全体に枠線・余白・影が付き、リンクはボタンのように見えます。HTMLで内容の意味を作り、CSSで見た目だけを変更している点がポイントです。
画面が狭くてもはみ出しにくいよう、固定のwidthではなくmax-widthを使いました。さらに必要なら、親要素側でwidth: 100%;を指定します。
CSSタグ一覧を使うときのよくある間違い
タグ名だけで部品を装飾する
aやpのような要素型セレクターは、ページ内の同じ要素すべてへ影響します。ボタンやカードなど特定の部品だけを変える場合は、.buttonや.cardのようなクラスを付けましょう。
見た目だけでHTMLタグを選ぶ
大きな文字にしたいから<h1>を使う、余白を作りたいから<br>を連続させる、といった書き方は避けます。HTMLは意味で選び、見た目はCSSで調整してください。
古い装飾用タグを使う
<font>や<center>など、現在は非推奨・廃止扱いの装飾用要素があります。古いサンプルをそのまま使わず、文字色はcolor、中央揃えは用途に応じてtext-alignやFlexboxで指定します。
すべてをdivとspanで作る
<div>と<span>は便利ですが、それ自体には特別な意味がありません。見出しは<h2>、リンクは<a>、操作ボタンは<button>のように適切な要素を使うと、読み上げソフトやキーボードでも内容を理解しやすくなります。
タグやセレクターを調べる方法
一覧を丸暗記するより、目的に応じて公式リファレンスを調べる習慣を付けるほうが実践的です。HTML要素はMDNのHTML要素リファレンス、CSSの指定方法はMDNのCSSセレクターで確認できます。
検索するときは「CSSタグ」ではなく、「CSS セレクター 一覧」「CSS 文字色 プロパティ」「HTML 画像 タグ」のように、技術名・目的・知りたい種類を組み合わせると正確な情報へたどり着きやすくなります。
まとめ
CSSにタグはなく、HTMLタグから作られる要素をセレクターで選び、プロパティと値で見た目を変更します。
- HTMLタグ：ページの意味と構造を作る
- CSSセレクター：装飾するHTML要素を選ぶ
- CSSプロパティ：色・余白・配置など変更する項目を示す
- CSSの値：具体的な色や大きさを指定する
まずはよく使うタグとクラスセレクターから始め、必要になったプロパティをその都度調べてください。小さなカードやボタンを作りながら試すと、それぞれの役割を自然に覚えられます。