Classとid

## classとid
classとidについて説明します。
**classとidはWEBサイトを作る上で、最も重要な概念と言っても過言ではありません。**
しっかりここで復習しておきましょう！
## classとidとは
HTMLにおけるclassとidは、**「他の要素と識別するためのラベルの役割を果たすもの」**でしたね！
ページ内で、同じタグを使いたいけど、特定の部分だけ装飾を変えたいといった時に使用します。
例えば、以下のようなコードがあったとします。そして**「これだけ強調したい！」**の文章のみに装飾を加えるにはどのようにCSSを書けばいいでしょうか？

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
    <!-- 以下の1行のみに装飾を加えたい -->
    <p>これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
  </body>
</html>
```

以下のように、pタグに対してCSSを当ててしまうと、、、

```css:style.css
/* pタグに直接CSSを当ててしまっている */
p {
  color: red;
  font-size: 25px;
  font-weight: bold;
}
```

当然、以下のように、全ての文章が赤文字で強調されてしまいます。
![screenshot-2019-12-05-185602.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/992de662-fc2b-3e8a-0362-57fb7290e1b3.png)
これでは、目的を達成することができません。
ここで登場するのが、**class（またはid）でした。**※idに関しては後ほど説明します。
以下のコードのように、
**1. htmlファイルで、特定の装飾を当てたいタグに対してclassを指定し、
2. CSSファイルで、そのclassに対してCSSを当てることで、**
そのclassが当たっている要素のみにスタイルを当てることができます。
以下の**「class="bold"」**の記述が、他のpタグとの差別化を図る**ラベルの役割**を果たしていることがわかるでしょうか？

```html:①HTMLファイルにclassを追加
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
    <!-- 以下の1行にclassを追加 -->
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
  </body>
</html>
```
```css:②classに対してCSSを当てる
/* boldクラスにCSSを当てる */
.bold {
  color: red;
  font-size: 25px;
  font-weight: bold;
}
```
CSSファイルでclassにスタイルを当てる際は、**「ピリオド(.)」と「class名」**と記述するのは覚えてましたか？
覚えていた方は素晴らしい！プログラミングの才能があります！
※忘れていた方も、たった今覚えたはずなので、みなさんプログラミングの才能がありますね(^^)
ちなみに、上のコードには出てきていませんが、idにスタイルを当てる際は、**「ハッシュ(#)」と「id名」**を記述します。これも併せて覚えておきましょう！
すると以下のような表示になり、特定の部分だけ強調することができました。
![screenshot-2019-12-05-192157.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/002c5600-873d-cc5f-5eae-3cc181029a76.png)
### classとidの違い
上記でチラッとidについて触れましたが、classとidの違いはなんでしょうか？
**結論から言うと、基本的には同じです。**
特定の部分だけ装飾を変えたいといった時に、その部分にidを指定することで、他の要素と差別化するラベルの役割を果たします。
先ほどのclassで指定したコードをidで指定したバージョンに書き換えると、index.htmlとstyle.cssは、それぞれ以下のようになります。

```html:①class→idに変更
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
    <!-- 以下のclassをidに変更 -->
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p>これはテキストです。</p>
  </body>
</html>
```

```css:②「ピリオド(.)」を「ハッシュ(#)」に変更
/* 「ピリオド(.)」を「ハッシュ(#)」に変更 */
#bold {
  color: red;
  font-size: 25px;
  font-weight: bold;
}
```

以上でidにCSSが当たるようになりました。見た目に関しては、classにCSSを当てている時と変化はありません。
![screenshot-2019-12-05-192157.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/002c5600-873d-cc5f-5eae-3cc181029a76.png)
これまでの例だと、classもidも特に違いはないように思えるかもしれません。しかし、classとidには明確な違いが1点だけあります。
それは、**「同じhtmlファイル内で、使用できる回数に違いがある」**という点です。
それぞれの使用できる回数は、以下の表の通りです。

||class|id|
|:-----------------:|:------------------:|:------------------:|
| 使用できる回数| 何回でもOK |1回のみ|

つまり、以下のコードは、正しいですが、

```html
    <!-- classは何回使ってもOK！ -->
    <p>これはテキストです。</p>
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p class="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
```
以下のコードは、同一ページ内で、同じidを複数回使っているので、HTMLの文法違反となります。

```html
    <!-- idは1回しか使っちゃダメ！ -->
    <p>これはテキストです。</p>
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
    <p id="bold">これだけ強調したい！</p>
    <p>これはテキストです。</p>
