[HTML/CSS]IdとClassの違いは?

こんにちは管理人(@vip___p)です。

今回は初歩的な内容のIDとClassの使い分けについてです。

html/cssを学習し始めると学習する内容ですが、初めの頃はどのようにして使い分けるかあまり理解できませんでした。

ですから下記のような方は是非参考にしてください。

  • IDとClassの使い分けがいまいち理解できていない方
  • 実際の使用方法を知りたい方

興味がある方は是非参考にしてください。

IdとClassの違い

基本的な内容をおさらいしましょう。

IdとClass属性の記述例についてです。

idの記述例

<div id=”sample”>

</div>

Classの記述例

<div class=”sample”>

</div>

Idはページ内に1度しか使用できない。
Classは何度も使用可能。

Idは複数回使用できません。

IdとClassのイメージ

IdとClassの違いを覚えましょう。

classは野球

idは部員といった形です。

野球部は体育館に移動と命令することで全員に命令する手間が省けます。

部員のA君は職員室といえば単体に命令することが出来ます。

実際にIDとClassの優先度としてはIDの方が強いです。

IDの方が単体に命令しているので。

IdとClassの実際の使用例

実際の使用例を確認していきましょう。

classを使用する際に共通classとして使用することが多々あります。

私がよく使用する際は下記の通りです。

  • 共通で余白を開けたい
  • 共通の変化を持たしたい

実際にwebサイトを作成していくと何度も使用します。

まとめ

まとめ

今回のまとめです。

IDは単体で使用する。
Classは何度も使用可能。

使用していくと慣れてきます。

皆さんの参考になれば幸いです。

動的なwebサイトを作成したい方やJavaScriptを学習したい方は下記にまとめています。

JavaScriptの初心者から抜け出したい方必見