Webデザイン

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

投稿日:2009年3月14日 更新日:

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

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

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

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

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

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



idとclassの主な違い

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

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

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

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

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

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

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

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

-Webデザイン
-

執筆者:

関連記事

「WP-PageNavi」というプラグイン入れました

WP-PageNaviというプラグインを入れてみました。 実はこのプラグイン、最近私がこのサイトに入れたArrasテーマの推奨プラグインにもなっていて、ブログのTOPページやカテゴリ等のページを移動す …

WordPressの「続きを読む」を画像化+画像入れ替えする方法

WordPressで記事を書いているときに、<!!–more–>を記事本文の途中に入れると、TOPページ等ではそれより前の部分だけが表示され、「続きを読む」のリンク …

no image

Movable Typeにパンくずリストを作る

パンくずリストとは? パンくずリストとは、例えば、「HOME > カテゴリ名 > ページ名」のように、サイト内のどこにいるかがひと目でわかるというもので、サイトを見てくれている方にとっては、とても親切 …

no image

WordPressを使い始めました。

今までずっとMovableTypeを使っていたのですが、最近のWordPressの人気と、商用ページ作成も無料ということもあって、WordPressもちょっと使えるようになっておこうと思い、使い始めて …

WordPressに『この記事を読むのに必要な時間の目安』を入れてみた

この記事読むのにどれぐらい時間かかるんだろうなーっていう目安を1つ1つの記事に入れてみました。 『この記事を読むのに必要な時間の目安』ってやつです。 参考にしたのは・・・ 記事を読むのに必要な時間を表 …