【CSS】「id」属性と「class」属性の違い

CSS記述の際によく使われているのがこの「id」と「class」属性です。

この２つの使い分けの一番の違いは、1ページ内で同じclass名を持つ要素は複数あっても構いませんが、同じid名は1つしか存在できないという一意性を持ちます。

属性	使い分け
「id」	固有の名前を割り当てる同じid名は、1ページ中に1度しか使えない ★構文：#id名 {プロパティ:値;}
「class」	種別名を割り当てる同じclass名を、1ページ中に何度でも使える ★構文：.ckass名 {プロパティ:値;}

固有なid名は1ページ中に1回しか使えないため、個人的にはサイトの大きなレイアウトを決める用途で、classはページ内の具体的な表現に用いるのがいいと思いますが、「サイドメニューバー」のように同様のレイアウトが複数必要な場合は、idを複数作るより、共通のclassを繰り返し使う方法もありうります。

もちろん1ページの中に2つの要素を使い分けする規則はありません。

classだけ使ってページ作りも可能ですが、段々HTML文書の規模が大きくなり、複雑になっていく場合は、HTMLソースの管理が大変になります。

そういう面でid属性はソースの把握がしやすくなります。

div要素などを用いて、ひとつのボックスを作ってみましょう

 <style>
 #id_s {
	width:160px; 
	height:100px;
	background-color:red; 
  }

 .class_s {
	width:160px; 
	height:100px;
	background-color:green; 
  }
 </style>
  
<body>
  <div id="id_s"> ID属性</div> 
  <div class="class_s"> class属性</div> 
</body>

ID属性

class属性

大体ホームページのレイアウトは下記のように<header>、<left>、<middle>、<right>、<footer>の範囲で構成されます。各領域を作るには通常スタイルシートで「idセレクタ名」を指定する方法です。

セレクタ名は「#」をつけます。<style>～</style>には、idセレクタ名を決めて、プロパティと値を宣言します。

<!doctype html>
 <head>
 　<title>IDを用いてレイアウトの配置</title>
 　<style>
#header{
	height:74px;
	background-color:yellow; 
}

#sidebar {
	width:30%; 
	height:100px;
	background-color:red; 
	float:left;
}

#main {
	width:70%; 
	height:100px;
	background-color:blue; 
	float:left;
}

#footer{
	width:500px; 
	height:100px;
	background-color:pink; 
	clear:both;
}
 　</style>     
 </head>

また<body>～</body>には実際ホームページに表示されるコードを入れます。<div id="idセレクタ名">～</div>の形でコーディングします。<div>要素はブロックレベル要素なので、前後に改行が入ります。

 <body>
 　 <div id="header">HEADER</div>
 　 <div id="sidebar">LEFT</div>
 　 <div id="main">MIDDLE</div>
 　 <div id="footer">FOOTER</div>
 </body> 
</html>

HEADER

MAIN

FOOTER

勿論、「id」の代わりに<div class="class名">～</div>の形で「class」に書き換えても見た目同じのレイアウトの作成ができます。

「ページ内」のリンク先を指す「id」

id名は「ページ内」のリンク先を指し示すアンカー用途としても使えます。

使い方

<a href="#リンク先ID名">	「#」の後にリンク先のID名を指定
<要素 id="リンク元ID名">	固有のリンク識別名を指定

例えば、<a href="#ending">と、ページ内の「ending」とリンク先のID名を指定しますと、リンク元のアンカーポイントである「ending」という名づけられた位置にジャンプします。

<a href="#ending">文末へ移動</a>
.
.
.
<h4 id="ending">終わり</h4>

サンプルをクリック⇒　文末へ移動

上記のサンプルでは、「文末へ移動」ページ内リンクをクリックすると、上記のid属性が付加された<h4>要素のある位置にジャンプすることになります。上記のように、id属性値は「ページ内リンク」にも使用されているので、「同じページ内でid名は1度のみ使用する」のが正しいかと思います。

同じid名を使ったリンク元が複数の場合は、飛ぶ先の特定できなくなるため、一番先にリンク元が指定されている位置にジャンプしたり、意図したリンク先にジャンプしない不具合が起こります。このように「id」は、ページ中の要素に固有の名前を付けて、一意に特定するために使われます。

IDの名づけ時は、まず使用可能なのは半角の英数字、ハイフン（ - ）、アンダーバー（ _ ）、コロン（ : ）、ピリオド（ . ）です。またアルファベットから始めます。大文字と小文字の区別があります。

<a name="アンカー名">~</a>

リンク用途の「id」属性はHTML4から導入されましたので、それ以前は<a>要素のアンカー機能の「name」でリンク元を指定しました。

<a name="starting">【CSS】「id」属性と「class」属性の違い</a>
.
.
.
<a href="#starting">ページのTOPへ移動</a>

サンプルをクリック⇒　ページのTOPへ移動