【class属性】要素に直接スタイルの変更したり、動作を加えたりする。「HTML・属性・解説」- ノブレコ
nobreco
class属性とは
要素にクラス名を指定するもので、主に要素に対してスタイルシートでデザインを適用するための属性です。
値はスペース区切りのトークンで、複数の値をASCII空白文字で区切って指定できます。ま空の値の（class=" "）も指定できますが、この場合はクラス属性が指定されていないとみなされますが、構文エラーになることもありません。
クラス名は、セマンティクス上の特定の意味を持つものではなく、コンテンツ制作者が自由に、class名の値を命名して指定できます。
【仕様】
★属性の区分
グローバル属性
★対応ブラウザ
・Chrome
・Edge
・Firefox
・Opera
・Safari
【使用目的】
この属性は、大きく分けて２つの使用用途があります。
一つ目は、CSSのスタイルを適用させるために使用する目的があります。
二つ目は、javascriptを適用し、要素のスタイルを変更したり、動作を加えるために使用する目的があります。
また、この他にもマイクロフォーマットと呼ばれるメタデータの記述に用いられることもありました。
CSSでスタイルを適用する
CSSのクラスセレクターを利用すると、特定のクラス名を持つ要素にスタイルを適用できます。
例えば、<p class="class-name"> のように、<p>要素にclass属性とクラス名を指定したとします。
そして、この後スタイル変更のため、CSSセレクタを指定するのですが、この時に気を付けなければならないことがあります。
CSSセレクタを記述する場合は、CSSプロパティの前にピリオド（.）を付けたクラス名を記述します。
この例ですと、「 .class-name { CSSプロパティ: 値;} 」という記法でCSSセレクタを指定してスタイルを適応させることになります。
※ちなみにclass属性は同じクラス名でも、ページ内であれば重複して何回でも使用することができます。
これはid属性と大きく異なる点でもあります。
javascriptを使用する
クラス名は、javascriptを使用することもできます。
Get Elements By Class Name() メソッドで特定のクラス名を持つ要素を取得したり、query Selector() メソッドでクラスセレクターとして利用できます。
【使用上の注意点】
① 特定の要素にスタイルを適用する場合の注意点。
例えば<div>タグを使ったスタイル変更の方法がありますが、<div>タグはHTMLのフローコンテンツのブロック要素になるので、HTML要素の構造全体の一部として扱われるため、細かく特定の要素にスタイルを適応させることには不向きです。
こういった場合には、直接に特定の要素に対してclass属性を付与し、属性値を指定してスタイルを変更をしましょう。
② クラス名を付ける際の注意点。
class属性とid属性は、自由なクラス名を入れることができますが、その名前を付ける際に少し制限があります。
【制限の種類】
・大文字と小文字の区別がある。
・使用できる文字は、半角の英数字、ハイフン（-）、アンダーバー（_）のみ。
・クラス名は、数字や記号ではなく、アルファベットで始めなければならない。
③ クラス名の命名規則の流儀。
クラス名の命名は開発者の自由ですが、無秩序に命名することは、運用や管理を難しくしてしまうので注意です。
【指定できる要素】
class属性はグローバル属性のため、全てのHTML要素に指定することができます。
ですが、指定したHTML要素との組み合わせ次第では、属性の効果が発揮されないことがあるので注意してください。
★旧HTMLからの変更点
HTML5：align属性が廃止されました。
HTML5.2：<dl>要素内に配置できるようになりました。
実用例
■class属性の使用例
★class属性の記述例
【HTML】
<p>要素にclass属性を付与し、属性値には、クラス名として"colorname"と命名しています。
【CSS】
この例では、<head>要素内に<style>要素を記述して、その中にCSSを記述するのですが、その際に、CSSセレクタとしてクラス名の先頭にピリオド（.）を付けてCSSセレクタを記述することがルールです。
★表示結果
まとめ
この記事では、class属性についての解説をいたしました。
この属性はid属性に比べて、非常に自由度が高く、便利で使用頻度の多い属性です。
便利だからと多用すると、優先順位などの影響で思わぬ上書きが発生することがありますので、その点に注意したいですね。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん(ˉ﹃ˉ)