```
なぜこれが文法違反なのか、文法違反によりどのような弊害があるのかに関しては、他のプログラミング言語の話が絡んでしまい混乱を招くため、今回は割愛します。
ここで知っておいて役立つことは、idは上記の文法上の制限により、使い勝手が悪いため、**実際のWEBサイト制作において、特定の要素のみにCSSを当てたいときは、基本的にclassを使うことが多いということです。**ただし、idを使用しているサイトは実在するので、idに関しては、知識として知っておくとよいでしょう。
### 実際にやってみよう
では、classについて学んだところで、実際にclassを使ったワークをやってみましょう！
まずはみなさんに作って頂く完成の見本を画像で以下に示します。
![screenshot-2019-12-05-214115.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/a9244d1a-95c7-d6d1-2774-b1e42ce08929.png)
今回はみなさんに、3色のボタンを作ってもらいます！これまで学んだclassについての知識を活用して、見本通りの見た目を完成させてください。
まずは問題に取り組むための準備の手順を以下に示します。
#### 【手順1】
Cloud9上で、**「html_work02」というフォルダ**を作成してください。

![c04c0f957498ddc67ef479dd6166b453.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/fc31b137-27de-4bf0-9ccd-51e0e43b7727.gif)
#### 【手順2】
手順1で作成した**html_work02**フォルダの中に、**「index.html」**と**「style.css」**という名前のファイルを作成してください。
![87f8ef25f840ce0116c0a4e42e45c9f1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/075899cc-40e5-6f80-2dd4-e378a0a2bd69.gif)
#### 【手順3】
手順2で作成した**index.html**に以下のコードを転記してください。転記するファイルを間違いないように注意しましょう！※コピペで構いません。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <div class="inner">
      <h2>ボタンを作ってみよう！</h2>
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
    </div>
  </body>
</html>
```
同様に、**「style.css」**に以下のコードを転記してください。**赤いバツ印が出てくるかと思いますが、現段階では気にせず、先に進んでください。**

```css:style.css
???? {
  background-color: #333;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 3px 3px 0px #8e8e8e;
}
???? {
  background-color: blue;
}
???? {
  background-color: red;
}
???? {
  background-color: green;
}
.inner {
  width: 960px;
  margin: 100px auto 0;
}
```
#### 【手順4】
index.html、style.cssをそれぞれ保存したら、一度ブラウザで確認してみましょう！先ほどと手順は一緒です。
1. Cloud9で以下の動画のように、index.htmlを開いた状態にする。
2. 画面上部の「Preview」を押す。
3. 「Preview File index.html」を押す。
4. 画面右側にプレビュー画面が表示するので、画面右端の矢印マークを押す。
5. すると、新しいタブでindex.htmlの内容が表示される。
【index.htmlファイルをブラウザで表示する手順】
![6441d1f340e7b904bc8c3811738cf3dc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/44206436-3e7b-16d7-0076-a2732d92a527.gif)
ここまでの段階では、以下の画像のような見た目になっているはずです。
![screenshot-2019-12-05-232709.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/372223/8fb89aa3-fdd7-9fdb-ebae-fa41e95d07ee.png)
これでやっと準備が整いました。それでは、先ほど用意した「index.html」と「style.css」のコードをもう一度見てみましょう。
それぞれ**「????」**の記述があるはずです。今回みなさんにやってもらうことは、この**「????」の部分を書き換えて、見本通りの3色のボタンを完成させることです。**ちょっと難しいかもしれませんが、頑張って取り組んでみましょう！
##### 問題 ：以下の「????」の部分を書き換えて、見本通りの3色のボタンを完成させましょう。
※「????」以外の部分は編集する必要はありません。
**ヒント:bulb:：index.htmlに書くclassは1つとは限りません。**

```html:index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <title>サンプルサイト</title>
  </head>
  <body>
    <div class="inner">
      <h2>ボタンを作ってみよう！</h2>
      <!-- 以下3行の「????」にclassを追加して、3色のボタンを完成させましょう -->
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
      <a href="#" class="????">ボタン</a>
    </div>
  </body>
</html>
```
```css:style.css
/* 以下の「????」にclassを書き加え、「ボタンの形を作るcss」を完成させましょう */
???? {
  background-color: #333;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  box-shadow: 0px 3px 3px 0px #8e8e8e;
}
/* 以下の「????」にclassを書き加え、ボタンの背景を「青色」にするcssを完成させましょう */
???? {
  background-color: blue;
}
/* 以下の「????」にclassを書き加え、ボタンの背景を「赤色」にするcssを完成させましょう */
???? {
  background-color: red;
}
/* 以下の「????」にclassを書き加え、ボタンの背景を「緑色」にするcssを完成させましょう */
???? {
  background-color: green;
}
/* 以下のコードは見た目を整えるためなので、編集する必要はありません */
.inner {
  width: 960px;
  margin: 100px auto 0;
}
```

ワークの解答は[こちら！](https://qiita.com/sekainoYAZAWA/private/7740c8806c0465caad55)