Internet Explorer 6

主なIE6のバグと対策方法。

IE6バグ一覧

1. XML宣言をHTMLコードに入れると、IE6が後方互換モード(古いブラウザへの互換性を保とうとするモード)になりレイアウトが崩れる。
2. width/height（ボックス）解釈に関するバグ。IE6ではwidthやheightの値にpadding,border含む。
3. システムフォントのテキストの上の部分が切れることがある。
4. floatで指定した値と同じ方向にmarginの指定をすると、指定値の倍程度になってしまう。
5. サイズをあわせてコーディングしているのに上記の複数の複合的バグからカラム全体の幅が徐々に増えて行きカラム落ちしてしまった。
6. 画像と画像を入れているブロック要素（pとかliとかdivとか）の間に1px程度の隙間が出来る。
7. よくわからないけど、何故か表示が崩れる。
8. 要素同士が重なって表示されてしまう（IEでは、全ての要素が 「hasLayout」という読み取り専用のプロパティがある。デフォルトの状態「hasLayout = false」の場合、幅や高さが他の要素のレイアウトに影響されて伸び縮みし、 表示が他の要素と重なってしまう場合がある。）
9. min-heightが反映されない。
10. marginをマイナスで指定すると、要素が逆方向に移動
11. floatを親要素で解除するために、overfllow:hiddenを使っている場合、IE6では効かない。

上記のバグの対応策

1. XML宣言をhtml冒頭からはずず。
2. widthとpadding、borderを一緒に指定しない。ピクセル単位で合わせるところではborderを使わない。
3. line-hightを1以上で指定する。
4. float する要素には「display:inline;」をセットで記述。その場合、inline要素に高さや幅を持たないのでwidth/heightは指定しないが、widthだけなら指定できる場合が多い。
5. 要素を1つ足すごとにブラウザ確認していれば、カラム落ちした瞬間に遭遇するので、そのcssを書きなおせばいい。防止策としてばfloat する div 要素と、全体を囲む div 要素には width を指定すると回避できる場合が多い。
6. 対象の imgが入っている 要素にvertical-align:bottom;を指定。
7. position:relative;を指定してみると直る事がある。
8. ユニバーサルセレクタに「zoom:1」を指定すると、全ての要素の hasLayout プロパティが trueになるので、ｃｓｓ冒頭に、* { zoom: 1; }を指定。（*は全てと言う意味）これによりバグがかなり解消されるが、ul や ol のリストマークが消えてしまうなど別の不具合が起こりるので、false に戻したい要素だけに「zoom:normal」を指定してhasLayout の値をノーマルにする。
9. IE6は要素の大きさが親要素よりも大きいと自動で親要素も大きくしてしまうので、heightだけを指定する。
10. 対象セレクタにzoom: 1;を指定。（ユニバーサルであらかじめ指定して置くと楽。）
11. 対象セレクタにzoom: 1;を指定。（ユニバーサルであらかじめ指定して置くと楽。）

2 column template

2カラムのテンプレート

サンプルコードで、htmlとcssを制作し、cssを変えるとどのように変化するか見てみよう。

htmlコード

エディターのエンコードをutf-8にし、下記の「ソースを見る」をクリックしたら出てくるコードをコピーしてhtmlファイルのbodyタグの中に貼り付けて保存。

<div id="contents">
<div id="header">
<h1>サイトタイトル</h1>
</div>
<div id="sidebar">
<ul>
	<li>MENUMENU</li>
	<li>MENUMENU</li>
	<li>MENUMENU</li>
	<li>MENUMENU</li>
	<li>MENUMENU</li>
	<li>MENUMENU</li>
</ul>
</div>
<div id="main">
<h2>サブタイトル</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
<h2>サブタイトル</h2>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
<div id="footer">FOOTER</div>
</div>

css

エディターのエンコードをutf-8にし、下記の「ソースを見る」をクリックして出てくるコードをコピペし、任意の名前で拡張子をcssとして保存。これが、全テンプレートの基本形のスタイル。最後尾に各テンプレートのコードを足していく。各書き足しコードの頭には、コメントアウトで説明書きがあるが、推奨できるコードには○が付いている。推奨できないコードには△、使ってはいけないコードには×が付いている。先ほど作ったhtmlのheadタグ内に、このcssのリンクを張っておく。

