スタイルシートを記述する上で用いられる「id」と「class」。
きっと聞いたこと、見たこと、使ったことがあると思います。
ではこの二つ、どんな違いがあるのかご存知ですか？
実はそれぞれに役割があり、使い分けることで理解しやすくなります。

------------------------------------------
「id」→一ページ中に同じ名前は一度しか記述出来ません
「class」→一ページ中に同じ名前でも、何度も記述出来ます
------------------------------------------

id、は一ページに一度しか使えません。
div要素を用いてページのレイアウトの例で見てみましょう。

まず、一番上にロゴやボタンを設置するheaderという名前にしたdiv。
となります。
次にサイドに情報を入れるためのdiv、これはsidebarと名前をつけてみました。

となります。
メインとなる本文を入れるdivは、mainにしてみます。

ですね。
最後、一番下に配置するdivをfooterとしてみます。
となります。
この場合、headerもfooterも一ページ内に二回出てくる事はありません。
このような場合にidを使います。
idを使う場合、#header　というように、決めた名前の前に「#」と書いて
スタイルシートを記述するようにします。

idに対してclassは、一ページに何度も書くことができます。
例えば


こんな感じです。

１つずつのにclassを指定することで、
それぞれのに違うスタイルシートを適用させることが出来ます。
また、一度使ったclassを他の要素に使うことも可能です。
文字の色や大きさを統一したい時等に使えますね。

classを使う場合、.note　というように、決めた名前の前に「.」と書いて
スタイルシートを記述するようにします。
もちろん全てにclassを適用してデザインすることも可能ですが……
次回にもう少し詳しくお話することにします。

ではまた次回！