CSSのClassとIDを理解しよう！デザインの自由度を広げる基本テクニック
CSSを使い始めると、よく目にする「Class」と「ID」という言葉。どちらもHTML要素にスタイルを適用するための方法ですが、初心者にとってはその違いや使い分けが少し難しく感じるかもしれません。
この記事では、ClassとIDの基本的な役割や違いを分かりやすく解説し、実際に使える具体例をお見せします！これを読めば、CSSのデザインがもっと楽しくなりますよ
ClassとIDって何？
- class（クラス）
- 複数のHTML要素に同じスタイルを適用したいときに使います。
- 1つのWebページで何度でも再利用可能です。
- Css記述の際は「.」を先頭に着けます
- 記述例：
<p class="highlight">このテキストはハイライトされています。</p>
<p class="highlight">もう1つのハイライトされたテキスト。</p>
.highlight {
color: red;
font-weight: bold;
}
- id（アイディー）
- 特定の1つのHTML要素にだけスタイルを適用したいときに使います。
- 各IDは1つのページ内でユニーク（重複なし）である必要があります。
- Css記述の際は「#」を先頭に着けます
- 記述例：
<p id="unique-text">このテキストは特別なスタイルです。</p>
#unique-text {
color: blue;
font-size: 20px;
}
ClassとIDの違いを簡単にまとめると
- class（クラス）
- 複数のHTML要素に同じスタイルを適用したいときに使います。
- 1つのWebページで何度でも再利用可能です。
- Css記述の際は「.」を先頭に着けます
- 記述例：
<p class="highlight">このテキストはハイライトされています。</p> <p class="highlight">もう1つのハイライトされたテキスト。</p>.highlight { color: red; font-weight: bold; } - id（アイディー）
- 特定の1つのHTML要素にだけスタイルを適用したいときに使います。
- 各IDは1つのページ内でユニーク（重複なし）である必要があります。
- Css記述の際は「#」を先頭に着けます
- 記述例：
<p id="unique-text">このテキストは特別なスタイルです。</p>#unique-text { color: blue; font-size: 20px; }
ClassとIDの違いを簡単にまとめると
| 項目 | clsss | id |
|---|---|---|
| 目的 | 複数の要素に同じスタイルを適用 | 特定の1つの要素にスタイルを適用 |
| セレクタの記述方法 | （ドット）+ クラス名 | #（ハッシュ）+ id名 |
| 再利用の可否 | 可能 | 不可（1つの要素のみ） |
ClassとIDを使い分けるポイント
- 再利用したいスタイルはClassを使う 例えば、同じデザインを適用するボタンや見出しなどはClassを使うのが便利です。
- 特別な1つの要素にはIDを使う ロゴや特定のメインコンテンツなど、1ページ内で唯一のスタイルを持つ要素にはIDを使います。
- HTMLの構造を見て適切に選ぶ 必要以上にIDを使いすぎるとコードが管理しにくくなるため、Classで対応できる場合はClassを優先するのがおすすめです。
実践例：ClassとIDを組み合わせたコード
以下の例では、ClassとIDをそれぞれ使い分けてデザインを適用しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ClassとIDの使い方</title>
<style>
/* Classのスタイル */
.highlight {
color: red;
font-weight: bold;
}
/* IDのスタイル */
#main-title {
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
<h1 id="main-title">この見出しは特別なデザインです</h1>
<p class="highlight">この段落は強調表示されています。</p>
<p>この段落は通常のデザインです。</p>
</body>
</html>
まとめ
- class は再利用性が高く、複数の要素にスタイルを適用できる。
- id は特定の1つの要素にだけスタイルを適用したい場合に便利。
- 用途に応じて使い分ければ、Webページのデザインが効率的かつ分かりやすくなります！
次のステップとして、<div>タグについてを学びましょう。
初心者講座:目次
- 初心者大歓迎！HTMLを使ってWebページを作ってみよう
- 初心者でも簡単！HTML基本構文
- 初心者でもすぐできる！簡単CSS入門
- CSSのClassとIDを完全理解！違いと使い分けを解説
- 初心者必見！HTMLの<div>タグとは？基本と使い方を解説
- 初心者向け！HTML見出しタグでコンテンツを整理する方法
- 段落タグ<p>とは？基本の使い方から注意点まで
- Webデザインの第一歩！文字と背景を自由にカスタマイズしよう
- 初心者必見！marginとpaddingの違いを徹底解説
- marginとpaddingを完全理解！CSSで余白を自在に操る方法
- HTMLの<a>タグをマスターしよう！リンクの基本と応用テクニック
- HTMLで画像を表示しよう！<img> タグの基本と使い方
- HTMLのリストタグを学ぼう！箇条書き・番号付きリスト・定義リストの使い方
- HTMLで表を作ろう！基本の<table>タグをマスターしよう
- 「初心者大歓迎！HTMLを使ってWebページを作ってみよう」のまとめ
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/0fb3a2a7.a3eac612.0fb3a2a8.1146eb94/?me_id=1213310&item_id=21161259&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F8469%2F9784815618469_1_5.jpg%3F_ex%3D400x400&s=400x400&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
