CSSのclassとidの違いについて【3分で読める】

こんな悩みを解決していきますね。

　本記事の信憑性

元東証一部上場企業に勤めていたエンジニアです。現在はWEBライターを専業にして、副業エンジニアとして活動中。

私はプログラミングスクール「GEEK JOB」に通って最短1ヵ月半で東証一部上場のエンジニアになることが出来ました。

未経験からエンジニアになりたい人に、スクールに通って得た経験、取材をして得た情報をもとに有益なノウハウを発信しています。

この記事は約3分で読めます。

classって?　idって?　

classは対象に種類・分類を追加します。例えば、りんご　ブドウ　オレンジは果物という種類です。というような感じです。
classは同じ名前を複数回用いる事ができます。基本的にはこちらを使用します。

対してidは対象に固有の名前を追加します。例えば言語は日本語です。みたいな感じです。classと違い同じ名前は1回限りしか使えません。idを使う事で特有の装飾をしているんだと目立たせることが出来ます。

CSSの書き方、優先順位とは?

サンプルを用意しました。

See the Pen zYrGGVq by kazuto1027 (@kazuto1027) on CodePen.dark

CSSで装飾する時　前にclassは.(ドット)　idは#(ハッシュ)を用います。
あるclass内のh1にのみ装飾したい場合、間に半角スペースを空け、画像の2番目のようにします。

優先度の詳細は次回説明しますが、ここでは大事な所のみ説明します。
一つ目はidの方がclassより優先度が高いです。ラッパの背景が青になっているのがわかりますね。
二つ目は優先度が同じの場合、後から書かれた方が優先度が高くなるということです。ようするに上書きされるということですね。

class、idの注意点　命令規則とは?

• 半角英数字のみの使用で　(例 navi、button1など)

日本語や全角英数字・記号、カタカナなどは使用不可です。

• 記号は「-」（ハイフン）、「_」（アンダースコア）のみを使用する
  (例navi-bar、button_listなど)

• 全角、半角spaceを使用しない。(例navi barは×)

※特にクラス名は半角スペースを空けると別々のクラス名として処理されてしまいます。

• 最初の文字はアルファベットで(数字は使用不可　例bar123)

まとめ

いかがでしたでしょうか?　基本的にはクラスを用いれば良いということがわかりましたね。この調子で色々学んでいきましょう!

合わせて読みたい記事はこちら

Prev→→→【WEBデザイン】未経験向けに徹底解説!HTML/CSSを学ぼう

Next→→→【WEBデザイン】未経験向けに徹底解説!　BEM編