はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
CSSハックとIEの条件分岐
2009/02/23
- トモ・リーン
-
今回は禁断のテク、CSSハックのご紹介です！
- ケンジ
-
禁断ってドキドキする響きだね！！
- トモ・リーン
-
CSSハックとは特殊な記述法でCSSを書くことによって、そのCSSを読めるブラウザを制限するテクニックです。
これで特定のブラウザでしか出ないレイアウトの乱れを直すことが出来ます。
- ケンジ
-
それのどこが禁断なの？
- トモ・リーン
-
CSSハックはとっても便利だけど多用すると、ゴチャゴチャしたソースになるから、どうしても調整できない最終手段として使ってください。
あと、CSSの仕様的に間違った書き方もあるのよ。
- ケンジ
-
うむ、了解したぜ☆
- トモ・リーン
-
ではInternetExplorer６から！
この書き方をでCSSを書くとInternetExplorer6しか参照しません。
IE6だけに読ませる為のCSSハック
- IE6にだけ読ませたいプロパティの前に_（アンダーバー）を入れる。
-
/* 記入例 */
div {
_プロパティを記入;
} - この書き方はCSSの仕様的には間違っているので、CSS Validation Serviceなどのサイトでは減点されてしまいます。
- IE6にだけ読ませたいプロパティの前に*（アスタリスク）（半角スペース）htmlを入れる。
-
/* 記入例 */
* html セレクタ {
プロパティを記入;
}
- ケンジ
-
書式を気にしなくてもいい場合は、アンダーバーのハックの方が気軽に使えていいね！
- トモ・リーン
-
次はInternetExplorer７対応ね。
この書き方をでCSSを書くとInternetExplorer7しか参照しません。
IE7だけに読ませる為のCSSハック
- IE7にだけ読ませたいプロパティの前に*（アスタリスク）+（プラス）htmlを入れる。
-
/* 記入例 */
*+html セレクタ {
プロパティを記入;
}
- ケンジ
-
なんだか気持ち悪いけど、バリデート系サイトでも減点されないんだね！
- トモ・リーン
-
CSSハックじゃないけど実はIEってHTMLのコメントアウトと専用の条件式で、CSS・JavaScriptなどの外部ファイルの読み込みを細かく制御できるのよ。
IEの条件分岐式
headタグ内に記入。CSS以外にもJavaScript外部ファイルにも使える！！
- IE6だけに対応させたいとき
-
/* 記入例 */
<!--[if IE 6]>
<link rel="stylesheet" href="読み込みたい外部CSSファイル" type="text/css" />
<![endif]--> - IE7以下のバージョンに対応させたいとき
-
/* 記入例 */
<!--[if lte IE 7]>
<link rel="stylesheet" href="読み込みたい外部CSSファイル" type="text/css" />
<![endif]-->
- トモ・リーン
-
他にも書き方があるんだけど、続きはものすごく細かく書いてある、BLOG × WORLD ENDINGさんのページをみてね！
- ケンジ
-
この人、ものすごい研究してるよ〜〜〜！
IE系専用の記述が多い場合は、CSSハックよりも条件分岐の方がいいね。
- トモ・リーン
-
残りの主なブラウザ用ハックはこんな感じね〜！
Firefox3だけに読ませる為のCSSハック
/* 記入例 */
html:not([lang*=""]) セレクタ {
プロパティを記入;
}
Safari3だけに読ませる為のCSSハック
/* 記入例 */
html:not(:only-child:only-child) セレクタ {
プロパティを記入;
}
- ケンジ
-
う〜〜〜ん。
すごい、不思議な書き方だね！！
始めに気がついた人はすごいよ。
- トモ・リーン
-
CSSハックはブラウザのバグや未実装な部分などを、いい感じに突いたテクなのよ。
本当に裏技ね。
IEの６・7辺りは、もうガチだと思うけど、FirefoxやSafariなどはもしかしたらバージョンアップなどで使えなくなる可能性があるから、最小限の使用にした方がいいわ。
- 今回のポイント！
- CSSハックは便利だけど使い過ぎないように気をつけましょう！
- トラックバック(0)
- このブログ記事を参照しているブログ一覧：CSSハックとIEの条件分岐
- このブログ記事に対するトラックバックURL
- http://www.rasen-d.net/z/mt/mt-tb.cgi/126
- コメントする
- やさしいCSSはじめます。
- 下準備：テキストエディタ！
- 下準備：ブラウザチェック
- 基礎知識：DOCTYPE宣言
- 基礎知識：CSSのスタイルに付ける名前
- 基礎知識：idとclassの使い分け
- 基礎知識：CSSはどこに書く？
- 基礎知識：セレクタの付け方
- 実技：セレクタの付け方
- CSS組みの時の作業の流れ
- 情報の意味を考えながらHTMLコーディング
- レイアウトを組んでみる！ ～idについて～
- レイアウトを組んでみる！ ～floatについて～
- デザイン通りに組む！ ～文字サイズ～
- デザイン通りに組む！ ～文字サイズ 応用～
- デザイン通りに組む！ ～フォントの形の設定について～
- デザイン通りに組む！ ～背景画像～
- デザイン通りに組む！ ～画像置換～
- デザイン通りに組む！ ～ボタン～
- 基礎知識：インライン要素とブロック要素
- デザイン通りに組む！ ～ボタン2：ロールオーバ～
- デザイン通りに組む！ ～背景応用：見出しとか～
- デザイン通りに組む！ ～汎用性のある設計＋clearfix～
- デザイン通りに組む！ ～配置指定～
- デザイン通りに組む！ ～透過PNG～
- CSSファイルを見やすく整頓！！
- Firefoxの便利な機能拡張：Web Developer
- Firefoxの便利な機能拡張：Firebug
- Firefoxの便利な機能拡張：Page Saver Basic
- Firefoxの便利な機能拡張：「ScrapBook」「IE Tab」
- 印刷用CSS：メディア指定
- 印刷用CSS：ブラウザ別見え方の違いと特徴 背景画像
- 印刷用CSS：webページの横幅について
- 印刷用CSS：色々な印刷CSSの手法について
- 印刷用CSS：ナビゲーション削除タイプ
- 印刷用CSS：印刷用に全く違うレイアウトを作る
- 印刷用CSS：スクリーンと全く同じように印刷する
- 印刷用CSS：その他もろもろテク紹介
- CSSハックとIEの条件分岐
- とりあえず、ネタ切れなので
- オススメ本
- HTMLタグ+スタイルシート辞典ちび
基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！
- 現場のプロから学ぶXHTML+CSS
実際のXHTML+CSSの作業について学びたい方にオススメ！
- オススメCSSのサイト
- TAG index
ものすごく使いやすいHTML & CSSのリファレンスサイト
- CSSフリーライブラリー
色々なテーマごとにCSSの情報が集まっています！
- オススメ勉強会
- CSS Nite
お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。
- Re:Creator’s Kansai（リクリ）
関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。
- 螺旋デザインメンバーも執筆に参加！
XHTML+CSS プロが教える“本当の使い方”現場で培われたXHTML+CSSのテクニックを徹底解説!!
- 話題のiPhoneアプリ
大藤幹のHYML/XHTML辞典HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪
-
myPANTONE色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！
