• Webテクニック
• CSS

Webデザインをするときに必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。

Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CSSの基本的なことは今更感もあるのかなーと思いつつ、少しまとめてみました。

Webデザイン、レイアウトを組む上で必須となる、インライン要素とブロックレベル要素、特にブロックレベル要素のクセをおさらいしておきたいと思います。（IE6のことは、考えてません。）

CSS：ブロックレベル要素のクセとかいろいろ 目次

1. インライン要素とブロックレベル要素
   1. インライン要素
   2. ブロックレベル要素
   3. marginの相殺
2. インライン要素をブロックレベル化
   1. まるでブロックレベル要素のように扱えるようになる
   2. ブロックレベル化した<a>タグ
3. ブロックレベル要素をインライン化
   1. display :inline で並べると隙間ができる
   2. インライン化したブロックレベル要素の誤解
4. フロートさせたブロックレベル要素のあれこれ
   1. float させると、width を失う
   2. フロートした子要素の高さは含めないんです
5. 左フロートさせた要素の後続の要素はこうなってます
6. XHTML の文法を意識したレイアウト
7. スタイルシートの優先順位
   1. 外部読み込みより、XHTML に直書きしたものが優先される
   2. CSS は、あとから書いたものが優先されます！
   3. 子孫セレクタ
   4. id と class と属性
   5. 個別性の優先順位
   6. こんな指定方法も … クラス同時指定
   7. XHTML 直書きの次に優先される !important

1. インライン要素とブロックレベル要素

その前に、ブロックレベル要素って何？っていう人のためにおさらいです。まず、WebサイトはHTMLで書かれていますよね。HTML は、タグ（<p> とか <img /> とか）をいっぱい並べて書きますが、そのタグは大きく分けてインライン要素とブロックレベル要素というものに分けられます。

1.1. インライン要素

インライン要素のよく使う代表選手といえば、<a>タグ、<strong>タグ、<img>タグなどがありますよね。インライン要素は、基本的に2つ以上続けて書いても横に並んでいきます。

XHTML

<a href="#">これはリンクです！</a>
<strong>これは強調です！</strong>

というような感じで、横に続けて並びます。改行するには<br />タグを使用します。

文法的にも決まりがあって、インライン要素の中にブロックレベル要素を書いてはいけません。

• 誤）<a href="#"><h2>これは h2 見出しです！</h2></a>
• 正）<h2><a href="#">これは h2 見出しです</a></h2>

インライン要素の特徴

レイアウト的な視点で見ると、インライン要素には次のような特徴があります。

• margin
  左右は効くけど、上下は効きません。
• padding
  一応上下左右効くけど、上下は見た目的には効いてない風に見えます …。
• width
  効きません。
• height
  効きません。
• border
  指定できます！
• background
  指定できます！

padding などがどんな風に効いているか、サンプルを作ってみました。

CSSサンプル

特別なインライン要素 img、input、textarea

同じインライン要素でも img タグ、input タグ、textarea タグはちょっと特別です。インライン要素なので、他のインライン要素と同じように、続けて書くと横に並びます。

でも、他のインライン要素との大きな違いは、margin や padding、width や height も指定できるところです！画像はレイアウトの視点からみても、柔軟に対応できるから嬉しいですね！

前述の普通のインライン要素の無効だったプロパティも、以下のようになっています。

• margin
  上下左右ちゃんと効きます！
• padding
  上下左右ちゃんと効きます！
• width
  もちろん効きます！
• height
  こっちも効きます！

画像、img タグの各プロパティーがどんな風に効いているかサンプルを作りました。

CSSサンプル

1.2. ブロックレベル要素

続けて書いても横に並ぶインライン要素に対して、ブロックレベル要素は続けて書いても横に並びません。ブロックレベル要素は、その横幅に関係なく、どんどん下にレイアウトされていきます。

ブロックレベル要素の代表選手、h1 ~ h6 の見出しを続けて書けば、以下のように下へどんどんレイアウトされていきます。

h1~h6 の見出しの他にも、たくさんのブロックレベル要素があります。段落を意味する p タグや、ボックスを定義する divタグ、リストの ul、ol、li タグなんかもブロックレベル要素です。

