この記事では「HTMLのclass属性」について解説します。
class属性はHTMLの属性の一つで、Web制作でコーディングする際に最も使う頻度が高い属性です。普段何気なく使用しているclass属性ですが、いくつかの特徴があるのをご存じでしたか？
class属性の基礎知識と特徴について、いっしょに学習していきましょう。
HTMLのclass属性の使い方と基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
HTMLのclass属性とは
class属性はHTMLのタグに設定できる属性の一つです。属性とは要素に設定を付与することができるものです。属性はclassの他にもidやstyleなどがあります。
基本書式は次のようになります。
基本書式
<div class=”class”></div>.class {
スタイルを記述
}基本書式にコードを当てはめると、次のようになります。
<div class="class"></div>.class {
width: 200px;
height: 200px;
background: orange;
}出力結果
See the Pen html-class by ZeroPlus (@zeroplus-programming) on CodePen.
divタグに囲まれた要素はグルーピングされます。そのdivタグに対してclass属性を付与し、そのclass属性に対してスタイルを適用します。そのclass属性を、別のdivタグに付与すれば、そのdivタグにもclass属性に対して適用されたスタイルが反映されます。
divタグではなく、class属性にスタイルを適用したほうがいい理由
divタグはHTMLを全体的に構成しているタグなので、特定の要素に対してスタイルを適用することには非常に不向きです。特定の要素にスタイルを適用する場合は、class属性を付与して、そのclass属性に対してスタイルを適用しましょう。
ここからはclass属性の特徴を解説します。
class属性の特徴1：何回でも使える
class属性は、ページ内で同名のクラス名でも、何回でも使用することができます。
<div class="class"></div>
<div class="class"></div>
<div class="class"></div>.class {
width: 200px;
height: 200px;
}
.class:nth-child(1) {
background: orange;
}
.class:nth-child(2) {
background: blue;
}
.class:nth-child(3) {
background: red;
}出力結果
See the Pen html-class2 by ZeroPlus (@zeroplus-programming) on CodePen.
class属性は同名のクラス名を何回でも使うことができます。反対にid属性は、同名のid属性を複数使うことができません（コーディングのルール上NGです）。
<!-- id名がバラバラなのでOK -->
<div class="class" id="id1"></div>
<div class="class" id="id2"></div>
<div class="class" id="id3"></div>
<!-- 同名のid複数使用はNG -->
<div class="class" id="id1"></div>
<div class="class" id="id1"></div>
<div class="class" id="id1"></div>
id属性と違ってclass属性には、そのような制約がありません。
class属性の特徴2：class属性 はid属性より優先順位が低い
CSSにはスタイルが適用される優先順位があります。ルールの一つは、後から書いたものが優先して適用される、というものです。以下のコードは、classに2種類のCSSを適用させたものです。
<div class="class"></div>.class {
width: 200px;
height: 200px;
background: red;
}
.class {
background: orange;
}出力結果
See the Pen html-スタイル優先 by ZeroPlus (@zeroplus-programming) on CodePen.
後から記述したスタイルが適用されたので、背景色がオレンジになりました。
これを踏まえて、次のコードではどちらのスタイルが適用されるでしょうか？
<div id="id" class="class"></div>#id {
width: 200px;
height: 200px;
background: orange;
}
.class {
background: red;
}出力結果
See the Pen html-css-id-優先 by ZeroPlus (@zeroplus-programming) on CodePen.
id属性で指定したスタイルが優先されて適用されます。
CSSの優先順位のルールで、後から記述したものが優先されるとありました。
id属性よりも後からclass属性でスタイルを指定しても、id属性で指定したスタイルが優先されて適用されます。
このことから、id属性のほうがclass属性よりも優先順位が高いといえます。しかしコーディングのルール上、基本的にはid属性にスタイルは適用せずに、class属性にスタイルを適用するようにしましょう。
class属性の特徴を活かした便利な使い方
class属性の大きな特徴の一つ、（同名のclass名でも）何回でも使えるという特徴を利用すると、効率的にコーディングできることがあります。
次のコードは、背景色を赤に変えるclassを再利用する例です。
<div class="box color-orange"></div>
<div class="box color-orange change-color"></div>
<div class="box color-orange"></div>.box {
width: 200px;
height: 200px;
}
.color-orange {
background: orange;
}
.change-color {
background: red;
}出力結果
See the Pen html-class3 by ZeroPlus (@zeroplus-programming) on CodePen.
このCSSは要素の幅と高さを指定するboxクラス、オレンジの背景色を指定するcolor-orangeクラス、赤の背景色を指定するchange-colorクラスの3つで構成されています。
それぞれのクラスは何回でも使うことができるため、例えば3つめのdivタグにchange-colorクラスを追記するだけで背景色を変更することができます。
このように、スタイルを適用したclass属性を再利用して、別な要素にそのスタイルを適用することができます。この方法を使えば毎回スタイルを記述する必要がなく、効率的です。
まとめ
HTMLのclass属性について解説しました。class属性はid属性に比べて、自由度が非常に高いです。
自由度は高いですが、class属性同士でスタイルの意図しない上書きが発生してコードが破綻することがあります。CSS設計を取り入れていない場合は注意が必要です。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
HTMLのclass属性まとめ
- class属性は何度も使うことができる
- class属性はid属性より優先順位が低い
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
