商用利用OK、加工OK、許可不要、ALL無料のホームページ素材集

WEBデザイナーが作った超シンプル素材集

TIPS MENU

MATERIAL MENU

がんばろうニッポン

CSSサンプル

ここでは、ちょっと役立つCSSをメモ程度に置いていきます。
ご自由にお使いいただけますが、設置後の動作を保障するものではありませんのでご注意ください。

とってもおりこうさんなIE君たちの為のハック

Web制作に関わるお仕事をしている方なら、一度は経験があるハズ。そう、とってもとってもおりこうさんなInternetExplorer君(以下IE君)たち。

IE君たちは、他のブラウザでは考えつかないようなスバラシイ解釈を色々としてくれるので、それはそれは有難いどころか余計なお世話的なKYなブラウザなんですね。(笑)

その様々なズッコケ解釈の中から、今回はcssについて。IE君たちの為だけの特別なcssの書き方があるんデス。しかもバージョン別。(泣)せめて・・・せめて兄弟でひとつにして・・・。

::::: CSS表記 :::::

.hack008 {/*Firefox等のブラウザ対応*/
color:#FF0000;font-weight:bold;
}
*html .hack008 {/*IE6対応*/
color:#3399FF;font-weight:bold;
}
*:first-child+html .hack008 {/*IE7対応*/
color:#009900;font-weight:bold;
}

::::: HTML表記 :::::

<p class="hack008">
ここに書かれた文章は、<br />
FirefoxやChrome、InternetExplorer8の方は赤い文字に<br />
InternetExplorer6の方は青い文字に<br />
InternetExplorer7の方は緑の文字に、<br />
それぞれ見えるハズです。
</p>

::::: 動作確認 :::::

ここに書かれた文章は、
FirefoxやChrome、InternetExplorer8の方は赤い文字に
InternetExplorer6の方は青い文字に
InternetExplorer7の方は緑の文字に、
それぞれ見えるハズです。

IE8君は、お兄さんたちよりはちょっとおりこうさんです。でも、まだ独自解釈のクセが伝わっているようで・・・。IE9君にはさらなる飛躍を期待します。(笑)

更新日:2011.01.23 Category:CSSサンプル
HOMEへ このページのTOPへ