HTMLをいじっていると、たびたび出てくるのがclass="○●"、id="○●"という記載。
class="○●" とか、 id="○●"とか、ぴんと来ない人も多くない？
正直、管理人は、まったく意味がわからなかった。
「class="○●"・ id="○●"とHTMLの関係」と、「class・ id使い方の注意点・記載のしかた」を一寸メモ代わりにまとめてみた。
class="○●"、 id="○●"の○●は、外部スタイルシートの名前を示す
例を挙げたほうがわかりやすいかも。
外部スタイルシートの例）
1) .rei{font-size:large;color:#000000;}
2) #rei{font-size:large;color:#000000;}
HTMLの記載例）
1)<p class="rei">ここに記載したものは、rei{font-size:large;color:#000000;}のスタイルが反映される。すなわち、文字の大きさはlarge、文字の色は#000000となる。</p>
2)<p id="rei">ここに記載したものは、rei{font-size:large;color:#000000;}のスタイルが反映される。すなわち、文字の大きさはlarge、文字の色は#000000となる。</p>
HTMLに直接スタイルシートを書き込んだ例）
<p style="font-size:large;color:#000000:
">ここに記載したものは、rei{font-size:large;color:#000000;}のスタイルが反映される。すなわち、文字の大きさはlarge、文字の色は#000000となる。</p>
この3種類の記載、全部webサイトでは同じ表示になる。
上の例は、段落（<p></p>）のスタイルを指定した場合だが、「<div></div>」「<span></span>」でも考え方は同じ。
classと idの違いと使い方の注意点
・「id」は1ページ内で同じ名前を1回しか使用できない。
外部スタイルシートの記載は#○●{}。
・「class」は1ページ内で同じ名前を何度も使用できる。
外部スタイルシートの記載は.○●{}。
表示上は、「id」を何回も使っても、webサイトを見る分には問題ない。
が、アクセス解析などでエラーになったりする場合があるらしい。
id（外部スタイルシートの記載は#○●{}）は使わなくても問題ないそうだ。
id（#○●{}）を使わずに、class（外部スタイルシートの記載では .○●{}）で記載したほうが問題が出なくてすむかもしれない。
アクセス解析などでエラーが出る人は、HTMLやスタイルシートをもう一度見直してみると良いかもしれない。
コメント