今回は、HTML入門の第３弾です。
これからエンジニアとして、Webアプリの勉強を始める人にとって入門となる内容となりますので是非、勉強していってください。
【前提】
HTMLについて知りたい人はまずこちらの記事を見て基礎を学びましょう
HTMLについての知識
それでは、ClassとIdについて勉強していきましょう。
- class、idについて
- classとidの違いについて
1.class、idについて
まずは、HTMLにおけるClassについて知りましょう。
classについて知る前に、HTMLのタグと属性の関係について知りましょう。
以下の例をご覧ください。
<p class="small">※このサイトは、XXXXを参考に記事を書いてます。</p>↑の例では、<p>部分がタグ名、class=””部分が属性となってます。
つまり、classは、HTMLでいうところの属性に当たります。
そして、属性は、一つのタグの中に複数入ります。
つまり、classというのは、HTMLタグがないと使えず、HTMLタグがどんな属性を持っているかを表す物になってます。
例えば、以下の例を見てみましょう。
<p>Googleの企業理念は、「地球上で最もお客様を大切にする企業になること」です。</p>
<p>この考え方こそが、現在のAmazonの成功の原点となっているのかもしれません。</p>
<p>2020年時点のAmazonの日本での売り上げは、約204億6100万ドルとなってます。</p>
<p>※この記事は、Azmazonの会社概要から引用しました</p>上の例だと、全て、同じPタグのため文字サイズや行間、色まで全て同じです。
しかし以下の文章だけ文字を小さくしたいときはどうすれば良いでしょうか?
<p>※この記事は、Azmazonの会社概要から引用しました</p>そのような時は、↑のPタグだけ、文字を小さくする「属性」を付ければ良いのです。
<p class="small">※この記事は、Azmazonの会社概要から引用しました</p>これにより、使っているHTMLタグは全てPタグですが、↑のタグだけ、特殊な属性をつけることができました。
詳細はCSSの知識になるのでここではあまり深くは解説しませんが、CSSで以下のように設定することで、class=”small”が付いたHTMLタグの文字サイズを小さくできます。
.small {
font-size: 10px;
}Pタグのデフォルトの文字サイズは、16pxなので、6px(ピクセル)小さい文字になります。
idも同様です。
<p id="small">※この記事は、Azmazonの会社概要から引用しました</p>↑の例では、というように、idの属性をPタグに付与しました。
2.classとidの違いについて
次に、classとidの違いについて知りましょう。
- CSSの指定方法の違い
- 指定可能数の違い
1. CSSの違い
classの場合は、以下のようになります。
HTML側
<p class="small">※この記事は、Azmazonの会社概要から引用しました</p>CSS側
.small {
font-size: 10px;
}次にid側は以下のようになります。
HTML側
<p id="small">※この記事は、Azmazonの会社概要から引用しました</p>CSS側
#small {
font-size: 10px;
}classにすると、CSSは「.」+ class名となり、idにすると、CSSは「#」+ id名となりました。
2. 指定可能数の違い
| class | 1つのclass名を、HTMLページに複数指定可能 |
| id | 1つのid名は、HTMLページに一つまでしか指定できない |
つまりclassの場合は、以下のようなことが可能です。
<p class="small">※この記事は、Azmazonの会社概要から引用しました</p> ← これはOK
<p class="small">※この記事は2021年４月時点の情報です。</p> ← これもOK↑の例のように、class=”small”が2つ定義してますが、問題ありません
それに対してidの場合は、1つしか指定できないので
<p id="small">※この記事は、Azmazonの会社概要から引用しました</p> ← これはOK
<p id="small">※この記事は2021年４月時点の情報です。</p> ← これはNGそのため、idを使う際には、必ず一つだけしか使わない属性として利用しましょう。
smallのように汎用性が高く、複数箇所で使うような属性にidを使ってはいけません。
===============
以上、HTMLのClassとIdについてについて紹介してみました。
この情報が皆さんの人生のお役に立てれば幸いです。
エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。
記事を最後まで見ていただきありがとうございました。
執筆者: hiroエンジニア