29_ CSSのclassとidとは？【超入門・体系化ノート】～小学生でもわかるデザインの名前札～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
10_CSSのclassとidとは？【超入門・体系化ノート】
～小学生でもわかるデザインの名前札～
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
# 1. classとidって何？
前回は、
CSSで、
文字の色や背景などを
変更しました。
でも、
ページには、
見出しや文章が
たくさんあります。
全部の見出しを
同じ色にしたい時もあれば、
一つだけ
特別な色にしたい時もあります。
そこで使うのが、
class
と
id
です。
━━━━━━━━━━━━━━━━━━
# 学校で考えてみよう
例えば、
学校には、
たくさんの生徒がいます。
その中で、
全員が付けている
「クラス名」
があります。
例えば、
1組
2組
3組
です。
これが、
class
です。
一方、
一人ひとりには、
学籍番号があります。
これは、
世界に一つだけです。
これが、
id
です。
━━━━━━━━━━━━━━━━━━
# classとは？
classは、
同じ仲間へ
同じデザインを付けるための
名前です。
例えば、
すべての文章を
青色にしたい場合です。
HTML
```html
<p class="text">
こんにちは
</p>
<p class="text">
こんばんは
</p>
```
CSS
```css
.text{
color:blue;
}
```
classは、
何回でも使えます。
━━━━━━━━━━━━━━━━━━
# idとは？
idは、
一つだけの
特別な名前です。
HTML
```html
<h1 id="title">
私のホームページ
</h1>
```
CSS
```css
#title {
color:red;
}
```
idは、
ページの中で、
一回だけ使います。
━━━━━━━━━━━━━━━━━━
# 書き方の違い
class
↓
.（ドット）
を付けます。
```css
.text{
}
```
━━━━━━━━━━━━━━━━━━
id
↓
#（シャープ）
を付けます。
```css
#title {
}
```
━━━━━━━━━━━━━━━━━━
# classをたくさん使う
HTML
```html
<p class="red">りんご</p>
<p class="red">みかん</p>
<p class="red">ぶどう</p>
```
CSS
```css
.red{
color:red;
}
```
全部赤色になります。
━━━━━━━━━━━━━━━━━━
# idは一つだけ
HTML
```html
<h1 id="main">
トップページ
</h1>
```
CSS
```css
#main {
font-size:50px;
}
```
この見出しだけ、
大きくなります。
━━━━━━━━━━━━━━━━━━
# classとidは一緒に使える
HTML
```html
<h1 id="title" class="blue">
こんにちは
</h1>
```
CSS
```css
#title {
font-size:50px;
}
.blue{
color:blue;
}
```
文字は、
青色で、
大きく表示されます。
━━━━━━━━━━━━━━━━━━
# よく使うclass名
container
↓
ページ全体
header
↓
ヘッダー
menu
↓
メニュー
content
↓
本文
card
↓
カード
button
↓
ボタン
text
↓
文章
━━━━━━━━━━━━━━━━━━
# よく使うid名
title
↓
タイトル
main
↓
メイン
logo
↓
ロゴ
footer
↓
一番下
━━━━━━━━━━━━━━━━━━
# classとidの違い
class
↓
同じ仲間
↓
何回でも使える
↓
CSSで一番よく使う
━━━━━━━━━━━━━━━━━━
id
↓
一人だけ
↓
一回だけ使う
↓
特別な場所で使う
━━━━━━━━━━━━━━━━━━
# CSSを書く流れ
HTMLを書く
↓
class・idを書く
↓
style.cssを書く
↓
保存する
↓
ブラウザで確認
↓
完成
━━━━━━━━━━━━━━━━━━
# HTMLツリー
HTML
│
└ body
│
├ h1
│ ├ id="title"
│ └ class="blue"
│
├ p
│ └ class="text"
│
├ p
│ └ class="text"
│
└ button
└ class="button"
━━━━━━━━━━━━━━━━━━
# CSSツリー
CSS
│
├ .text
│
├ .blue
│
├ .button
│
└ #title
━━━━━━━━━━━━━━━━━━
# 家で例えると
マンション
↓
○○マンション
↓
101号室
↓
102号室
↓
103号室
マンション名
↓
class
部屋番号
↓
id
となります。
━━━━━━━━━━━━━━━━━━
# 今日覚えること
□ classは仲間の名前
□ idは一つだけの名前
□ classは何回でも使える
□ idは一回だけ使う
□ classは「.」を書く
□ idは「#」を書く
□ CSSではclassを使うことが多い
━━━━━━━━━━━━━━━━━━
# 初心者が最初に覚えること
★★★★★（最優先）
□ class
□ id
□ .class
□ #id
━━━━━━━━━━━━━━━━━━
★★★★☆
□ class="..."
□ id="..."
□ 同じデザインはclass
□ 特別な場所はid
━━━━━━━━━━━━━━━━━━
# 一言でまとめる
classとは、
「同じ仲間へ付ける名前」
です。
idとは、
「一つだけの特別な名前」
です。
もっとかんたんに言うと、
classは
「クラス名」
idは
「学籍番号」
です。
この2つを使えるようになると、
HTMLの好きな場所だけを、
自由にデザインできるようになります。
━━━━━━━━━━━━━━━━━━
# 次回予告
次は、
**「11_CSSのBoxモデルとは？【超入門・体系化ノート】」**
を学びます。
Webページのすべての部品は、
実は「箱（Box）」として表示されています。
margin・padding・border・contentの違いを、
図やツリーを使いながら、
小学生でも分かるように学んでいきましょう。
#CSS
#class
#id
#HTML
#VSCode
#Web制作
#初心者
#Selector
#HTMLCSS
#超入門
🔷次の記事はこちらから⇩