@charset "utf-8";
/* css reset */
body {
	font-family:"メイリオ","ＭＳ Ｐゴシック", Tahoma, Arial, sans-serif;
    line-height: 1.7;
    color: #333;
	font-size: 12px;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
/* recsr css ここまで　*/

/* 2カラム 共通スタイル　*/
#contents {
	color: #fff;
}
#header {
	background: #7F9F00;
}
h1 {
	padding:10px;
	font-size: 18px;
	font-weight: bold;
}
#sidebar {
	background: #AA7F55;
}
ul {
	padding: 10px;
	font-weight: bold;
}
#footer {
	clear:both;
	background: #2A5F00;
}
#main {
	background: #55BFFF;
}
h2 {
	padding: 10px 10px 0px;
	font-size: 16px;
	font-weight: bold;
}
p {
	padding: 10px;
}

固定幅センタリングテンプレート

/* ○　固定幅　センタリング2カラム　*/
#contents {
	width: 700px;
	margin: 0 auto;
}
#sidebar {
	float:left;
	width:150px;
}
#main {
	float:left;
	width:550px;
}

サイトの幅を固定すると、解像度の低いディスプレイやウィンドウ幅を縮めた場合、横スクロールしないと閲覧できない。

IE6対応版の固定幅センタリングテンプレート

Yahoo Japanが2011年12月で正式にIE6のサポートを終了し、マイクロソフト社自らが、IE6の使用率0％までのカウントダウンページを作るなど、（The Internet Explorer 6 Countdown）消極的サポート終了宣言をするなど、使用率は下がってきているが日本においてはまだ8％のユーザーがおり、ウェブページがIE6正しく表示されることが条件になっているクライアントも存在する。

上記のcssだけだと、IE6で見たときにページがセンターに位置しないで左寄席になる。body全体にtext-align: centerを指定し、body直下のdivにtext-align: leftとmargin: 0 autoを指定するというhackを用いる。

/* ○　IE6対応の固定幅　センタリング2カラム　*/
body {
	text-align: center;
}
#contents {
	width: 700px;
	text-align: left;
	margin: 0 auto;
}
#sidebar {
	float:left;
	width:150px;
}
#main {
	float:left;
	width:550px;
}

IE6対応のページを作るときは、横幅をピクセルで固定したいときにはwidthとpadding (left or right) を同時に指定しない。これを覚えておくとトラブルに巻き込まれることがグッと減る。余白が欲しいときには、それよりも下位の要素にpaddingかmarginを指定する。どうしようもなければdivをもう一度かましてそれに指定する。
IE6には上下のマージン関係で大量にバグが潜んでいる。余白が必要な場合は、paddingを指定する。また、ピクセル単位であわせなければならない場所にはborderを使わない。borderを使いたいときには背景画で指定する。

親divの幅を指定しないで2カラムとヘッダーフッダーを絶対値で指定

/* × 親divの幅を指定しないで2カラムとヘッダーフッダーを絶対値で指定  */
#sidebar {
	float:left;
	width:150px;
}
#main {
	float:left;
	width:550px;
}
#header, #footer {
	width: 700px;
}

親要素（この場合contents）の幅より左右のボックスの幅の和が大きくなると、カラム落ち（右ボックスが左ボックスの下に回りこむ）する。

親div幅とカラム幅を％で指定

/*  △親div幅とカラム幅を％で指定 */
#contents {
	width: 80%;　/* 幅を指定し無ければ100％ */
}
#sidebar {
	float:left;
	width:20%;
}
#main {
	float:left;
	width:80%;
}

ウィンドウ幅を縮めると、幅を％で指定したカラムの要素が見えなくなってくる。

左カラムを幅固定、右カラムに相対値で指定

/*  ×左カラムを幅固定、右カラムに相対値で指定 */
#sidebar {
	float:left;
	width:150px;
}
#main {
	float:left;
	width:80%;
}

ウィンドウ幅より左右のボックスの幅の和が大きくなると、カラム落ちする。

リキッド（可変）2カラム

この形が、ユーザビリティを考慮すると一番望ましいテンプレート

/* ◎　リキッド（可変）2カラム */
#contents {
	width: 100%;
}
#sidebar {
	float:left;
	width:150px;
}
#main {
	margin-left: 150px;
}

css　sort order

標準的な並べ方です。サイトによって、または組織によって並べ方にルールがあるので要確認。

/* CSS 書き順 */

