【CSS(スタイルシート)のクラス】ってなに?図解解説-idとclassの使い分けも-

クラスでデザイン適応し放題

こんにちはー!本気のパソコン塾の三浦です。

今回の質問はこちら

HTML勉強はじめました!佐藤さん

HTML・CSSを勉強しているんですが、クラス(class)ってなんですか?

なんか参考書に、クラスにデザインを適応します!とか書いてあるんですけど、

よく意味がわかりません。教えて下さい。

 

でました。誰もが一度は疑問に思う、クラス(class)ですね。

個人的にもよく聞かれるTOP3に入ってくる質問です 笑

またクラス(class)とアイディー(id)の使い分けがわからない!という方も多いと思うので、今回は図付きでまとめてみました。

これを読めば、webサイトのデザインが適応し放題になります( ´ー`)

HTML・CSS(スタイルシート)でよく聞く、クラスってなんだ?

 

突然ですが、クイズです!

真ん中の一行(2行目)だけ文字を赤色にしてください!

————————Question————————

文字色は黒のままでOK

文字色を赤色にしたい

文字色は黒のままでOK

————————————————————

HTMLコードはこちら(コピペして利用してもらってOKです。)

クラス(class)がわかっていないと少し難しいかもしれません。

 

例えばPタグ(段落タグ)に文字色を適応すると….

style.css(HTMLファイルは上と同じです。)

 

表示結果

css適応結果
HTML勉強はじめました!佐藤さん

!?そうです。

私もやってみたんですが、全部のpタグに赤色が適応されちゃいました..

今回のように、

Pタグの中でも一部にだけスタイル(デザイン)を適応したいときが、

クラス(class)の出番です。

タグの一部にクラスを追加

画像のようにクラスを使うことで、2行目のpタグにだけ、”akairo”という名前を付けることができます。

これをクラス名といいます。
(クラスは class=””のように使います。””の中が名前になります。)

名前をつけることで、

たくさんあるpタグの中で、文字色を変えたいpタグを絞り込むことができるのです。

ちなみに、さきほどの正解はこちらなのですが、
index.htmlの11行目とstyle.cssの3行目に注目してください。

index.html

 

style.css

 

 

表示結果

htmlにクラスを適応した表示結果

上手くできましたね!

ポイントは

  • akairoというクラス名をつけたこと(htmlファイル 11行目 class=”akairo”)
  • akairoというクラス名にだけデザインを適応したこと(cssファイルの3行目 p.akairo)

となります。

class(クラス)とid(ID)ってなにが違うの?

HTML勉強はじめました!佐藤さん

クラス(class)の意味はわかってきました! デザインを適応したいタグにだけ、クラス名を付けてあげればいいのですね!

もう一つ、IDというのも習ったのですが、これってクラスと何が違うんですか??

先程説明したclass(クラス)のように
htmlのタグの一部にスタイル(デザイン)を適応する方法がもう一つあります。

それがid(アイディー)です。idを使うことで、先ほどのように特定のpタグだけにデザインを適応することができます。

idを利用した場合。(index.htmlの11行目、style.cssの4行目をみてください。

style.css

 

idの時はp#akairoのように、#を利用します。

クラス(class)の時と同じ表示結果になります。

ですが、idとclassには大きな違いがあります。

 

それは…..

idは1ページの中で1回しか使えない!

classは1ページの中で何度も使える!

という点です。

これは学校のクラスと学籍番号の考え方に似ています。

 

クラス分けをしてみる

この画像だと、

黄色の服を着ている子がAクラスで、黒色の服を着ている子がBクラスというように、クラスには複数の生徒がいます。

ですが、学生番号(A16番など)は一人ひとりが持っていますよね。

これと同じように、
同じclass名を持つタグ(要素)は複数あっても構いませんが、同じid名を持つタグ(要素)は1つしか作ることができません。

クラスとIDどっちを使えばいいの?

classとidの違いはわかっていただけましたか?

実際にコードを書いていると、全てクラス(class)でいいんじゃないの?という疑問が生まれます。

そうなんです。

同じページで一度しか利用できないidとは異なり、クラス(class)は何度でも自由に使うことができるので、

基本的には全てクラス(class)を利用すれば問題ありません!

勉強中のうちは、全てclassを利用してデザインを適応していきましょう。

 

実際の現場では、IDとクラスどうやって使い分けている??

基本的には、全てクラスを利用してデザインを適応すればいいのですが、

idにも利用するメリットがあるので、実際の現場ではclassとidは使い分けられています。

Webサイト作成に慣れてきた時に、利用できるように頭の片隅にでも入れておきましょう。

 

具体的にこんなところでidは利用されます。

  • ヘッダーやフッターなどページに1箇所しかない部分
  • 内部リンクを利用している部分など

 

idがよく利用される場所1:  ヘッダーやフッターなどページに1箇所しかない場所

表示結果

htmlサンプル

Webサイトには、ヘッダー・フッターなど一箇所にしかない部分があると思います。
そのような場所には、idが利用されます。

上の画像だと id=”header” id=”main” id=”footer”などです。

文字の色は全て白なので、class=”shiroiro”を全てのpタグに適応しています。

 

idがよく利用される場所2 : ページ内リンクを利用している部分

他にもidを指定することで、同じページ内で移動することも可能になります。

このように利用することができます。

このページのフッターに移動します。こちら

注意
CSSファイルの中では、クラス(class) よりidが優先されます。
ので、クラスとidを併用する場合は注意してください。

 

 

いかがでしたでしょうか?

今回はHTML・CSSのクラスについて解説しました。

クラス(class)は一部のタグにデザインを適応するために利用する。

基本的にはidではなくクラス(class)をを利用する。

Webサイト作成に慣れてきたら、idも利用してみる。

このポイントを忘れないで下さい!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です