CSS ID とクラス


id セレクターとクラス セレクター

HTML 要素に CSS スタイルを設定したい場合は、要素に「id」セレクターと「class」セレクターを設定する必要があります。

ID セレクター

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

HTML要素はid属性を使用してIDセレクターを設定し、CSSのIDセレクターは「#」で定義されます。

次のスタイル ルールが要素属性 id="para1" に適用されます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください

lamp.gif ID属性は数字で始まるべきではありません。数字で始まる ID は Mozilla/Firefox ブラウザーでは機能しません。

クラスセレクター

クラスセレクターは、要素のグループのスタイルを記述するために使用されます。クラスは複数の要素で使用できます。

クラスセレクターは、HTML の class 属性で表されます。CSS では、クラスセレクターはドット「.」で表示されます。

次の例では、中心クラスを持つすべての HTML 要素が中央に配置されます。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

クラスを使用して特定の HTML 要素を指定することもできます。

次の例では、すべての p 要素は class="center" を使用して要素のテキストを中央に配置します。

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p> 
</body>
</html>

Run Example»

オンラインで表示するには、[Run Example] ボタンをクリックします。 example

lamp.gif クラス名の最初の文字に数字は使用できません! Mozilla や Firefox では動作しません。