ui li {
	list-style: none;
	float: left;   /* clear: both;  */
	width: 120px;
	height: 50px;
	line-height: 1.7;
	vertical-align: bottom;
	overflow: hidden;
	margin: 10px 5px 8px 3px; /* 上:10px 右:5px 下:8px 左:3px */
	padding: 10px 5px 8px 3px; /* 上:10px 右:5px 下:8px 左:3px */
	border: solid 2px #F00;
	background: #ffffff url(bg.png) repeat-y right top fixed;
	font: italic normal bold 80%/150% "ＭＳ Ｐゴシック";
	text-indent: 1em;
	text-decoration: underline;
	text-align: center;
}

Japanese Font

css reset の頭に日本語のフォントセットを追加しておいて、テンプレ化して使用すると便利です。

Windows7用のメイリオを含んだゴシック書体のフォントセット例。

/* Japanese font set Gothic　*/
body {
	font-family:"メイリオ","ＭＳ Ｐゴシック", Tahoma, Arial, sans-serif;
    line-height: 1.7;
    color: #333;
	font-size: 12px;
}

line-height

line-height の値には単位なしが良い理由

サンプルの上段には line-height の値に単位をつけて指定。

div#tagName p.px {
	margin-bottom: 10px;
	line-height: 12px;
}
div#tagName p.px span {
	font-size: 18px;
	color: #FF3F00;
	vertical-align: text-top;
}

サンプルの上段には line-height の値に単位をつけないで指定。

div#tagName p.none {
	margin-bottom: 10px;
	line-height: 1;
}
div#tagName p.none span {
	font-size: 18px;
	color: #FF3F00;
	vertical-align: text-top;
}

サンプルを見てみると、自体の行の高さは同じなのに、その子要素であるspan要素の行の高さに相違がみられる。p 要素のフォントサイズは12px、単位なしの1と同じ値である。つまり、子孫要素への継承のされ方が違っているって事になる。実際に line-height 値がそれぞれどうなってるのかを表すと下記のようになる。

サンプルの上段には line-height の値に単位をつけて指定した結果。

div#tagName p.px {
	margin-bottom: 10px;
	line-height: 12px;
}
div#tagName p.px span {
	font-size: 24px;
	line-height: 12px;
	color: #FF3F00;
	vertical-align: text-top;
}

サンプルの上段には line-height の値に単位をつけないで指定した結果。

div#tagName p.none {
	margin-bottom: 10px;
	line-height: 1;
}
div#tagName p.none span {
	font-size: 24px;
	line-height: 24px;
	color: #FF3F00;
	vertical-align: text-top;
}

em やpx、 パーセントなどの単位ありで指定すると、まず line-height 値に font-size と掛け合わせた計算値が使用される。この場合、p 要素のフォントサイズは 12px なんで 行ボックスの高さも 12px になる。んで、この計算値が子孫要素にそのまま継承されてしまう。つまり、子孫要素である span要素の行ボックスの高さも 12px となってしまう。

一方、単位なしで1を指定すると、line-height 値にはfont-size と同じ12px が指定される。そして、子孫要素であるspanには指定値である1が継承され、spanのfont-sizeの数値24pxが行ボックスの高さになる。

Reset CSS

ブラウザによって、はじめから画面の上下左右の空き、行間、書体が設定されているデフォルトスタイルシートがあたっています。ウェブページを作る上で全てのブラウザにおいて、同じ見え方にするために、CSS RESET コードをスタイルシートの冒頭に記述します。
全ての上にある*（アスタリスクはhtmlよりも上の階層）によるリセットは、一括指定できて便利なのですが、意図しないスタイルまでリセットしてしまうことと、レンダリングが遅くなるというデメリットがあるので、下記の２種類のReset CSSが主流になっています。Yahoo UI Libraryとは 米ヤフー製のAjaxライブラリーで、無料で配布されています。使用するには、html側のheadタグの中に、http://yui.yahooapis.com/2.9.0/build/reset/reset-min.cssへのリンクを加える方法もあります。冒頭にクレジットを書くようにと注意書きがあります。Eric Meyer's Reserの方もあらかじめ公開コードの冒頭にクレジットが書かれています。html5への対応も同じコードの中でしています。

【Yahoo! UI Library配布の Reset CSS】

/* reset css */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

【Eric Meyerさんが考案した Reset CSS】

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html5に特化したcssリセットコードもすでに開発されていますのでご参考までに。
HTML5 Reset Stylesheet