htmlで使うclassとidって何?

CSSコードで使うclassとidって何?

htmlのコードを確認してみると<body>~</body>内には<● class=”◆”>とか<● id=”◆”>のようなコードがたくさんあります。 今回はこのclassやidの使い方を説明していきます。

classとidって何?

特定の要素に対してclassやidを使いスタイルを適用する場合に使います。
それではclassとidは何が違うんでしょう?
classは1ページの中に何度も使えますが、idはページの中で一度しか使えません。

文章だけでは分かりにくいと思いますので続いて使用例を元に説明していきます。

classを使用した例

スタイルシートでclassを記述するときにはクラス名前に(.)ドットをつけて記述します。

.aka{ color: red;}

.akaと言う名前のclassを使うと文字が赤くなります。
classはページに何度も使えるのでhtmlでは下記のように使えます。

<p class="aka">ここの文字は赤くなる</p>
<div class="aka">ここの文字も赤くなる</div>

このようにページの中で何度も使うような場合のスタイルに設定しておくと便利なコードです。

idを使用した例

スタイルシートでidを記述するときにはクラス名前に(#)シャープをつけて記述します。

#aka
{ color: red;}

#akaと言う名前のidを使うと文字が赤くなります。

但しidは先程のclassとは違いページに一度しか使えません。ですのでhtmlでは下記のように一つの要素にしか使えなくなります。

<p id="aka">ここの文字は赤くなる</p>
<div id=”aka”>一度上の要素で使っているのでここでは使えません</div>

それではclassだけ使ったほうが便利みたいですがそれではありません。ページには一度しか使わないスタイルが結構あります。例えば下記図のような箇所にidを使っていると便利です。

idブロック

このようにヘッダー、サイドバー、メイン、フッターなどはページで一つのスタイルしかないのでidはこのような箇所で使います。

その他idの使用例

idはページ内リンクにも使えます。例えば下記のような感じです。

<h2 id="taitoru">記事のタイトル</h2>
<a href="#taitoru">記事のトップへ戻る</a> 

classとidは初めての時は理解しにくいと思います。何度か自分でカスタマイズしていく事で分かっていくので、最初はidはページに1回、classは複数と何となく分かれば大丈夫です。

ここから下は参考までにご覧ください。

ここから下は参考までにご覧ください。

私自身も今までは結構適当にclass名やid名を付けていたんですが、「Googleが推薦するHTMLとCSSのコーディング方法」の中で「IDとクラスの命名」や「IDとクラス名のスタイル」や「タイプセレクタ」のルールもありますので、よかったら参考までに「Googleが推薦するHTMLとCSSのコーディング方法」 もご覧ください。

以上がカスタマイズで使うclassとidの説明でした。

最終更新日: 2013年3月8日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

htmlで使うclassとidって何?の関連記事

コメントを残す

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


*