class を使ってみよう
更新日：2026-08-02
前のページでは、
h1pbody
などのタグに対して CSS を適用しました。
しかし実際のWeb制作では、
特定の部分だけデザインを変えたい
ことがよくあります。
そのときによく使うのが class です。
今回使用するファイル構成
この回では、次のファイルを使用します。
html-practice/
└── index.html
class とは？
class は、
この要素は○○グループです
という名前を付ける仕組みです。
そして CSS 側で、
この class に対してデザインを適用する
という使い方をします。
実際に書いてみよう
以下のように変更してみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>classの練習</title>
<style>
body {
background-color: #f3f4f6;
text-align: center;
padding-top: 60px;
}
.title {
color: #2563eb;
font-size: 40px;
}
.message {
color: #4b5563;
font-size: 20px;
}
</style>
</head>
<body>
<h1 class="title">
classの練習
</h1>
<p class="message">
classを使ってCSSを適用しています。
</p>
</body>
</html>
保存したあと、ブラウザを更新してください。
class="title"
<h1 class="title">
これは、
この h1 に title という class を付ける
という意味です。
CSS側の .title
.title {
color: #2563eb;
}
CSS側では、
.title
のように . を付けて class を指定します。
これは、
title class に対してCSSを適用する
という意味です。
タグ指定との違い
以前は、
h1 {
color: blue;
}
のように書いていました。
これは、
すべての h1
に適用されます。
一方 class を使うと、
特定の要素だけ
にCSSを適用できます。
class は何度でも使える
例えば、
<p class="message">
を複数書くと、すべて同じCSSが適用されます。
<p class="message">こんにちは</p>
<p class="message">CSSを勉強中です</p>
この場合、どちらにも .message のCSSが適用されます。
Web制作では class が非常によく使われる
実際のWebサイトでは、
- ボタン
- メニュー
- カード
- 見出し
- お知らせ
など、多くの場所で class が使われています。
HTML/CSS の学習では、とても重要な仕組みです。
class名は自由に付けられる
例えば、
class="title"
class="message"
class="button"
class="card"
など、自由に名前を付けられます。
ただし、
あとから見ても意味がわかる名前
を付けることが大切です。
実際に変更してみよう
例えば、
class="message"
を、
class="text"
に変更するとどうなるでしょうか？
HTMLだけ変更すると、CSSが適用されなくなります。
なぜなら、
.message
というCSSしか存在していないからです。
HTML と CSS の class 名は一致している必要があります。
少しずつ「役割分担」が見えてくる
現在は、
- HTML → 内容を書く
- CSS → 見た目を書く
という役割に加えて、
- class → 特定グループに名前を付ける
という考え方が登場しました。
Web制作では、この役割分担が非常に重要になります。
次のページでは
次のページでは、
- div タグ
- レイアウト
- 箱の考え方
を学んでいきます。
Webサイトらしい構造を作るための重要な内容です。