HTML クラスの属性
HTML class 属性は、同じクラス名を持つ要素に同じスタイルを定義するために使用されます。
したがって、同じ class 属性も同じスタイルになります。
ここでは3つの <div> 属性を持つすべてのHTML要素は同じスタイルになります。:
例文
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class=”cities”>
<h2>ロンドン</h2>
<p>ロンドンはイギリスの首都です。</p>
</div>
<div class=”cities”>
<h2>パリ</h2>
<p>パリはフランスの首都です。</p>
</div>
<div class=”cities”>
<h2>東京</h2>
<p>東京は日本の首都です。</p>
</div>
</body>
</html>
結果:
ロンドン
ロンドンはイギリスの首都です。
パリ
パリはフランスの首都です。
東京
東京は日本の首都です。
インライン要素でのclass属性の使用
HTML class 属性はインライン要素でも使用できます。:
例文
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>これは <span class=”note”>重要な</span> 見出しだ</h1>
<p>これは <span class=”note”>重要な</span> 文章だ</p>
</body>
</html>
ヒント: この class 属性は 任意の HTML 要素で使用できます
ノート: クラス名は大文字と小文字が区別されます。
特定のクラスを持つ要素を選択する
CSSでは、特定のクラスを持つ要素を選択するには、ピリオド（。）文字とそれに続くクラス名を記述します。:
例文
CSSで、すべての要素にクラス名 “city”のスタイルを使用します:
<style>
.city {
background-color: tomato;
color: white;
padding:
10px;
}
</style>
<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>
結果:
ロンドン
ロンドンはイギリスの首都です。.
パリ
パリはフランスの首都です。
パリはフランスの首都です。
東京は日本の首都です。
複数のクラス
HTML要素は複数のクラス名を持つことができ、各クラス名はスペースで区切る必要があります。
例文
クラス名が “city”,と “main”スタイル要素を指定する:
<h2
class=”city main”>London</h2>
<h2 class=”city”>Paris</h2>
<h2
class=”city”>Tokyo</h2>
上記の例では、最初 <h2> 要素は “city”クラスと “main”クラスの両方に属しています。
異なるタグが同じクラスを共有できる
異なるタグは、同様に <h2> と <p>で、 同じクラス名を持っており、それによって、同じスタイルを共有することができます。:
例文
<h2 class=”city”>Paris</h2>
<p
class=”city”>Paris is the capital of France</p>
JavaScriptでのclass属性の使用
クラス名をJavaScriptで使用して、指定したクラス名を持つ要素に対して特定のタスクを実行することもできます。
JavaScriptは、次のgetElementsByClassName() メソッドを使用して、指定されたクラス名の要素にアクセスできます:
例文
ユーザーがボタンをクリックすると、クラス名 “city”を持つすべての要素を非表示にします。:
<script>
function myFunction() {
var x = document.getElementsByClassName(“city”);
for (var i = 0; i < x.length;
i++) {
x[i].style.display = “none”;
}
}
</script>