こんにちは。
株式会社Lifeit（ライフイット）です。
Webサイトを制作するのに欠かせない『HTML』。
「HTMLとは？」「HTMLって何なの？」と感じているのではないでしょうか？
初心者の方でも分かるように解説していきます。
前回の解説の続きとなります。
その他、タグの属性について
「よく使うタグの書き方」として前回に解説をいたしました。
そちらを元に引き続き解説していきます。
まだご覧になっていない方は、是非「HTML入門」からお読みくださいませ。
今回は、前回解説しましたタグについての補助機能的な要素の解説をいたします。
以降でのCSSなどでも活用できる内容にもなりますので、ぜひ覚えておきましょう。
他にも様々なタグに関する属性要素も存在しますが、すべてを覚える必要はないので必要に応じて調べて使っていきましょう。
id属性、class属性について
HTMLソースを見ていると各タグに更に記述されている情報があるかと思います。
その一つでよく見受けられるのが「id属性、class属性」と呼ばれる要素です。
idとclassは開始タグ内に書く属性の1つです。
例えばで、<p id=”text”> や、<h2 class=”title”> というような記述の仕方をします。
idとclassの違いは？
そもそもidとclassの違いは何なのでしょうか。違いは以下のようになります。
・ id：1つのHTML文書内で「同じid名」を使うことができない
・ class：何回でも「同じclass名」を使うことができる
たとえば、<h1 id=”Title”>というタグ書いたら、別のタグに<h2 id=”Title”>と同じid名を使うのはNGです。
一方classであれば、何回でも使うことができます。
<h1 class=”title”>に<h2 class=”title”>、<p class=”title”>のように同じclass名を使いまわしてOKです。
idやclassを書く ＝ タグに管理名をつける
idやclassは例えるならば、タグに管理名をつけるような役割です。
「aタグのid名は”Are”」や「pタグのclass名は”kore”」というように自分の好きな管理名を、
自分の好きなタグにつけることができます。
管理名「id、class」をつける理由
管理名をつけることで、例えばCSSでデザインを決めるときには、そのタグだけを特別なデザインに変えることができます。
「HTMLで各タグに管理名をつけておき、CSSでその管理名のタグのデザインを変える」といった事が出来ます。
「この文字だけ色を変えたい」という場合には、idやclassをふっておき、
それを目印にしてCSSのデザイン情報と紐づけしてあげるといったイメージです。
<p class="red" >この文字は赤にしたい。</p>
idとclassはどのタグにも使える
「imgタグならsrc=””で画像URLを書く」「aタグならhref=””でリンク先URLを書く」というように
タグごとに使える属性は決まっていますが、idとclassはどのタグにも書くことができます。
idとclassの書き方
idとclassは、他の属性と同じようにタグ名の後に「半角スペース」を空けてから書きます。
管理名であるid名とclass名（””の中）は自分で決めることができます。
・ <タグ名 class=”好きな名前”>〜<タグ名>
・ <タグ名 id=”好きな名前”>〜<タグ名>
・ <タグ名 id=”好きな名前” class=”好きな名前”>〜<タグ名>のように両方入れることもできます。
id名とclass名は英数字で記述
<h1 class=”見出し”>などのように日本語のid名やclass名をつけるのはやめましょう。idとclass名は英数字にしましょう。
日本語だと何かとエラーが起きてしまう可能性があります。
id名とclass名の先頭に数字は使えない
<h1 class=”1title”>などのように先頭に数字を書くのはNGです。アルファベットから始まるid名、class名にしましょう。
最後に
引き続き『HTML』についての解説をしました。
「なぜわざわざ2つを使い分けるんだろう」と疑問に思うかもしれませんが、
HTMLとCSSを書いていれば、だんだんと使い分け方が分かってきます。
弊社では制作の請負サービスも承っております。
より詳しく丁寧にご説明もいたしますので、
オリジナルのページを作成をされたいなど場合はご連絡下さいませ。
