属性・Class・IdなどHTMLタグの細かい部分を見ていこう!!

前回はHTMLという言語がWebサイトの構造を書いていく(記述する)言語で、最も基本的な言語になるという事と、見た目の部分はCSSという言語を使用するという事、HTMLはタグを使って「どこからどこまでの文にどんな意味をつけるのか」目印をつけていくという事を書きました。
今回はもう少し踏み込んだ内容になります。

終了タグが必要ないタグ

HTMLタグには「どこからどこまでの文にどんな意味をつけるのか」目印をつけていく意味があるという話をしましたが、中にはその必要がないタグも存在します。
その代表例がimage(画像)を意味する<img>タグ。これは画像を表示する際に記述しますが、画像には別に「どこからどこまで」表示するのか指定する必要がありませんよね。どの辺に画像を配置したいのか指定するだけで充分なので開始タグのみ記述すればOKです。
このような終了タグが必要ないタグのことを「空要素」と言います。

属性

「属性」というのはHTMLタグに、より細かい補足情報をつけていくために必要な文字列です。
例えばWebサイトにリンクを貼りたい場合「<a>」というタグを使用するのですが、そのリンクをクリックするとどのページに移動するのか指定する必要があります。その場合「href属性」という属性をaタグの中に記述します。細かい記述方法は少し置いておいて、実際のコードを見てみましょう。

<a href="https://www.google.co.jp">クリックするとGoogleに移動</a>

要は<a>このように囲むだけじゃ</a>伝えきれない情報を補足的に指定するという事ですね。
さて、細かい記述方法ですが属性を記述したいタグの開始タグに半角スペースを空け、まずはどんな内容をこれから記述するのか指定するために属性名というものを書きます。次に「＝」で「”」を2つ書いてダブルクォーテーションの中に属性値という実際の値を書いていきます。
先ほどの例だと「href」が属性名(hrefはHypertext Referenceの略で今からリンク先を記述するよという意味)、「https://www.google.co.jp」が属性値(リンク先はhttps://www.google.co.jpだよという意味)になります。

このように開始タグの中にプラスアルファで色んな意味をつけたりする事で複雑なWebページの表示を実現しているんですね。
そして属性の中には「このタグに書かないと意味がない」という属性も存在するので、どのタグにどんな属性が使えるのか把握しておきましょう。

classとid

更にこの属性の中で最も頻繁に使うものにclassとidがあります。
これは簡単に説明するとHTMLタグに名前をつけてグループ分けを行う機能で全てのタグに使用できます。
どのような場面で使用するのかというと…Webページを作っていくと同じようなタグが画面いっぱいに埋め尽くされるようになります。
例えば段落を意味するparagraphの略の<p>タグ。
ある場所では赤い文字色にしたいけれど、別の場所では黄色い文字色にしたい。また他の場所では青色にしたい。
そうなってしまった時に、「redっていう名前のclassの<p>タグは赤色ね。」とか「greenっていう名前のidの<p>タグは緑色ね」「blueっていう名前のclassの<p>タグは青色ね」という風に同じpタグでもclass名やid名をそれぞれ付けていく事で、適応させるスタイルを変える事ができます。
この機能は主にCSSと絡めてサイトの装飾を行う時に効果を発揮するのでその際にもう一度説明しますが、要はHTMLタグの種類は数が限られているので、その限られたタグの中でも色んな見た目・スタイルを持たすためのタグごとに振り分ける名前という事です。
そして肝心の使い方ですが、開始タグのタグ名の後ろに半角スペースを入れて「id=”id名”」もしくは「class=”class名”」です。先ほどの<p>タグの例で行くと下のようになります。

<p class="red">サンプルテキスト</p>
<p id="green">サンプルテキスト</p>
<p class="blue">サンプルテキスト</p>

idとclassの属性値は半角英数字であれば自由に設定する事ができますが、後で見返した時にその名前が一体何を表しているのか分かるような名前にしておきましょう。
ちなみにidとclassの違いですが、ページ内で同じ名前は1つしか存在させれないのが「id」で、ページ内で制限なく何度でも同じ名前を付ける事ができるのが「class」です。
何度も名前をつける事ができるなら「class」ばっかり使えばいいじゃないと思うかもしれませんが、「id」の方がページ内で1度しか同じ名前を使えないので「class」よりもスタイルが優先されるんですね。
この違いはCSSで実際にWebサイトの装飾を行う時に重要になってきます。

今回のまとめ

第2回目お疲れ様でした。今回はHTMLタグには終了タグが必要のない「空要素」があるという事。HTMLタグに情報を付随する「属性」と、「class」「id」について見てきました。
基本的にHTMLは文章をタグで囲み、必要に応じて属性を設定し、classとidで名前をつけて後でCSSでスタイルを指定しやすくしていきます。