div要素

div要素 html要素をグループ化する ブロック要素

CSSでdivで囲ったグループごとにデザインすることも可能です。文を囲んで線などを付けることもできます。
div要素の内容になるものはブロック要素、インライン要素、テキストです。
インライン要素やpやbrやh3などブロック要素もdivで囲うこともできます。divの中にdivも入れられます。
ホームページの枠組みやブログのレイアウトにもよく使われています。

<div>文字</div>

divを中央に寄せる（中央揃え）

div要素で枠組みしてcssを使ってデザインを決めます。
div.cでdiv.aとdiv.bを囲み中央配置します。
IEのブラウザ対策のためbody要素にtext-alignプロパティを使って中央に寄せています。（IE6のブラウザはmargin:autoで中央寄せができないのでtext-alignプロパティで中央寄せができるバグを利用します。）
div.cのmargin:0 auto;で上下のマージンは0、autoで左右のマージンを自動で中央寄せしています。text-align:left;はbodyで指定したテキストの中央寄せを左寄せになおします。
ブラウザさえ対応すれば将来はmargin:0 auto;だけでも中央寄せできるはずです。
html

<div class="c">cの枠
<div class="a">aの枠</div>
<div class="b">bの枠</div>
</div>

css

body { text-align: center; }
div.c { margin:0 auto; width: 900px; text-align: left; }
div.a { float: left; width: 200px; }
div.b { float: left; width: 700px; }

cssでデザインを指定する場合

html ※クラス名は好きなように変更してください

<div class="a">文字</div>
<div class="b">文字</div>
<div class="c">文字</div>

css

回り込み、段組をする

floatプロパティで回り込みの指定をします。
値にはleft（左寄せ）、right（右寄せ）、none（左右の配置と回り込みをしない）
※floatプロパティを使う場合はwidthで幅の長さもいっしょに指定してください。

div.a { float: left; width: 200px; }
div.b { float: left; width: 700px; }

回り込みの解除

floatプロパティで指定した回り込みをclearプロパティで解除できます。
値にはleft（float: left;を解除）right（ float: right;を解除）both（両側を解除）none（解除しない）

div.c { clear: both; width: 900px; }

枠線を付ける

枠線がほしい場合はborderプロパティで線のデザインを指定してください。
borderプロパティを付け足して線の太さ、線の種類（solidは実線）、線の色を指定します。
※線には太さがあるのでdiv要素でdiv要素を囲んだときに線の太さを計算にいれないと全体のデザインが崩れることがあります。

div.a { border: 1px solid #FF9900; }

共通属性

指定できる共通属性

id属性 class属性 style属性 title属性 lang属性 dir属性

イベント属性

イベント属性