はじめに
前回はCSSのレイアウトを学んで、自己紹介ページがかなり「それっぽく」なってきましたね！
ここまで来たあなたは本当にすごいです。正直、多くの人がこのあたりで挫折します。でもあなたはまだここにいる。それだけで十分です。
さて、今回はクラスとIDについて学びます。
こんな経験はありませんか？
「h2の見出しなのに、場所によって色を変えたい…」 「このボタンだけ大きくしたい…」
そんなときに使うのがクラスとIDです。
この記事でできるようになること
この記事を読み終えると、クラスとIDを使って同じタグでも場所によってデザインを変える方法がわかります。「なんとなく動いた！」でOKです。一緒に手を動かしながら覚えていきましょう。
クラス（class）とは？
クラスとは、HTMLのタグに名前をつける仕組みです。
同じ名前をつけたタグに、まとめてCSSを適用できます。
<p class="intro">この段落はintroクラスです。</p>
<p class="intro">この段落もintroクラスです。</p>
<p>この段落はクラスなしです。</p>
CSS側ではクラス名の前に**ドット（.）**をつけて指定します。
.intro {
color: blue;
font-weight: bold;
}
これでclass="intro"がついたp タグだけ青色・太字になります。
クラスは何度でも使えます。同じクラス名を複数のタグにつけてOKです。
ID（id）とは？
IDはクラスとよく似ていますが、大きな違いが1つあります。
IDはページの中で1回しか使えません。
<h1 id="main-title">メインタイトル</h1>
CSS側ではID名の前に**シャープ（#）**をつけて指定します。
#main-title {
color: #3a86ff;
text-align: center;
}
クラスとIDの使い分け
| クラス（class） | ID（id） | |
|---|---|---|
| CSS指定 | .クラス名 | #ID名 |
| 使う回数 | 何度でもOK | 1ページに1回だけ |
| 用途 | 繰り返し使うデザイン | ページ内の特定の1箇所 |
迷ったらまずクラスを使うで大丈夫です！IDはページ内リンク（アンカーリンク）など特定の用途で使うことが多いです。
実践：自己紹介ページに適用しよう
前回作った自己紹介ページにクラスとIDを加えてみましょう！
<!DOCTYPE html>
<html>
<head>
<title>私の自己紹介ページ</title>
<style>
body {
background-color: #f9f9f9;
color: #333333;
font-size: 16px;
}
#main-title {
color: #ffffff;
background-color: #3a86ff;
font-size: 32px;
padding: 16px;
margin: 0;
text-align: center;
}
.section-title {
color: #3a86ff;
font-size: 22px;
margin: 32px 0 8px;
border-left: 4px solid #3a86ff;
padding-left: 12px;
}
.highlight {
background-color: #fff9c4;
padding: 4px 8px;
border-radius: 4px;
}
.nav {
display: flex;
justify-content: center;
gap: 24px;
background-color: #e8f0fe;
padding: 12px;
}
.nav a {
color: #3a86ff;
text-decoration: none;
}
</style>
</head>
<body>
<h1 id="main-title">私の自己紹介ページ</h1>
<div class="nav">
<a href="#">プロフィール</a>
<a href="#">好きなこと</a>
<a href="#">ブログ</a>
</div>
<h2 class="section-title">プロフィール</h2>
<p>はじめまして！プログラミングを勉強中の<span class="highlight">Sue</span>です。</p>
<h2 class="section-title">好きなこと</h2>
<p>コーヒーを飲みながらコードを書くのが好きです。</p>
<h2 class="section-title">参考にしているサイト</h2>
<p>
<a href="https://itskillab.com" target="_blank">Sue's Blog</a>
</p>
</body>
</html>
introクラスをpタグにつけて、そのpタグだけ青色・太字にしてみましょう。クラスはドット（.）で指定します！
h1タグにid=”main-title”をつけて、青い背景・白い文字・中央揃えのスタイルを適用してみましょう。IDはシャープ（#）で指定します！
h1にid=”main-title”・h2にclass=”section-title”・名前の部分にclass=”highlight”を使って、自己紹介ページを仕上げてみましょう！
ブラウザで開いてみてください。h2の左側に青いラインが入って、名前の部分が黄色くハイライトされているはずです！
tちなみに私はmain-titleのハイフンを忘れてなかなか先に進めませんでした。。。
コーディングは一言一句間違えてはいけないが基本。辛抱が必要です。
まとめ
今回はクラスとIDを学びました。
- クラス（.クラス名）：繰り返し使えるデザインのまとまり
- ID（#ID名）：ページ内で1箇所だけに使うスタイル
- 迷ったらまずクラスを使うでOK！
「なんで.（ドット）なの？」「#（シャープ）って何？」と最初は違和感があるかもしれません。でも手を動かしていくうちに自然と体に染み込んできます。焦らず一歩ずつ進んでいきましょう！
次回はボックスモデルに入ります。paddingとmarginの違いって何？という疑問を解決します。「余白」をコントロールできるようになると、ページのデザインがぐっと整ってきますよ。お楽しみに！
コメント