情報源: HTMLのdiv classとは?5分でわかる事例付き解説|Udemy メディア
情報源: 初心者の為のDreamweaver講座!
*idとclassの違いは?
idとclassはCSSでレイアウトしていく上で、必ず何個も使いますがなんの違いがあるのでしょうか?
まず「idは同じ名前を2回以上使うことは出来ない」が「classはページ中に何回でも登場出来る」と言う違いがあります。
という事は「全てclassで指定しても良いんじゃないの?」と考える人もいると思います。
間違いではないですし、それでサイトを構成していくのは可能なんですが、
複雑なサイトを運営していくと、どうしてもidやclassをたくさん使わなければいけなくなってきます。
その時にidとclassを分けておくと、どこをいじればいいのかがわかりやすくなります。
それに、もし自分のサイトを他の人に編集してもらう事になった場合、一回しか使わない場所をclassで指定していると、編集する時に「これはclassで指定しているから、他の場所でも使われているのか」と考えて効率が悪くなってしまいます。
出来る事ならidとclassは使い分けた方が良いと私は思います。
*idとclassの指定の仕方と使い方
・idの指定(HTML)
<div id=”sample”>内容</div>
・idの指定(CSS)
#sample { color:red; }
・classの指定(HTML)
<div class=”sample”>内容</div>
・classの指定(CSS)
.sample { color:red; }
CSSでは「#」か「.」の違いになります。
*idの利点
idの利点として、idの属性がついている場所に、ページ内リンクをさせる事が出来ます。
例えばこうやって記事を読んで頂いているわけですが、一番上の記事まで戻りたいときにidの属性をつけて「一番上に戻る」と言った事が出来るわけです。
・idリンクの指定のやり方
<a href=”#header”>一番上に戻る</a>
この記述で「一番上に戻る」が作る事が出来ます。