class属性 - 要素のクラス

公開日: 2017/02/21

class属性は、要素のクラスを設定するための属性です。スタイルシートのセレクタや、JavaScriptで要素を取得するための値になります。半角スペース( )で区切って複数指定できます。

説明

class属性値に、追加したいクラス名を指定します。同じクラス名を複数の要素に付けても大丈夫です。各クラス名の先頭、または末尾に空白文字(改行、タブなど)を含んでもかまいません。

HTML

<!-- クラスを付ける -->
<span class="foo">SYNCER</span>はウェブサイトです。

<!-- 同じクラスを複数の要素に付ける -->
<span class="foo">SYNCER</span>はウェブサイトです。
<span class="foo">ウサギ</span>は動物です。

<!-- 各クラス名の先頭、末尾に空白文字を含んでいい -->
<span class="
	foo
	bar
">SYNCER</span>はウェブサイトです。

1つの要素に複数のクラス名を付けることができます。半角スペース( )で区切って下さい。

HTML

<!-- foo、bar、hoge、の3つのクラスを付ける -->
<span class="foo bar hoge">SYNCER</span>はウェブサイトです。

クラス名を付けた要素には、クラスセレクタを利用してスタイルシートを適用できます。

CSS

/* fooというクラスを持つ要素に適用 */
.foo {
	background-color: red ;
}

JavaScriptで要素を取得したい時にも、利用できます。

JavaScript

// fooというクラスを持つ要素を全て取得
var elements = document.getElementsByClassName( "foo" ) ;

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】class属性 - 要素のクラス</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/class/">
		<style>
			body {
				background-color: #fff ;
			}

			.foo {
				color: red ;
				font-weight: 700 ;
				text-shadow: 1px 1px 1px #000 ;
			}
		</style>
	</head>
	<body>

<p>class属性は、要素にクラスを付けるための属性です。</p>

<p><span class="foo">SYNCER</span>はウェブサイトだ。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/836/"> <meta charset="utf-8"> <title>【デモ】class属性 - 要素のクラス</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/class/"> </head> <body>

<p>class属性は、要素にクラスを付けるための属性です。</p> <p><span class="foo">SYNCER</span>はウェブサイトだ。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } .foo { color: red ; font-weight: 700 ; text-shadow: 1px 1px 1px #000 ; }

</style>

</script>