ywork2020.com

Title

要素をグループ化する

目次 (INDEX)

class とは

ここで説明する class とは次の語句からなる HTML 要素の属性です。
class
読み: クラス
意味: 部類、種類、学級、組

目次に戻る

class 属性の概要

この属性は、ドキュメント上に配置された要素群を任意の値をもってグループ化します。

要素をグループとしてまとめることにより、その要素群に対して CSS を使って共通のスタイル付けを行ったり、 javascript や jQuery を使ってプログラムの操作対象にするなど、活用性の高い属性です。

目次に戻る

サンプルコードと実行結果

ここでは 4つの div 要素を使用し、その div 要素を class 属性を使って 2つのグループに分けます。

この 2つに分けた各グループに CSS と jQuery を使ってスタイル付けをしてみます。

サンプルコード: CSS
<style>
	div{
		border: thin solid;
		margin: 0.5em 0;
		padding: 0 1em;
	}
	.clsDiv_A{
		background-color: ##lightpink;
		border-color: ##red;
	}
	.clsDiv_B{
		background-color: ##lightblue;
		border-color: ##blue;
	}
</style>
  • 02-06: div{ style setting } (div 要素の共通するスタイル付けを行っています。)
  • 07-10: .clsDiv_A{ style setting } (class="clsDiv_A" をもつ要素のスタイル付けを行っています。)
  • 11-14: .clsDiv_B{ style setting } (class="clsDiv_B" をもつ要素のスタイル付けを行っています。)
サンプルコード: HTML
<head>
	<style>...</style>
</head>
<body>
	<div class ="clsDiv_A"> これはサンプルです </div>
	<div class ="clsDiv_B"> これはサンプルです </div>
	<div class ="clsDiv_A"> これはサンプルです </div>
	<div class ="clsDiv_B"> これはサンプルです </div>
	<button id="idButton"> clsDiv_B の背景色をライトグリーンにする </button>
	<script> ... </script>
</body>
  • 05, 07: div class="clsDiv_A" (clsDiv_A というクラス名をもつ div 要素です。)
  • 06, 08: div class="clsDiv_B" (clsDiv_B というクラス名をもつ div 要素です。)
  • 09: button id="idButton" (ボタン 要素です。これをクリックすると jQuery のコードの部分が実行されます。)
サンプルコード: script ( jQuery )
<script>
	$("#idButton").click(function(){
		$(".clsDiv_B").css("background-color", "##lightgreen");
	});
</script>
  • 02-04: $("#idButton").click(function(){ 処理 }) (idButton の要素がクリックされると { 処理 } の部分が実行されます。)
  • 03: $(".clsDiv_B").css( 設定 ) (clsDiv_B の要素群の CSS 設定 を書き換えます。)
実行結果:
これはサンプルです
これはサンプルです
これはサンプルです
これはサンプルです

目次に戻る