IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎

DOCTYPEを書く。

HTMLの先頭にDOCTYPEを入れるようにして下さい。
DOCTYPEがないと、ブラウザ間での誤差が起こりやすい状態になります。

DOCTYPE スイッチについてのまとめと一覧表 (HTML 5 や IE 8 Beta 2 のモードスイッチなどの情報も含んだ 2008 年版 )

ブロック要素とインライン要素を覚える。

HTMLタグには「ブロック要素」と「インライン要素」が存在します。
これらを覚えることにより、正しいHTMLがかける大きな一歩になります。

ブロック要素

div, h1～h6, ul, ol, li, p, blockquote, addressなど

インライン要素

a, img, strong, em, small, inputなど

hx(h1～h6)、p、addressの中にブロック要素は入れらません。

hx(h1～h6)、p、addressなどの中にはブロック要素(div,p)などをさらに入れることはできません。
これらの中にはインライン要素しか入れることができません。

間違った例

<p>
  <h1>(*ﾟｰﾟ)ゞ</h1>
</p>

正しい例

<p>
  <strong>(*ﾟｰﾟ)ゞ</strong>
</p>

インライン要素の中にはブロック要素を入れることができません。

span,strong,emなどの中に、ブロック要素(div,p)などをいれることができません。

間違った例

<span>
  <h1>(*ﾟｰﾟ)ゞ</h1>
</span>

正しい例

<h1>
  <span>(*ﾟｰﾟ)ゞ</span>
</h1>

ul, olの直下には、li　しか入れらません。

ul,olの直下にli以外のタグを入れると、CSSの挙動がブラウザごとに異なってしまいます。
文法通りに書いて下さい。ただし、liの中には何でも入れれます。

間違った例

<ul>
  <li>(´・ω・`)</li>
  <ul>
    <li>(`･ω´･ )</li>
  </ul>
  <li>(´・ω・`)</li>
</ul>

正しい例

<ul>
  <li>(´・ω・`)
    <ul>
      <li>(`･ω´･ )</li>
    </ul>
  </li>
  <li>(´・ω・`)</li>
</ul>

dlの直下には、dt,ddしか入れられません。

dlの直下にはdt,dlしか入れられません。CSSの挙動がブラウザごとに異なってしまいます。
またdtの中にはインライン要素しか入られません。文法通りに書いて下さい。

間違った例

<dl>
  <dt>顔文字とは？</dt>
  <dd>顔文字（かおもじ）は、文字や記号を組み合わせて表情を表現したものでアスキーアートの一種であり、アスキーアートの中でも、特に1行で表す事のできるものを指す。</dd>
  <ul>
    <li>:)</li>
    <li>:p</li>
  </ul>
</dl>

正しい例

<dl>
  <dt>顔文字とは？</dt>
  <dd>顔文字（かおもじ）は、文字や記号を組み合わせて表情を表現したものでアスキーアートの一種であり、アスキーアートの中でも、特に1行で表す事のできるものを指す。
    <ul>
      <li>:)</li>
      <li>:p</li>
    </ul>
  </dd>
</dl>

tableのカラム数が増えた場合、colを使用しましょう。

tableのカラム数が増えた場合には、colを使用しましょう。
colを使用することによって、クリーンなHTMLを書くことができます。

<table>
  <col id="O_O" />
  <col id="OwO" />
  <col id="O-O" />

  <tr>
    <th>HTML</th>
    <td>div</td>
    <td>a</td>
  </tr>
  <tr>
    <th>CSS</th>
    <td>width</td>
    <td>height</td>
  </tr>
</table>

HTMLは最小限に抑えるように心掛ける。

HTMLの記述が不必要に多く、それにかかるclassなどが多いとメンテナンス性が損なわれます。
メンテナンス性が低いと、咄嗟のバグにも対応が難しくなります。
さらに不要なタグ、id、classが多いとクロスブラウザに対してもレイアウトの差異を生みやすい原因となりえます。

idとclassの違いを理解する。

idはそのページ内で1つしか使用してはいけません。
idを使用する場合は、ヘッダーやコンテンツなど大まかなレイアウトを制御する場合に使用した方が良いでしょう。

classはそのページ内で何回でも使用可能です。
さらに複数のclassを繋げることもできます。

