7.HTMLタグの属性「class」とは～自分でタグをグループ分けできる～

先日、HTMLタグの中身について整理した記事を書きました。

本日はタグの属性の部分、特にclassについて整理します。

属性のおさらい

HTMLタグの「属性」にはブラウザに「どんな種類の付加情報があるか」を伝え、

さらに「値」を設定することで、「付加情報の具体的な内容」を伝えられる。

<要素名属性="値"></要素名>

の形で記載するんでしたね。

※前回の記事を参考にして下さい。

6.HTMLタグに込められた「内なる想い」を知る～HTMLタグの中身～ - web制作のしおり

classって何？赤組とか白組の？

おおよそ、その認識であってます。グループに分ける。

管理の観点から小学校のクラスに例えてみましょう

仮に全校生徒が500人だとして、クラスというグループ分けが存在しなかったら、

500人の個人名だけで、学年、出席番号、管理することになりますよね？

いわば500人が在籍する”小学校クラス”とでもいいましょうか。

これに従来の小学校などのクラス分けを当てはめると、

”4年A組”クラスとするだけで、

30人の生徒が属する集団にまで管理する幅が狭まりますよね。

話をwebページに戻します。

webページを作って行く上で、HTMLファイル内の要素はそれはもう沢山です。

ということで、小学校の例と同様に

class属性を用いて要素をグループ分けすることで、管理が楽にできるのでは？

ということです。

要素のクラス名(グループ分け)って誰が決めるの？

グループはweb製作者が決めます。

「属性」に対して、設定する「値」がグループにあたります。

HTMLで書くとすれば以下のような形です。

<要素名 class="グループ名"></要素名>

注意したい！

ここまでの内容で、「要素にグループを設定する」

というイメージを持たれている方も、いるかもしれません。

これでも間違いでは無いのですが、HTMLの目的を考えると

「要素の所属グループをブラウザに伝える」

というイメージの方が良いと思います。

要素に付加する情報でしたよね。

また、クラスは複数設定することができます。

先程の1人の小学生の話に例えると、

小学校という中でのクラス、書道教室の中でのクラス、英語教室の中でのクラス

など、1人で複数のクラスに所属できるのと同じです。

<要素名 class="グループ名1 グループ名2 グループ名3"></要素名>

のように書けます。

結局は「ブラウザへのお知らせ」

ブラウザに「この要素はこのグループに所属しているよ」

という事を伝えているだけにすぎません。

いまいちメリットが見えてこないけど？

それもそのはず、このclass属性はCSS等の他のテキストファイルと

組合せて使われることが殆どです。

ここでは深く触れませんが、

「指定グループに所属する要素のみ処理をさせる」ことが可能になります。

例えば、「赤クラス」に所属する要素は、「文字を赤くする」といった、

ことをブラウザにお願いできるようになるわけです。

また、CSSとの組合せについては追々整理していきたいと思います。

今日のまとめ

classは要素のグループ分け
グループ分けは製作者が決める
要素の所属するグループをブラウザに伝える
グループ単位で処理をブラウザにお願いできる

今日はclass属性について整理しました。他との関連が深い属性だと思います。

「グループを分ける」というよりは、「要素の所属の表明」という方がしっくりくるかなと記事を書いていて思いました。

では、また。