CSSでデザインする際のidとclassの違い

idとclassは、表示の効果に違いはないため、趣味でブログをやる程度なら、その違いを知らなくても問題はないのですが、なんとなく「そうだったのかー」と頭の片隅にでも入れておけば、多少役に立つでしょう。

まず、id と class の効果は全く同じです。

idで指定したからとか、class で指定したからと言って、ブラウザでの表示のされ方に違いはありません。

じゃあ、何が違うのかというと、ページ内で使用できる回数です。

基本的に id は、そのページ内に1度しか使用してはいけません。

それとは反対に、class はページ内で何度使用しても良い事になっています。

idとclassの主な違い

id がなぜ1回しか利用してはいけないのかというと、位置を表す意味もあるからです。

簡単に言うと、HTMLの name のような感じです。

nameでよく # をつけて「ページ上へ」とかみたいにページ内をリンクで飛ばす方法があると思いますが、id でもそれが可能です。

id で指定した名前に # をつけてリンクを付けて飛ばすことができます。

それに比べ、classはページ内で何度も使用して良い事になっているので、ページ内で何度も使用する部分等に使うのが良いでしょう。

たとえば、ブログ等のサイドバー、文字の大きさや色の指定など、デザインが統一しているものが複数ある場合などに、classを指定すると良いでしょう。

  • id ページ内で1度しか使用できない。
  • class ページ内で何度使用しても良い。

cssを後から見たときに、とても見やすくて編集もしやすいので、使い分けを意識しながら使用することをオススメします^^