<style type="text/css">
.O-O {color:#fff;}
.O_Olll {padding:10px;}
</style>

<p class="O-O O_Olll">めがね</p>

子孫セレクタをうまく利用する。

子孫セレクタを利用して下さい。
そうすることによって、HTMLのclassの記述量が減り、メンテナンス性が高くなります。

<style type="text/css">
.o_o li {color:#c0ffee} /* class="o_o"の中のliの色を変更することができます。 */
</style>

CSSの優先度を理解する。

CSSには優先度が存在します。
id > class > element(div,p,spanなど) > *

idから上記の順で優先度が変わります。
さらにこの優先度は子孫セレクタなどの場合、優先度が加算されていきます。

marginとpaddingを使い分ける。

CSSを覚え始めた人に陥りがちなのが、paddingを大量に使用すること。
marginを理解することは、クリーンなHTMLを書く基本となります。

display:inlineの特性を理解する

display:inlineはfloatを使わなくても横に並んでくれます。
ただし隙間ができたり、width、heightの指定、marginの上下が効かなくなりますが、便利なプロパティの1つです。

floatを使いこなす。

「ブラウザでレイアウトが崩れやすいからfloatはなるべく使わない。」
それは大きな間違いです。
floatを使いこなせば、クロスブラウザに強くなり、様々な表現方法を得る事ができるでしょう。
クロスブラウザで1pxを揃える場合でも、強力な味方になってくれます。

floatを使用する場合は、widthを指定するかdisplay:inlineかどちらかを指定して下さい。
widthの場合は、ボックスをその幅に収めたい場合に使用して下さい。

display:inlineは子の要素がimgなど、横幅がある程度決定しているもので、横幅を出すのが面倒臭い場合に使用します。
そうすると横幅の子の要素の大きさになってくれます。
さらに通常のdisplay:inlineはwidthとheightが効きませんが、floatと一緒に使うとwidthtとheight、marginの上下が効くようになり、ブロック要素のように使えるようになります。

floatを使うと親要素の高さが算出できなくなりますが、そこはclearやclearfixなどのテクニックを使用して回避方法を理解することで、floatを苦もなく扱えるようになります。
怖がらずにfloatをもっと使ってみて下さい。

CSSリセットで"ul,ol,li {list-style:none}"の記述をしない

このCSSリセットを行うと、メンテナンス性が損なわれます。
list-styleはliには記述しないようにしましょう。

間違った例

<style type="text/css">
ul,ol,li {list-style:none;}

.fO_O li {list-style:disc;}
.orz li {list-style:decimal;}
</style>

<ul class="fO_O">
  <li>ああああ</li>
</ul>

<ol class="orz">
  <li>ああああ</li>
</ol>

正しい例

<style type="text/css">
ul,ol {list-style:none;}

.fO_O {list-style:disc;}
.orz {list-style:decimal;}
</style>

<ul class="fO_O">
  <li>ああああ</li>
</ul>

<ol class="orz">
  <li>ああああ</li>
</ol>

CSSリセットでimgにline-hegiht:0を加えておく。

クロスブラウザ(特にIE6,7)で位置がズレやすい原因は、line-heightの場合があります。
imgに関して、あらかじめline-heightを0にしておくことで、LPサイトなどを作るときにズレの回避に役立ちます。

1つのセレクタに記述する内容は2行以上になるように心掛ける。

1セレクタに1つのプロパティを入れても間違いではありません。
ただそのような記述方法をずっと続けていても上達しません。
そのセレクタには「本当にプロパティを1つしか入れられないか」考えてみて下さい。
そうすることによって、不要に増えていくclass名を防いだり、レンダリングにも良い結果をもたらす場合もあります。

デフォルトCSSを覚える。

HTMLには始めからCSSが効いています。
CSSが効いていないh1が太文字でフォントサイズも大きいのもデフォルトCSSが効いているからです。
デフォルトCSSを理解していると不要な記述を避けることができ、メンテナンス性がよくなります。

ブラウザ デフォルトCSSのチートシートを作ってみた。(力尽きた)

clearfix、overflow:hiddenを覚える。

floatを解除する方法として、clearfixやoverflow:hiddenがあります。
どちらも親要素に指定することでfloatを解除することができますが、どちらかといえばclearfixの方が汎用性に優れます。
これらを覚える事で、floatに強く、使用場面が増える事でしょう。
好きな方を使って下さい。

float解除の決定版。clearfixを考えたら、進化した。

ネガティブpositionでレイアウトを操る。

ネガティブmarginという方法があります。
marginは本来幅を空けるものですが、マイナス指定してやるとその分間隔を詰めることができます。
ただしIE6において、背景画像が一部切れたり、画像が切れたりする場合があります。

そこでネガティブpositionを行うと、それらの現象も回避できます。

方法は通常のpositionを行い、左に10px詰めたいなら、left:-10pxとしてやれば、IE6で画像などが切れることなく様々な表現の手助けになります。
ただしpositionを使用すると、floatと同様に親の高さを算出できなくなるので気をつけて下さい。

<style type="text/css">
.W_W {position:relative;}
.A_A {
  postion:absolute;
  top:0;
  left:-10px}
</style>

<div class="W_W">
  <img src="orz.png" alt="" class="A_A" />
</div>

dlを使用した日付リストを覚える。

dl(定義リスト)を使い、日付のリストの作り方を覚えます。
この作り方は、日付だけでなく様々なシーンで使え、clearfixなどが必要ない便利な方法です。 dl以外にも他のタグに置き換えて、実践的に使用することができます。
ただし、ddよりもdtの高さの方が高くなる場合は、使用に注意する必要があります。

demo

footerのナビゲーションを実装してみる

横1列のナビゲーションならdisplay:inlineやfloat:leftなどで実装しますが、横2列以上になった場合、どうするでしょう？
aタグを並べてbrで改行したり、ulを2つ並べて中でdisplay:inlineする方法などあります。さらにfloatを使用した構造的でシンプルな方法もあります。
これらの方法を覚えていくと様々なところで基点が効きます。

demo

ブラウザのバグを理解する。(特にIE6)

ブラウザのバグを理解することでコーディングがスムーズに終わります。
上記の方法を心掛けながら、スマートにコーディングしていれば致命的なバグに陥ることはないでしょう。

ただしfloatを使用した時にfloatと同方向にmarginが指定されていると、marginが2倍になるダブルmarginバグには気を付けて下さい。
回避方法は、display:inlineを追記するか、marginではなくpaddingに変更するかの2つのやり方が存在します。
場面に応じて対処してみて下さい。