Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

HTMLクラス属性

HTMLclass属性は、HTML要素のクラスを指定するために使用されます。

複数のHTML要素が同じクラスを共有できます。

クラス属性の使用

class属性は、スタイルシート内のクラス名を指すためによく使用されます。また、特定のクラス名を持つ要素にアクセスして操作するためにJavaScriptで使用することもできます。

次の例では、値が「city」のclass属性を持つ3つの<div>要素があります。3つの<div>要素はすべて、headセクションの.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>ロンドン</h2>   <p>ロンドンはイギリスの首都です。</p> </div> <div class="city">   <h2>パリ</h2>   <p>パリはフランスの首都です。</p> </div> <div class="city">   <h2>東京</h2>   <p>東京は日本の首都です。</p> </div> </body> </html>

次の例では、値が「note」のclass属性を持つ2つの<span>要素があります。両方の<span>要素は、headセクションの.noteスタイル定義に従って同じようにスタイル設定されます。

例

<!DOCTYPE html> <html> <head> <style> .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チュートリアルでさらに詳しく学ぶことができます。

クラスの構文

クラスを作成するには;ピリオド(.)文字を書き、その後にクラス名を続けます。次に、中括弧{}内でCSSプロパティを定義します。

例

「city」という名前のクラスを作成します。

<!DOCTYPE html> <html> <head> <style> .city {   background-color: tomato;   color: white;   padding: 10px; } </style> </head> <body> <h2 class="city">ロンドン</h2> <p>ロンドンはイギリスの首都です。</p> <h2 class="city">パリ</h2> <p>パリはフランスの首都です。</p> <h2 class="city">東京</h2> <p>東京は日本の首都です。</p> </body> </html>

複数のクラス

HTML要素は、複数のクラスに属することができます。

複数のクラスを定義するには、クラス名をスペースで区切ります。<div class="city main">要素は、指定されたすべてのクラスに従ってスタイル設定されます。

次の例では、最初の<h2>要素は両方に属します。cityクラスにもmain両方のクラスからCSSスタイルを取得します。

例

<h2 class="city main">ロンドン</h2> <h2 class="city">パリ</h2> <h2 class="city">東京</h2>

異なる要素が同じクラスを共有できる

異なるHTML要素が同じクラス名を指すことができます。

次の例では、<h2>と<p>の両方が"city"クラスを指し、同じスタイルを共有します。

例

<h2 class="city">パリ</h2> <p class="city">パリはフランスの首都です</p>

JavaScriptでのclass属性の使用

クラス名は、特定の要素に対して特定のタスクを実行するためにJavaScriptで使用することもできます。

JavaScriptはgetElementsByClassName()メソッドを使用して、特定のクラス名を持つ要素にアクセスできます。

例

クラス名が「city」のすべての要素を非表示にするには、ボタンをクリックします。

<script> function myFunction() {   var x = <strong>document.getElementsByClassName("city")</strong>;   for (var i = 0; i < x.length; i++) {     x[i].style.display = "none";   } } </script>

:::panel {.techis-note .techis-panel} 上記の例のコードがわからなくても心配しないでください。 HTML JavaScript で学習できます。 :::panel

章のまとめ

・HTMLclass属性は、要素の1つ以上のクラス名を指定します。
・クラスは、特定の要素を選択してアクセスするために、CSSおよびJavaScriptによって使用されます。
・class属性は、任意のHTML要素で使用できます。
・クラス名は大文字と小文字が区別されます。
・異なるHTML要素が同じクラス名を指すことができます。
・JavaScriptはgetElementsByClassName()メソッドを使用して特定のクラス名を持つ要素にアクセスできます。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル