HTML class属性

定義と用法

class 属性は要素のクラス名（classname）を指定します。

class 属性主要时候用于指向样式表中的类（class）。ただし、それを利用してJavaScript（HTML DOM）を通じて指定されたclassを持つHTML要素を変更することもできます。

参照もしくは：

HTML タイプチュール：HTML 属性

CSS タイプチュール：CSS 语法

CSS リファレンスマニュアル：CSS .class 选择器

HTML DOM リファレンスマニュアル：HTML DOM getElementsByClassName() メソッド

HTML DOM リファレンスマニュアル：HTML DOM className プロパティ

HTML DOM リファレンスマニュアル：HTML DOM classList プロパティ

HTML DOM リファレンスマニュアル：HTML DOM Style オブジェクト

例

例1

HTMLドキュメントでclass属性を使用する：

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">ヘッダー1</h1>
<p>A paragraph.</p>
<p class="important">重要な段落です：）</p>
</body>
</html>

自分で試してみる

ページの下部にさらに多くの例があります。

文法

<element class="classname">

属性値

値 説明
classname

要素に1つまたは複数のクラス名を指定します。

複数のクラスを指定する場合、クラス名をスペースで区切ります。

これにより、HTML要素に複数のCSSクラスを組み合わせることができます。

例：<span class="left important">

命名規則：

  • 大文字のアルファベットA-Zまたは小文字のアルファベットa-zで始まる必要があります
  • 次の文字が続くことができます：アルファベット（A-Za-z）、数字（0-9）、ハイフン（"-"）およびアンダースコア（"_"）

さらに多くの例

例2

HTML要素に複数のクラスを追加する：

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">タイトル1</h1>
<p>一段。</p>
</body>
</html>

自分で試してみる

例3

JavaScriptを使用して、class="example"の要素（インデックス0）に黄色の背景色を追加します。

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

自分で試してみる

例 4

JavaScriptを使用して、"mystyle"クラスをidが"myDIV"の要素に追加する：

document.getElementById("myDIV").classList.add("mystyle");

自分で試してみる

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート