class属性とid属性の使い方と使い分けをゼロからわかるように解説していきます。
使う場面
classとidを使う場面はHTMLにCSSを適用する時で、基本的にどのようなHTMLタグにも使うことができるのがポイントです。
豆知識
どのタグにも使えるclassやidに対し、href属性(aタグ(リンクタグ)とセットで使い、URLを記述する)といった使えるタグが限られている属性もあります。
サンプルコード
1.各タグに適用する場合
<h2 class="ここにクラス名">○○</h2>
<h2 id="ここに要素名">○○</h2>
- もちろんh2を他のタグに変えてOK
2.divやspanを使う場合
div,spanタグとは
タグ内の特定の部分(=特定の文字など)や複数のタグにまとめて設定するデザイン(=背景色など)を適用させるときに使うタグ。divは前後に改行が入るがspanは入らない。
見やすいブログ記事を作るためのHTMLを学ぶならブログ向けHTML講座
<div class="クラス名">
<p>見やすいブログ記事を作るためのHTMLを学ぶなら<span class="クラス名">ブログ向けHTML講座</span></p>
<div>
divタグとspanタグの詳細は以下の記事で解説しています。
classとidの違い
- class
- 1つのページ内で何度でも使える。
- id
- 1つのページ内で1度しか使えない。クラスよりも優先して反映される。
CSSの書き方の違い
classとidでスタイルシートの書き方が異なっているのでご注意ください。
classの場合
.○○(クラス名){
ここにCSSを記述
}
- ドット(.)を忘れない!!
- クラス名は半角英数字で
idの場合
#○○(要素名){
ここにCSSを記述
}
- ハッシュ(#)を忘れない!
- 要素名は半角英数字で
結局どちらを使うべきか
- ブログやメディアの記事用のCSSは全てクラスでOK
- 一からWEBサイトを制作する場合はケースバイケース
- ※サイトの規模、コーダーの方針などによって変わるため。
結局これはどちらが良いと言い切れるものではなく、同じページで繰り返し使うタグさえ間違えずにクラスにしておけば後はどちらでも問題ありません。
ブログやメディアの記事の装飾はhタグ(見出し)のデザインや文字を囲むなどの繰り返し使う装飾がメインになると思いますので、全てクラスにしておきましょう。
idの別の使い道
idはページ内リンクを作るときにも使うことができます。ブログやWEBメディアを運営している場合はこちらで使う場面がほとんどでしょう。
ページ内リンクのサンプルコード
リンク
<a href="#好きな名前">表示する文字</a>
- ハッシュ(#)を忘れないよう注意
- 名前は半角英数字で
- URLは不要
- 同じページに同一のリンク先へのリンクを複数つけてもOK
リンク先
<h2 id="リンク側で付けた名前">見出し名</h2>
- リンク先にハッシュ(#)は不要
- 同じ名前のリンク先を複数設定しないように注意。