2020/11/01

HTMLのクラス(class)【現役エンジニアが解説】

PROGRAM

今回は、HTMLのクラス(class)について、クラスの付け方とCSSやJavaScriptでの使い方に分け、簡単に解説していきます。

クラスの付け方

要素にクラスを付けるには、class属性を指定します。

class属性はスペース区切りで一つの要素に複数クラスを付けることも可能です。

<div class="hoge">hoge</div>

上記のコードでは、あるdivの要素に対し、hogeというクラス名を付け、CSS等から特定できるようにしています。

クラスのCSSからの使い方

HTMLでクラスを付けた要素に対しては、CSSからスタイルを適用できます。

HTMLでクラスを持つ要素は、”.クラス名”でCSSからスタイルを適用することができます。

.hoge{
    padding: 2px;
    color: blue;
}

上記のコードでは、hogeというクラスの要素全てに対し、2ピクセルの余白を与え、文字色を青色に変更しています。

クラスのJavaScriptからの使い方

HTMLでクラスを付けた要素に対しては、JavaScriptからスタイル等を適用できます。

JavaScriptでは、document.getElementsByClassNameメソッド等でクラスの要素を特定できます。

var hoges = document.getElementsByClassName("hoge");
hoges[0].style.color = "black";

上記のコードでは、hogeというクラスを持つ要素を全て取得し、そのうちの0番目の要素に対し、文字色を黒色に変更しています。

• facebook
• Tweet
• Read Later