HTMLの豆知識

参考になるURLがありましたのでメモします。
また、個人のメモとしてページの一部を引用させていただきました。

閉じタグの要不について

http://victreal.com/Junk/htmlTag/

フォームを作る際にtableレイアウトを使わず、CSSで作られた方の感想

http://128bit.blog41.fc2.com/blog-entry-169.html

CSSレイアウト崩れの原因

http://css.uka-p.com/cause/

スペースの幅を超える画像の掲載

http://css.uka-p.com/cause/space_img.html

※500pxのメインスペースに520pxの画像を掲載した場合、メインスペースの幅は画像に合わせて520pxに変わってしまいます。これにより、メインスペース+サイドバーの幅が外枠の幅を超えてしまい崩れが生じます。
これを防ぐためには、画像はメインもしくはサイドバーの幅より小さいものだけを掲載するようにすればいいのですが、うっかり大きな画像を載せてしまったり画像を縮小できない場合が出てきます。

対策:overflow:hidden;
ついうっかりといったケースに備え、あらかじ回避する手段をとっておきましょう。




↓最近では、IE7以上をカバーしていればOKという案件が多いようですが、
 知識として理解しておきましょう。

ブラウザによる「padding」の解釈の違い

http://css.uka-p.com/cause/browser_padding.html

IE7Firefoxのpaddingは、枠の内側にとられその分内側の幅が狭まる。
 (width:500px、padding:10pxと指定した場合、
  幅500−左10−右10=ボックス内側の有効幅480px)
※IE6は、枠の外側に取られその分枠の幅が広がる。
 (有効幅500+左10+右10=ボックス幅520px。
  IE6では内側に余白を設けた分だけボックスの幅を広げる)

ブラウザによる「border」の解釈の違い

http://css.uka-p.com/cause/browser_border.html

IE7Firefoxのpaddingは、罫線が枠の外側に引かれ、その分枠の幅が広がる。
 (500pxのボックスの左右に10pxずつの罫線を引いた場合、
  ・IE6では幅500px、内側の有効幅480px。
   ⇒ボックスの内側に線が引かれ幅が変わらない。
  ・IE7Firefoxでは幅520px(内側の有効幅は500px)。
   ⇒ボックス外側に線が引かれることで幅が「指定した幅+罫線の太さ」に変化します。)