HTMLの属性、classとidの名前の考え方と使い分け

カテゴリー:HTML

HTMLの入門中の入門、class属性とid属性についての記載です。class属性とid属性は、ホームページを作るときに主に見た目を整えるCSSと動的に動かしたりするJavaScriptを使用するときにHTML側につけるタグの名前的なものです。

class属性

HTMLのタグにclass属性はclass=”好きな名前”という形で付与していきます。

・class属性にclass-nameという名前を付与したCASE
<div class="class-name"></div>

class属性は一つのHTMLのタグにスペースで間を開けて複数しているすることも可能です!

・class属性に複数クラスを付与したCASE
<div class="class-name class-name1 class-name2"></div>

class属性とid属性との大きな違いとして、1ページに何度も同じclass名を使用することができます。

同じclass名を複数のHTMLタグに付与する例
<div class="class-name class-name1 class-name2"></div>
<div class="class-name class-name1 class-name2"></div>
<div class="class-name class-name1 class-name2"></div>

ボタンなどをCSSで作成するときにbuttonとclass名を付与してまとめて同じ形にするときなどに同じclass名を使用したりしています。

id属性

HTMLのタグにid属性はid=”好きな名前”という形で付与していきます。

id属性はclass属性と違ってid名にスペースを含むことができない点と一意でなければいけない点に注意が必要です。

<div id="idNameUnique"></div>

id属性はaページ内リンクなどにも使用することが可能です。

class属性とid属性の名前の考え方

単純にCSSとして見た目に使用するclass属性は単語ごとに-で区切って名前をつけています。よく使うCSSのフレームワーク、Bootstrapも-で区切っているので、同じようにしています。

JavaScriptで使用するclass属性とid属性はキャメルケースにして、使用用途がわかるように、個人的にしています。ちなみにキャメルケースは単語ごとに頭文字を大文字にする命名規則です。

HTMLも資格試験を受験するのは別として、資格の参考書で学習するのも、習得への近道だと思います。

HTML5レベル1 HTML5プロフェッショナル認定試験の参考書をHTMLの入門書の一つとして使用していました。基礎を学べる良いHTMLの入門書だと思います。私は試験を受ける余裕がなくてまだ未受験なので、いつか受験をしてみたいです。


タグ

関連する投稿

ドラクエ好きな社会保険労務士有資格者・ファイナンシャルプランナー技能士検定2級正会員が運営をしています。当ブログではDQMSLを中心にWordPress・HTML・CSS・JS・PHPなどのTips備忘記録や資格関連の情報、その他雑記を発信して行きます。