【入門】HTMLの書き方　〜class・id〜

みなさんこんにちは さくちゃん です。

今回は、「class」と「id」について勉強していきます。
HTML・CSSの内容を扱いますので、まだHTML。CSSに触れていない方はこちらを見て下さい。

では早速やっていきましょう！

classとは？

classとは、あるタグにclass名をつけることを言います。

class名をつけてあげることで、CSSを書く際に、同じ要素に同じCSSを適用させたいときなど
にclass名を付けてあげることで、同じ CSSを適用させることができます。

例えば

<h1>TEST1</h1>
<p>TEST2</p>

と書くと、ブラウザではこのように表示されます。

このそれぞれ異なるタグ（h1とp）に、同じCSSを適用させたい時はclassを使います。
書き方は

<h1 class="test">TEST1</h1>
<p class="test">TEST2</p>

と書きます。

続いてCSSです。

classを付けたタグを指定する時は、class名の前に「 . 」と付けます。

書き方はこう書きます。

.test{ color: red;}

するとブラウザではこのようになります。

このようにclass名を付けてあげると、同じCSSを指定することができます。
このclassは、1つのページに同じclass名を何回でも使用することができます。

idとは？

idとは、classと同じ性質ももち、タグに名前を付ける時に使用します。
ただclassと違うのは、1つのページに同じ名前は使用できないことと、CSSの書き方が少し異なることです。

では書き方を見ていきます。

書き方は、

<h1 id="test1">TEST1</h1>
<p id="test2">TEST2</p>

と書きます。

classでは、同じ名前を指定していましたが、idでは同じ名前は使用できないので、このように書きます。CSSも、それぞれのid名を指定する必要があります。
またidの場合は、classとは違い、id名の前に「 # 」を付けます

#test1{ color: red;}
#test2{ color: red;}

idは、JavaScriptで使用することが多いです。

共通でCSSを適用させる場合などは、classを使うといいでしょう。