ブロックレベル要素の特徴

Webデザインのレイアウトを作るときは、大体このブロックレベル要素でレイアウトしていきますよね。ブロックレベル要素はインライン要素と違って、横幅や高さ、margin や padding の余白も自在に操れるので、レイアウトするのにはもってこいなんですね！

• margin
  上下左右指定できます！
• padding
  上下左右指定できます！
• width
  指定できます！
• height
  指定できます！
• border
  指定できます！
• background
  もちろん指定できます！

1.3. margin の相殺

レイアウトを組むときに注意したいことに margin の相殺があります。これは1番目のブロックレベル要素の margin-bottom と、次にレイアウトした margin-top の間で起こります。言葉だと分かりにくいので、下の図を見てくださいね。

上のボックスの margin-bottom 30px と 下のボックスの margin-top 20px は、お互いに相殺しあって、大きい方の値（上の例だと 30px）が採用されます。これは上下間だけで起こることで、横に並べたときには起こりません。

CSSサンプル

ちょっと寄り道 table タグの margin の相殺

ブロックレベル要素の上下 margin は相殺されるはずなんですが、table タグの margin の相殺、Firefox だと相殺されないんですよね … モダンブラウザの Firefox … X( table のマージンは気をつけたいですねー！

左は Google Chrome、右が Firefox のスクリーンショットです。… 明らかに違いますね …。上の例のふたつの table の margin はそれぞれに 20px 指定してあります。Chrome などで見ると、table 間の margin は、相殺されて 20px になっています。 でも、Firefox で見ると、margine の相殺は効かず、40px になっています。

table タグの他にもこういうのあるのかな …

CSSサンプル

2. インライン要素をブロックレベル化

インライン要素やブロックレベル要素の代表的な特徴を見てきましたけど、display プロパティを使うと、その特徴がちょっと変化します。 display :block とか、display :inline とかいうやつです。よく見かけますよね。 そうするとどうなるか、ちょっと見ていきましょう。

ブロックレベル化っていう言葉は適切じゃないかもしれないけど、便宜上 display :block の事を、ブロックレベル化って表現させてくださいね。 下の例は、もともとインライン要素の<a>タグを、ブロックレベル化して、いろんなスタイルを指定してみました。ただのリンクがボタンになっちゃいます。

CSS

a.button{
  display: block;
  width: 200px;
  height: 50px;
  background: url(../images/button.png) no-repeat 0 0;
  text-indent: -9999px;
  margin: 20px 0;
}
  a.button:hover{
    background-position: 0 100%;
}

インライン要素をブロックレベル化すると、margin や padding も思った通りに効くし、width や height も指定できるようになります。 まるでブロックレベル要素のように、インライン要素を扱えるようになるんです！

2.1. まるでブロックレベル要素のように扱えるようになる

display:block を指定したインライン要素は、以下のような特徴があります。ブロックレベル要素と同じみたいにレイアウトできるようになりますね！

• margin
  上下左右指定できます！
• padding
  上下左右指定できます！
• width
  指定できます！
• height
  指定できます！

これらは、インライン要素で指定しても無効になってしまうものばかり。でも display:block でブロックレベル要素化すると、ちゃんと有効になります。

また、ブロックレベル要素のようになるということは、改行タグを使わなくても、勝手に改行（改行という表現が適切かどうかはちょっと疑問 …）というか、下にレイアウトされていくようになります。<br />タグ書くのが面倒なところとかにはいいですよ w form の label とかでよくやってます w

2.2. ブロックレベル化した<a>タグ

上記の例で、<a>タグをブロックレベル化したので、もうちょっと<a>タグについて補足的に。 <a>タグには、リンクという機能がついているので、デザインするときにクリックしやすいリンクがいい！とよくいわれています。 クリックしやすいリンク … クリッカブルエリア（クリックできる領域）が広いほうがクリックしやすいですよね。

<a>タグのクリッカブルエリアを広げるのに、padding なども使われるんですけど、ブロックレベル化するとクリッカブルエリアも広がります。 下の例では見出し（<h3>タグ）の中に<a>タグが入っているパターンです。

display :block によって、テキスト以外の部分、余白の部分もクリックできるようになります。

CSSサンプル

3. ブロックレベル要素をインライン化

今度はさっきと逆のパターン、ブロックレベル要素をインライン化したときに、どういう風になるかを確認です。 下の例では、ブロックレベル要素<li>タグを、display: inline でインライン化してみました。

ブロックレベル化をインライン化すると横に並びます。これはインライン要素の特徴ですね！でも逆にブロックレベル要素の特徴である、margin、padding、width、height を自由に指定できるというメリットは失う事になります。

• margin
  左右は効くけど、上下は効きません。
• padding
  一応上下左右効くけど、上下は見た目的には効いてない風に見えます …。
• width
  効きません。
• height
  効きません。

width、height は指定しても無効になってしまいます。そして margin や padding は横には効くけど、上下にはききません …。これはインライン要素の特徴ですね。

CSSサンプル

3.1. display :inline で並べると隙間ができる

ブロックレベル要素をインライン化して横に並べた場合、XHTMLの書き方によって、隙間が生まれます。下は普通に XHTML を書いて、display:inline とした例です。隙間ができちゃってますよね。

これは XHTML を書くとき、改行して書いてるからです。

XHTML

<li>Home</li>
<li>Portfolio</li>
<li>About</li>

こんな風に … 普通こう書きますよね w

一応下のように改行せずに書くと、この隙間は消えますけど、とっても読みにくいコードになるのでおすすめしません！

<li>Home</li><li>Portfolio</li><li>About</li>

とっても読みにくいですね X(

CSSサンプル

3.2. インライン化したブロックレベル要素の誤解

上記のように、ブロックレベル要素をインライン化すると、簡単に横に並んでくれます。 でも、私も昔誤解していたんですけど、display:inline は、ブロックレベル要素そのものをインライン化する訳ではありません。

追記

コメントでご指摘していただきました！display:inline は、ブロックレベル要素そのものをインライン化するが正しいです。ちょっと言葉だと難しいのですが、akude さんがコメント欄で詳しく解説してくださってます！

display:block は、ブロックレベル要素をひとつ以上のインラインボックスにするんです。分かりにくいですね w 例えば、さっきの<li>タグの中に改行である<br />タグを入れるとどうなるかというと（Ho<br />me みたいに）…。

下記のようになるのかな？って思うと、そうはならないんです。

ではどういう風になるのかな … というとこんな下記のようになってしまいます。

もうぐちゃぐちゃです … w <li>タグの中に改行をいれても、リスト自体は横に並んでくれる … という期待は裏切られます X( display:inline はひとつ以上のインラインボックスを生成するので、こういう結果になっちゃいます。

CSSサンプル

4. フロートさせたブロックレベル要素のあれこれ

CSSでレイアウトを作るときに頻繁に使うフロート。フロートした時のブロックレベル要素の特徴には、以下のようなものがあります。

4.1. float させると、width を失う

通常ブロックレベル要素は、特に width を指定しない場合、親要素いっぱいに広がりますよね。でも float させるとちょっと事情が変わってきます。 ブロックレベル要素は、float させると幅を失うというか、内包する要素の幅に依存するようになります。

追記

基本的にフロートさせた要素には、width を指定するのが決まりのようです。決まった幅を入れたくない場合は、width: auto を指定しておきましょう。

詳しくは、11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！

上記の例は、<div>タグに width を指定せずに float させているので、ボックスの幅は、内包するテキストの幅によって変化しています。 ナビゲーションなど、テキストの長さに依存させたい場面などでは、知らず知らずにやってると思うんですけど w

フロートさせたからといって、もともと持つブロックレベル要素の特徴が、全部なくなるという訳ではありません。もともともってる width: 100%（親要素いっぱいに広がる）という特徴を失うだけで、width や height の指定、margin、padding の指定などは普通通りにできます！

CSSサンプル

4.2. フロートした子要素の高さは含めないんです

ブロックレベル要素の特徴として、フロートした子要素を高さを、親要素では含めないというルールがあります。言葉では難しいので …。

リストを横並びにしたナビゲーションを例にして、実際にやってみます。まず、親要素である<ul>タグの背景にはこんな画像を使うとします。

そして、内包する<li>タグ（リンク入れるので aタグ）には次のような画像を使うとします。CSSスプライト用に、マウスホバーした時の画像もいっしょにくっつけてあります。

それでは<li>タグ（リンク入れるので aタグ）を float させて、横並びリストを作ってみます。

XHTML

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">blog</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS

ul{
  list-style: none;
  background:  url(../images/ul-bg.png) no-repeat 0 0;
  padding: 0 12px;
}
li { float :left; }
 li a{
  display: block;
  float: left;
  width: 112px;
  background: url(../images/li-bg.png) no-repeat 0 0;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  color :#777;
  text-align: center;
  text-shadow: 0 1px #fff;
}
li a:hover{ background-position: 0 100%; }

そしてブラウザで確認してみると、以下のようになりました。

ul タグに指定した背景画像が表示されない

ul タグの背景に指定した画像が表示されていません …。おかしい … いえ、これはおかしくないんです w そういう決まりになっているんです。Firebug や デベロッパーツールで確認してみると …。

親要素である ul タグには、float した子要素（li タグ）だけしか内包していないので、高さが 0 になっているんです。高さが 0 なら、背景を指定しても表示されないのは当然ですよね！フロートした子要素を高さを、親要素では含めないというルールによってこうなります。

clearfix を使ったり、高さを指定すればOK

内包している li タグの高さに合わせて、ul タグの高さを出したいなら、clearfix や overflow:hidden を ul タグ（親要素）に指定してあげます。

また、ul タグに高さを指定すればいいっていうのもあるんですけど、float の解除ということを考えれば、clearfix を使った方がいいかもですねー。clearfix を使ってみると、以下のように高さが出て、背景が表示されました！

上記は ul タグを例にしましたが、div タグなど、ブロックレベル要素なら同じ現象がおこります。

• clearfix や float の解除については、過去記事：
  CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
  で紹介しています。

CSSサンプル

5. 左フロートさせた要素の後続の要素はこうなってます

下の例みたいに、画像を左フロートさせてレイアウトすることってよくありますよね！でも、float した要素に続く要素ってどうなってるんでしょう …。

見出しのボーダーや背景が、画像の後ろに隠れる

float させた画像のあとに、float させてない見出しと p タグを書くと、下記のようにに表示されます …。見出しにはピンクの border-left を指定してあるのですが … （文法的には見出しの前に画像がきて変なんですけど、サンプルということで！）

見出しにつけたピンクのアクセントが、画像の左端にきちゃってます。でも、テキストだけは画像に押されて、ちゃんと左にくるんですけどねー。 これは見出しが画像の左上と同じ位置から始まってるということ。なので、border や 背景画像を指定した場合などは、左端が起点になるのも当然ですね。

画像の分だけ margin を指定する

後続の要素には、画像の幅 + 余白分の margine-left を指定してあげる必要があります。そうすれば、ちゃんと思った通りに表示されます！

こんな感じでキレイに表示されました！

CSSサンプル

6. XHTML の文法を意識したレイアウト

レイアウトをCSSで作っていくと、デザインによっては XHTMLの文法というか、文章構造と表示したい順番が逆になる場合があります。 例えば下の例、本当は一番上に画像を持ってきたいなーというデザインだったとします。でも、文法的には写真を説明する見出しが先にあって、写真や文章が続くのが正しいですよね。

レイアウトはCSSで！

画像を上に持ってきたいからといって、XHTML で先に画像を書くんじゃなくて、スタイルシートで何とか工夫してみれば、いろんなレイアウトが作れます。 例えば上の例だったら、XHTML では画像を見出しの後に書いて、レイアウト的には一番上に持ってくるのに position プロパティーが使えます。

XHTML

<div>
<h4>これは見出しです！</h4>
<p>position プロパティーを工夫すればOKです！</p>
<img src="images/image.jpg" alt="" />
</div>

CSS

div { position:relative;}
div img{
position:absolute;
left:0;
top:0;
}
div h4{ margin-top:160px;}

親要素の div に position :relative、画像には position :absolute、見出しには画像の分と余白の分だけ margin を指定します。こうすれば思った通り、デザインできますね！

CSS でのデザインのレイアウト、そのテクニックばっかりに目が行きがちだけど、基本的には XHTML あってのもの。時々めんどくさがってデザイン優先して、文章構造無視したくなりますけど w

インライン要素やブロックレベル要素の特徴を中心に、CSSでのレイアウトについてみてきましたが、スタイル指定したのに、効かない … とか、思ったようなレイアウトにならない … という時は、上記のような要素のもつ特徴を、再確認してみるのもいいかもです！

CSSサンプル

7. スタイルシートの優先順位

インライン要素やブロックレベル要素の特徴の中で、指定しても無効になってしまうプロパティーがたくさんありました。スタイルシートで指定したのに、スタイルが反映されない！という原因は各要素の特徴の他に、優先順位が原因になっている場合もあります。

スタイルを一生懸命指定しているのに、無視されちゃって悲しい思いをしないためにも、もう一度スタイルシートの優先順位を確認してみました XD

7.1. 外部読み込みより、XHTML に直書きしたものが優先される

まずは基本的なこと。スタイルシートは、別ファイルにして読み込んだり、head 内に書いたり、XHTML のタグに style 属性で直書きすることができます（<p style=”color:red;”>みたいに）よね。たとえば下のような場合、どうなるかというと …。

XHTML

<link rel="stylesheet" href="style.css" type="text/css" />

<style="text/css">
@import url("local.css");
p.attention{
     color: red;
}
</style>

<p style="color: red">

優先順位はこんな風になりますよね（上から順に採用されて、最終的には 3 が採用されます）。

1. 外部スタイルシート
2. @import や <style>タグの記述
3. XHTML に書いた style 属性での記述

特に難しくないんですけど、気をつけたいのは、XHTML に直接 style 属性で直書きしちゃうこと。これは最優先なので、いくら他のスタイルシートなどでスタイルを変更しようとも、無視されます X(

私は WordPress をよく使うんですけど、WordPress の機能の中には、この style属性でスタイルを吐き出すものもあって、苦労する部分でもあります …。できる限り style属性で直書きするのはやめておいた方がいいかもですね！あとで苦労するのは自分だったりします w

7.2. CSS は、あとから書いたものが優先されます！

これも当たり前なんですけど、例えば同じ1枚のスタイルシートの中でも、あとから書いた方が優先されます。

CSS

p { color:red; }
p { color :blue }

となっていたら、p タグは全部、あとから書いたスタイル、color :blue になっちゃいます。実際にはこうやって続けて書く事はないですけど、Webサイトひとつ作ろうとするときは、スタイルシートも自然と長くなります。そんな時、キレイにスタイルシートを書いておかないと、こういう競合はあっちこっちで起こってるものです。

基本的にCSSは後から書いたものが優先されるので、おかしいなー … スタイル反映されないなーというとき、下の方に書いてあるものが、反映されてないか確認することも大事ですね！

複数のクラスを指定した時も同じです

ひとつの要素に複数指定できるクラス。例えば以下のように p タグにふたつのクラスをつけた場合も、後から指定したクラスが優先されます。

<p class="red blue">

CSS

p.red { color :red}
p.blue { color :blue; }

class=”red blue” となっているので、あとから指定したクラス、blue の値が反映されます。

7.3. 子孫セレクタ

これも普通に書いてるので、感覚的にわかりますねー。親要素だけに指定したものより、子要素まで指定したものが優先されます。

CSS

div { color :red; }
div p { color :blue; }

こうなってたら、div（親要素）の中に書いた p（子要素）には、color :blue が反映されますよね！これも簡単ですね！

7.4. id と class と属性

スタイルシートを書くとき、id や クラスを指定して、スタイルを指定していきますよね。id と class はもちろん id の方が優先順位が高いです。

では、class と属性はどっちが優先順位高いでしょう …。私は form のエレメントにあんまりクラスを使わなかったので、意識した事なかったんですけど、今回この記事を書くのに、いろいろテストしてたら以下のような結果になりました。

XHTML

contact-form という id をつけた formタグ の中の inputタグに、text-box というクラスを指定しています。

<form id="contact-form" method="post" action="#">
...省略 ...
<input type="text" name="your-name" id="name" class="text-box" value="お名前" />
...省略 ...
</form>

CSS

/* 属性 */
input[type="text"]{ color :red; }

/* クラス */
.text-box{ color :blue; }

上記のように指定すると、意外にもクラスより属性の方が優先されました …。知らなかったなー。input.text-box{ … }とすると、クラスの方が優先されましたけど、基本クラスより属性が優先されるのかしら…。

7.5. 個別性の優先順位

上の例では、.text-box ではダメでも、input.text-box というようにすると、優先順位が変わりました。これは何によって優先順位が変わったのかというと、個別性というもの。CSSでは、個別性というものを基準にして優先順位が変化しています。

個別性とは … なんでしょう？個別性には具体的にはルールや計算式があったりして、ちょっと面倒くさい w id 指定だと何点、クラスの場合は何点という感じで、点数の高い方が優先されるってイメージ。ざっくり言ってしまえば、より具体的に書いた方が優先されるという感じです。

例えば、同じクラスでも書き方は以下のように指定できますよね。

• .wrapper { … }
• div.wrapper { … }

上の場合、.wrapper に書いたものよりも、div.wrapper に書いたものの方が優先されます！

• #header { … }
• #container #header {…}

#header に書いたものよりも、#container #header に書いたものが優先されます。個別性っていうのが何となくイメージできましたか？より具体的に書いた方が優先するので次のような変な事も起こります。

<div id="wrap1">
     <div id="wrap2">
          <div id="wrap3">
               ここに書いたもののスタイルを指定したい！
          </div>
     </div>
</div>

全部 id で入れ子になってますが w 上記の場合、div#wrap3 で指定するのが最優先されると思ってしまいます。でも個別性を基準にすると、これよりも優先される書き方があります。

1. div#wrap3 { … }
2. #wrap1 #wrap2 div { … }

この例だと、直接 id をピンポイントに指定した div#wrap3 の方が優先されそうですけど、そうじゃありません。#wrap1 #wrap2 div { … } の方が優先されてしまいます。より具体的に … というさじ加減が難しいですけど w

個別性も便利なんですけど、場合によっては他の要素のスタイルよりも優先されてしまって困る … ということもあるので、注意が必要です！

• 個別性についてはこちらのブログが参考になりました！
  優先順位・個別性・!important宣言

7.6. こんな指定方法も … クラス同時指定

クラスは複数指定できますよね。そんな時、両方のクラスが同時についてる時だけ、みたいな指定もできますね！

XHTML

<p class="red blue">

ふたつクラスがついたパラグラフ、次のように書く事もできます。

CSS

.red { color :red; }
.blue { color :blue; }
.red.blue { color:purple; }

.red.blue のように、スペースを開けないで続けて書くと、.red と .blue を同時に指定してあるクラスだけに適応されます。赤と青が同時だから紫！みたいな w

.red.blue じゃなくて、p.red.blue とすると、個別性により更に優先順位が高くなります。でもいくらクラスを具体的に書いても id にはかないません。

7.7. XHTML 直書きの次に優先される !important

どうしても競合してしまって、スタイルが反映されない … でも原因が分からないっていう時の最終手段として、!important をつけてしまうというのもあります。それでも XHTML に直書きしたスタイルよりも優先順は低いです。

間違いですね … コレ。優先されますねー。普段 HTML 直書きは全然使わないので間違えました。すいません X(

CSS

p { color :red !important; }

こうしちゃうと、全ての p タグが真っ赤になります w どうしてもっていう時の最終手段ですね！WordPress のプラグインの外部スタイルシートなど、アップグレードの度に書き換えるのが面倒なので、!important を使って自前のスタイルシートに書いちゃったりしてますけど w

CSS での要素ごとの特性や、無効になるスタイル、スタイルの優先順位など見てきましたけど、思うようにスタイルが反映されないんだけど … という時は、こういうところを確認してみると、意外に落とし穴にハマっていることもあるかもですね！

私もちょくちょくハマってるので、この記事書いて再確認もできましたー :D

• CSSやHTMLについて、Web Design KOJIKA 17 さんの記事もとても参考になります！
  IE6などのクロスブラウザに強くなる、22のHTML+CSSコーディングの基礎