知っておいたら便利なCSS（スタイルシート）テクニック
XHTML CSSによるWebサイト作成をする上で、なかなか思い通りに表示してくれない時やブラウザーによる表示の違いに頭を悩まされた事って誰もが経験した事があるかと思います。
もちろん自分も経験あります。特に勉強中の時なんか一つの事で何時間？何日悩まされた事やら...
そういう事が少しでもなくす為にも、知っておいたら便利なCSSのテクニックをまとめてみました。
サイト全体を中央配置にする
margin: 0 auto;を指定すると中央表示になります。この時widthを指定するのを忘れないようにしましょう
padding要素をちゃんと理解しておく
ボックスの横幅を指定する時にpaddingやborderを使った場合。paddingやborderはその横幅に含まれないので、ちゃんと指定した分引き算をしないと駄目ですよ。
例
ボックスの幅を500pxにしたいとします。その際
paddingを20px、borderを1pxひきたい場合。
div {
width: 458px;
padding: 20px;
border: 1px solid #000;
}
500-(1+1+20+20)=458 こういう計算になりますね。
ブラウザーによる違い
XHTMLタグって初期にCSSが設定されているんですよね。そういうのを先にリセットしておいた方が効率はよいと思いますよ。
floatによるIEのバグ
IEはfloatさせた方向へmarginを取ると倍くらいになるというバグがあります。floatさせた要素にdisplay: inlineを指定しよう。
ネガティブマージンについて
margin要素で-10pxなど、マイナス要素を指定してmarginの相殺をする事です。使えればけっこう便利なので覚えておいても良いかと思います。
text-indentを利用してテキストを消す
xhtml上ではテキスト表示。ブラウザ上では画像表示。こうしたい場合はtext-indentで表示されるはずのテキストを何処かへ飛ばしたらいいですよね。
これのみについての記事は書いてなかったのでCSSのみで画像のロールオーバー（その1）を参考にでもして下さい。
すべてのブラウザで最小の高さを実装する
けっこう知らない人もいるかと思うですけど、記述しておくと、サイトが柔軟になりレイアウト崩れもおきにくくなると思いますよ。
IE6で透過pngを利用しよう
透過pngってIE6ではグレーみたいになってしまうんですよね...でもやり方は色々あります。透過pngが使えたら便利な事ってすごく沢山あると思います。
positionについて
position: absolute;を使う場合はその親要素にrelativeを指定しましょう。
z-indexによる配置
z-indexを利用する場合は、「position:relative」と共に利用することにより要素の重なり順を制御することができます。
CSSハック
一部のブラウザのみで、表示が崩れている場合はハックを使って直す方法もありますね。最終手段として知っておいた方が便利だと思います。
clearfix
これは有名なので知っている人も多いかと思いますが、floatさせている画像やボックスなどの子要素。その子要素を包んでいるはずの親要素が子要素を包んでくれない。って場合に使います。
