CSSテクニックの最近のブログ記事

CSSテクニック：モダンブラウザ向けのCSSハック

(DATE:2008年4月28日 20:35) | Permalink

すべてのブラウザで同じ表示をさせるのは残念ながら難しいです。通常のCSSとは別に... すべてのブラウザで同じ表示をさせるのは残念ながら難しいです。通常のCSSとは別に、現状最もシェアの多いInternet Explorer 6, 7にバグが多いので専用の追加のソースを用意しないといけません。そこで、ブラウザの実装上のバグを利用して、ブラウザごとにそれぞれのCSSを読み込ませるCSSハックと呼ばれるものがあります。それをいくつかご紹介いたします。

■対象ブラウザ

バージョン6以下のIE
バージョン7のIEのみ
それ以外のモダンブラウザ（Firefox、Safari、Opera）

■バージョン 6 以下の IE にのみ適用：「スターハック」と呼ばれています
（バージョン6以下のIE以外のブラウザは親要素からの継承です）

* html body p { color:#FFFFFF; }

■バージョン 7 の IE にのみ適用
（バージョン7のIE以外のブラウザは親要素からの継承です）

*:first-child+html p { color:#FFFFFF; }

■IE7 を除くモダンブラウザにのみ適用
（IEはすべて親要素からの継承です）

html>/**/body p { color:#FFFFFF; }

他にも、Mac IE5用のHollyハックやハッシュハック、アンダースコアハックなど色々ありますが、使用頻度が多いのは上記のバージョン6以下のIE用とバージョン7のIE専用じゃないでしょうかね。

■参考サイト
IE7 を含むモダンブラウザ向けの CSS ハックまとめhttp://www.lucky-bag.com/archives/2006/06/css-hacks.html

CSSハック | BLOG × WORLD ENDING
http://blog.worldending.jp/archives/2006/07/css.php#notebook

よかったらぽちっと→

CSSテクニック - img要素を visibility プロパティでロールオーバー

ワタナベカズキ

(DATE:2008年4月25日 16:54) | Permalink | Comment(2) | Trackback(1)

以前紹介したロールオーバーでは、画像の切り替えの際にタイムラグがあったので、その... 以前紹介したロールオーバーでは、画像の切り替えの際にタイムラグがあったので、その問題を解消したCSSロールオーバーをご紹介します。

■サンプルロールオーバー

■サンプルXHTML

<a href=""><img src="images/sample_02.jpg" /></a>

■サンプルCSS

a {
    display: block;
    height: 41px;
    width: 156px;
    background: url(images/sample_02_r.jpg) 0px 0px no-repeat;
}

a:hover {
    background-color: #FFFFFF;
}

a:hover img {
    visibility: hidden;
}

まず、a要素をブロック化して幅と高さ、backgroundプロパティで背景に画像を指定します。（img要素の後ろにロールオーバー後の画像が用意してあるということです）

その次の、a:hover に対する background-color プロパティの背景色の指定はIE6のバグ
（:hover疑似クラスの子孫要素への指定が反応しない）を回避するための指定です。

最後に、visibility: hidden; で表示されていたimg画像を隠します。すると裏にあった背景が表示されてロールオーバーが完成します。

※visibilityプロパティの説明がしてあるサイト
http://www.htmq.com/style/visibility.shtml

よかったらぽちっと→

CSSテクニック - IEのボックスモデル解釈の違い

ワタナベカズキ

(DATE:2008年4月24日 13:27) | Permalink

バージョン5.5以前のIEやIE6の後方互換モード（DOCTYPE宣言より前に何... バージョン5.5以前のIEやIE6の後方互換モード（DOCTYPE宣言より前に何らかの文字があると後方互換モードになる。XML宣言など）などで表示させる場合に、ボックスモデルの幅や高さの解釈が通常の仕様とは異なります。通常のwidthプロパティやheightプロパティの値は内容領域だけに対して適用されますが、これらの場合には「内容領域＋パディング＋ボーダー」に対して適用されます。

このような違いがブラウザごとの表示の違いとなって現れます。そのため、古いバージョンのブラウザや後方互換モードのIEを対象とする場合には、CSSハックやコンディショナルコメントなどを使用して振り分ける必要があることもあります。

よかったらぽちっと→

CSSテクニック - floatを解除するclearfix

ワタナベカズキ

(DATE:2008年4月18日 16:01) | Permalink

floatさせている画像やボックスがある場合、何らかの方法でclearするか、親... floatさせている画像やボックスがある場合、何らかの方法でclearするか、親要素にfloatを指定しないと、その親要素からはみ出してしまいます。

Aだけが float: left; されているボックス。

BCはfloatが指定されていませんので、BC分の高さしか算出されない。

floatレイアウトの崩れを防ぐ方法に、フロートされたボックスの後に <div style="clear: both"></div> を使う方法などありますが、これはHTMLの中に余分なソースが入ってしまうのであまりよろしくないです。

そこで、CSS HappyLifeさんで紹介されていた clearfix がかなり役立ちます。

div:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}

:after疑似要素とcontentプロパティで、div（divは任意の名前）内の末尾に新たなボックスを生成します。そのボックスを display: block; でブロック要素に変換します。visibility: hidden;、height: 0.1px;、font-size: 0.1em;、line-height: 0; はブラウザ間のずれを解消するための指定です。最後に clear: both; でブロック要素に clear指定します。

IE7には対応してないのでこれを別に追加で、