HTMLクラス属性
HTMLclass属性は、HTML要素のクラスを指定するために使用されます。
複数のHTML要素が同じクラスを共有できます。
クラス属性の使用
このclass属性は、スタイルシートのクラス名を指すためによく使用されます。また、JavaScriptで使用して、特定のクラス名を持つ要素にアクセスして操作することもできます。
次の例では、「city」の値を<div>持つ属性を持つ3つの要素があります。class3つの要素はすべて
、ヘッドセクションのスタイル定義<div>
に従って均等にスタイル設定されます。.city
例
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
次の例では、値が「note」の属性を持つ2つの<span>要素があります。class両方の要素は
、ヘッドセクションのスタイル定義<span>
に従って等しくスタイル設定されます。.note
例
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
クラスの構文
クラスを作成するには; ピリオド（。）文字の後に、クラス名を記述します。次に、中括弧{}内でCSSプロパティを定義します。
例
「city」という名前のクラスを作成します。
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
複数のクラス
HTML要素は複数のクラスに属することができます。
複数のクラスを定義するには、クラス名をスペースで区切ります（例：<div class = "city main">）。要素は、指定されたすべてのクラスに従ってスタイル設定されます。
次の例では、最初の要素はクラスとクラス<h2>の両方に属しており、両方のクラスからCSSスタイルを取得します。
citymain
例
<h2
class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2
class="city">Tokyo</h2>
異なる要素が同じクラスを共有できます
異なるHTML要素が同じクラス名を指す場合があります。
次の例では、との両方が「city」クラス<h2>を<p>
指し、同じスタイルを共有します。
例
<h2 class="city">Paris</h2>
<p
class="city">Paris is the capital of France</p>
JavaScriptでのクラス属性の使用
クラス名は、JavaScriptで使用して、特定の要素に対して特定のタスクを実行することもできます。
getElementsByClassName()JavaScriptは、次のメソッドを使用して特定のクラス名の要素にアクセスできます。
例
ボタンをクリックして、クラス名「city」のすべての要素を非表示にします。
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length;
i++) {
x[i].style.display = "none";
}
}
</script>
上記の例のコードを理解していなくても心配しないでください。
JavaScriptの詳細については、HTML JavaScriptの章を参照するか、 JavaScriptチュートリアルを学習してください。
章のまとめ
- HTML
class属性は、要素の1つ以上のクラス名を指定します - クラスは、特定の要素を選択してアクセスするためにCSSとJavaScriptによって使用されます
- この
class属性は、任意のHTML要素で使用できます - クラス名では大文字と小文字が区別されます
- 異なるHTML要素が同じクラス名を指すことができます
- JavaScriptは、
getElementsByClassName()メソッドを使用して特定のクラス名の要素にアクセスできます