CSSハックについて
cssを記述する上で気をつけなければいけないのが、各ブラウザの挙動です。
スタイルシートを使ってデザインしていると、大抵のブラウザでは正しく表示されるにもかかわらず、なぜか、特定のブラウザでは表示が崩れるということがあります。
このような場合使われる手法が、「CSSハック」と呼ばれるものです。
CSSハックは、ブラウザのバグを利用して思い通りの見え方を実現するものなので、複雑な記述方法の場合が多く、使いすぎるとソースが読みにくくなります。また、ブラウザのバグを利用した方法なので、できればあまり使わない方が良いと思います。
しかし、多くのブラウザに対応するための、いわゆるクロスブラウザ対応のCSSとして様々な記述がありますので、ご参考までにご紹介します。
ここでは、Windows+IE8、Windows+IE7、Windows+IE6がインターネットユーザーの7割以上を占めるので（2010年1月現在）、IE6,7,8対応のみで話を進めさせてもらいます。
IE8とIE7とIE6でも、動作にかなりの差があります。そこで、もっとも正しい動きに近いFirefoxというブラウザを入手します。
まずは、このブラウザで動作するように記述し、IE8対応、IE7対応、IE6対応を図ると良いでしょう。
特にIE6はバグの多いブラウザです。
それなのに、ユーザーの多くがまだIE6を使用しているという現状があります。
そこで、IE6の代表的なバグとその回避方法をご説明します。
マージン「auto」が反映しない
「コモンCSSについて」でも記述しましたが、ホームページをセンタリングレイアウトにしたい場合、通常は#containerに幅（width）を設定して、マージンの左右に「auto」を設定するだけで済みます。
しかしIE6の互換モードとIE5.5以前のバージョンではautoが反映されないので、bodyにtext-align:centerを設定することで、回避します。
float方向のマージンが倍になる
IE6では、フロートレフトしたものに、マージンレフトを設定すると、なぜかマージンが倍になってしまいます（ライトの場合もしかり）。
パディングにすることで回避できる場合もありますが、背景色を設定している場合や、意味を考えたときに、そのBOX自体を大きくするというのは、違うように思います。
これは、display:inlineを設定することにより回避できます。
透明（透過）pngに対応していない
バグではありませんが、IE6は透明（透過）pngに対応していません。
ですので、出来るだけ背景と一緒に書き出すか、透明（透過）gifを使いたいところですが、どうしても透明（透過）pngを使いたい場合は、JavaScriptを使用して回避します。
代表的なものに、「jQuery pngFix」があります。
今回のサイトの場合は、containerの背景のシャドウ部分と、ダイレクトリンクの人のイラスト部分を透明（透過）pngでスライスしました。
現代段階ではダイレクトリンクの人のイラストはhtmlにいれていないので、その部分から設定してみましょう。
まずはindex.htmlを開いてください。
<div class="dLink01"> <dl> <dt><a href="production.html">ホームページ制作講座</a></dt> <dd><a href="production.html">ホームページを作りたい！リニューアルしたい！制作に関する講座はこちら</a></dd> </dl> <p><a href="production.html"><img src="images/dLink01Person.png" width="51" height="123" alt="" /></a></p> <p><img src="images/dLink01Btm.gif" width="219" height="2" alt="" /></p> </div>
<p><a href="production.html"><img src="images/dLink01Person.png" width="51" height="123" alt="" /></a></p>を付け加えてください。
dLink02,dLink03,dLink04についても同じ位置に人のイラストのソースの一行を追加してください。
現在の状況をブラウザで確認しましょう。人のイラストがコンテンツの下にいってしまい、ボックスがおおきくなってしまっています。
フロートで横に並べてもよいのですが、htmlのソースをこれ以上汚したくないので、cssで設定したいとおもいます。
例えば、dLink01のときで説明します。
positionプロパティを使用し、dLink01自体をposition:rerative（相対配置）にします。そして、人のイラストの<p>にclassで名前を付けて（personという名前にします）
そのpersonをposition:absolute（絶対配置）に設定、下から1px、左から1pxの所に置きます。
すると、テキストの文字が大きくなっても、人のイラストは常に角丸のボックスの下から1px、左から1pxの所に表示されると思います。
具体的なcssは以下になります。
#dLink .dLink01 {
width:219px;
float:left;
margin-bottom:40px;
background-image:url(../img/dlink01Bg.gif) repeat-y left center;
position:relative;
}
.person01, .person02, .person03, .person04 {
position:absolute;
left:1px;
bottom:1px;
}
#dLink .dLink01のところに加えたposition:relativeは02.03.04にもおなじように加えてください。
ブラウザで確認しましょう。上がIE7で下がIE6で確認したものです。
見比べると分かるとおもいますが、透明（透過）pngはIE6では上記のように表示されてしまいます。
次の項JavaScriptについてのページで対処方法をご説明いたします。
その他の代表的なCSSハック
各ブラウザ固有のバグを逆手に取って利用する方法、それがCSSハックです。
ブラウザによって、cssの解釈が異なるものがあります。それを利用し、特定のブラウザに対応させたり、させなかったりするという方法です。
今回のサイトで利用したものはございませんが、代表的なものをご紹介いたします。
@importハック
今回のサイトでは、cssを<link rel="">の形で1つずつ読み込みしていますが、大規模なサイトなどになると、@import url("●●●.css");を使うことで、cssのリンクの記述を1行で済ませることができます。
大抵のブラウザは対応していますが、「url()」という部分を削除することで、Windows版IE4～6、Mac版IE4～5のみにスタイルを適用することが出来ます。
子セレクタハック
html>body .●●●という記述はIE6では未対応なため、IE6とそれ以外のモダンブラウザで違う設定をする場合に使います。
.●●●（IE6用）
html>body .●●●(モダンブラウザ用)
