id属性とclass属性

※Webクリエイター能力認定スタンダードテキスト資料 P.54参照

id属性とは

範囲指定（グループ化）された範囲や、特定の位置に「命名する（名前をつける）」ことで、その範囲を指定することができます。id属性は、1つのHTMLドキュメントにつき一度しか使用できないのが特徴です。

【id属性名の注意点】
id名は、基本的には自由に命名する（好きな名前をつけることが可能）ことができますが、半角スペースを含めたり、数字一桁やアルファベット1つなど適当すぎるid名などエラーの元になりますので注意しましょう。また、共同作業をすることを視野に入れ、あまり適当なid名をつけてしまうと、後で分からなくなってしまったり理解しづらいCSSになってしまうので、ある程度、推測されやすいid名をつけることが好ましいと考えます。
頭文字に「#(シャープ)」を付けてCSSで記述します。HTMLには「#」は含めません。

別々に記述してもCSSとHTMLは連動し合っています。連動することで、レイアウトやデザインを整えることが可能となるのです。HTMLとCSSを操る場面で混乱しがちになりますが、反映する楽しさを味わいながら練習しましょう。

CSSの記述





		
		
			/* コンテナ全体の横幅を980pxにする */
#container{width:980px;}

			
				
					
				
					1
2
3
				
						/* コンテナ全体の横幅を980pxにする */
#container{width:980px;}
 
					
				
			
		



HTMLの記述




		
		
			<div id="container">
この中に要素(内容)を入れる
</div>
			
				
					
				
					1
2
3
				
						<div id="container">
この中に要素(内容)を入れる
</div>
					
				
			
		



class属性とは
id属性と同じく範囲指定（グループ化）された範囲や、特定の位置に「命名する（名前をつける）」ことで、その範囲を指定することができます。id属性との違いは、1つのHTMLドキュメントにつき何度でも使用することができます。また、半角スペースで区切ることで複数のclassスタイルを幾つも充てることが可能な点が大きな特徴です。

【class属性名の注意点】

大まかに、命名に関する注意点はid属性と同じです。

頭文字に「.(ドット)」を付けてCSSで記述します。HTMLには「.」は含めません。
CSSの記述




		
		
			/* 文字の色を赤にする */
.red{color:#ff0000;}
			
				
					
				
					1
2
				
						/* 文字の色を赤にする */
.red{color:#ff0000;}
					
				
			
		



HTMLの記述




		
		
			<div class="red">
この中の要素(内容)は、文字がすべて赤色になります。
</div>
			
				
					
				
					1
2
3
				
						<div class="red">
この中の要素(内容)は、文字がすべて赤色になります。
</div>
					
				
			
		



クラス属性は、いろんなタグにスタイルを充てることができます。






		
		
			/*見出しがred*/
<h1 class="red">森のくまさん</h1>
/*段落がred*/
<p class="red">今日のランチは、サンドイッチです。</p>

/*３つの果物がすべてred*/
<ul class="red">
<li>バナナ</li>
<li>みかん</li>
<li>りんご</li>
</ul>

/*みかんだけがred*/
<ul>
<li>バナナ</li>
<li class="red">みかん</li>
<li>りんご</li>
</ul>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
				
						/*見出しがred*/
<h1 class="red">森のくまさん</h1>
/*段落がred*/
<p class="red">今日のランチは、サンドイッチです。</p>
 
/*３つの果物がすべてred*/
<ul class="red">
<li>バナナ</li>
<li>みかん</li>
<li>りんご</li>
</ul>
 
/*みかんだけがred*/
<ul>
<li>バナナ</li>
<li class="red">みかん</li>
<li>りんご</li>
</ul>