HTMLのクラス(class)【現役エンジニアが解説】
今回は、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番目の要素に対し、文字色を黒色に変更しています。