知っておいたら便利なCSS(スタイルシート)テクニック

知っておいたら便利な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させている画像やボックスなどの子要素。その子要素を包んでいるはずの親要素が子要素を包んでくれない。って場合に使います。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article