<div>タグはブロック分けのhtml

ホームページのhtmlソースを見てみると、<div>というhtmlタグが頻繁に出てきます。この<div>タグは、ホームページのレイアウトを区画化し、ブロック分けをする際に使います。

例えば、当ホームページでは、この<div>タグを使って、ヘッダーやコンテンツの部分、サイドバーなどをブロックわけしています。

<div>タグの後ろに、id や class、align や style などが出てきますが、これらの属性を使って、それぞれのブロックの大きさやセンタリンク、背景の色彩やフォントサイズなどをすることになります。

例えば、上の画像のヘッダー部分の文字を中央寄せにしたい場合、ヘッダー部分を<div align"center"></div>で囲めばいいだけなのですが、当サイトでは、任意の freehp という id を指定して、スタイルシートの方で別に指定しています。

直接指定してもスタイルシートで指定しても、どちらも同じ意味になります。

けれども、現在はスタイルシートを使用してホームページを作成する方法が一般的ですので、なるべく、スタイルシートを用いて、ブロック要素を指定することをおすすめします。

中央よせだけではなく、背景の色彩やボーダー線の大きさや種類、文字の色彩など、さまざまな指定をする際は、スタイルシートで一括指定した方が楽です。

ここでは id="freehp" と指定していますが、id="hoge"など、自分でわかりやすい任意の文字を記入して、スタイルシートの方で対応させます。

id と class の違いですが、idは１箇所で１回だけ使う場合に、class は何度も使うようなブロック要素に指定します。