この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ
チャイルドセレクタや隣接セレクタなど、あんまり馴染みのないちょっと小難しい CSS のセレクタなどをまとめてみました。 これからクロスブラウザの照準を IE7 に合わせるなら、ちょっとお役立ちかもです！
そろそろ IE6 のことは忘れて、IE7からのクロスブラウザを目指せばいいのかなーという気がしています。CSS には今までは IE6 のことを考えて使わなかったセレクタやプロパティがたくさんあったりします。それらを改めて確認してみるとコーディングの幅が広がるなーという気になったりもします。
これから使う事が増えるかもしれない CSS のセレクタやプロパティをもう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。
IE7から使えるCSSセレクタやプロパティ：ざっくりまとめ
IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティにはどんなものがあるのか確認してみます。後半は IE7 でも使えなくて残念なセレクタやプロパティになっています。
IE7 セレクタ 目次
- チャイルドセレクタ ○
- 属性セレクタ ○
- 隣接セレクタ ○
- 間接セレクタ ○
- <a>タグ意外の:hover疑似クラス ○
- :hover疑似クラスの子孫セレクタ ○
- :first-child疑似クラス ○
- min-height、max-widthなど ○
- :before , :after疑似クラス x
- :focus疑似クラス x
- white-spaceプロパティ
x○ - IE7のバグ、何なのよー！って事
1. チャイルドセレクタ：IE6未対応
いきなりきました。あまり使った事がない人もたくさんいそうなセレクタですねー。チャイルドセレクタは子要素だけにスタイルを指定できるセレクタです。
「ん？それのどこが便利なの？普通に書いてもいいんじゃない？」って聞こえそうですが、子要素だけってところがポイントです。
例えば id="sample" の子要素の<p>タグだけ、フォントカラーをブルーにしたいときにどうしますか？
XHTML
<div id="sample">
<p>このパラグラフは子要素です！</p>
<div>
<p>このパラグラフは孫要素です！</p>
</div>
</div>
こんな XHTML があって、子要素の<p>だけ、スタイルを指定したいときにチャイルドセレクタを使います。
CSS
/* これだと孫までスタイルが適応される */
#sample p {
color: #0AC;
}
/* チャイルドセレクタを使えば簡単！ */
#sample>p {
color: #0AC;
}
チャイルドセレクタを使えば子要素だけ（孫要素を除く）にスタイルを指定できるので、余分なクラスを付けなくて済みますよ。XHTML も CSS もスッキリです。
2. 属性セレクタ：IE6未対応
これも IE6 は未対応でしたね。どんな事ができるかって言うと、
- <a>タグのname属性があるものだけにスタイル
- <a>タグのtarget属性が _blank のものだけにスタイル
- <input>タグのtype属性が text のものだけにスタイル
- <img>タグのalt属性に特定の文字を含むものだけにスタイル
などが指定できます。
CSS
a[name] { ... }
a[target="_blank"] { ... }
input[type="text"] { ... }
img[alt~="Hello"]{ ... }
これらは結構おなじみですね。
3. 隣接セレクタ
隣接セレクタとは、親要素が同じで隣同士になった時だけスタイルを指定する事ができます。どんな時に使えるかっていうと、例えば見出し。
普段はパラグラフなどと十分な余白を指定して読みやすくしてある見出しも、連続して使った時に余白は大きすぎる場合がありますよね。そんな時には隣接セレクタが使えます！
XHTML
<h4>これはh4タグです</h4> <h5>すぐ隣にh5タグ</h5>
CSS
h4+h5{
margin-top:-20px;
}
こうすると<h4>タグと<h4>タグが並んだ時だけ<h4>タグのマージンを減らすことができます。もちろん見出し以外にもいろいろ使えるので有効活用してくださいね。
4. 間接セレクタ
隣接セレクタと似てるんですけど、間接セレクタは親要素が同じなら隣通しでなくても（間に別の要素が入っていても）スタイルを適用できます。
ちょっと説明しにくいのでサンプルを見てくださいね。
CSS
h4 { margin-top: 20px; }
/* 間接セレクタ */
h4~h4 { margin-top: 40px; }
一番始めにでてくる<h4>タグは通常のスタイルが適応されますが、それ以降にでてくる弟分の<h4>タグには間接でレクタで指定したスタイルが適応されます。上の例で言えば、2番目以降に出てくる<h4>タグには全て margin-top:40px が適応されるという訳です。
隣り合ってなくてもOKですし、隣り合ってても適応されます。親要素が同じである事が条件です！
5. <a>タグ以外の :hover 疑似クラス：IE6未対応
IE6 では<a>タグ以外に :hover 疑似クラスを指定できませんでした。
（csshoverなどのJavascriptライブラリ使えばOKです。）
IE7 以降なら<li>タグでも<img>タグでも<div>タグでも :hover疑似クラスが使えるので表現が広がりますね！
ちなみに<a>タグの疑似クラスの書き順には決まりがあるので注意が必要です。
- a:link（未訪問リンク）
- a:visited（訪問済み）
- a:hover（マウスオーバー）
- a:active（クリック時）
順番間違えるとうまく動かないので覚えちゃいましょう。
6. :hover疑似クラスの子孫セレクタ：IE6未対応
IE7 以降では次のようなスタイルの書き方ができるようになってます。
CSS
a:hover span{ ... }
微妙に便利です！
7. :first-child 疑似クラス：IE6未対応
ちょっといろいろ書き方がある疑似クラスですが、覚えちゃえば不要なクラスを付けなくて済んだりするので XHTML がクリーンになったりします。
基本的には一番最初の子要素だけにスタイルを指定できます。
CSS
li {
border-top:1px solid #111;
border-bottom:1px solid #333;
}
ul li:first-child {
border-top: 0 none;
}
こんな感じで一番最初の子要素だけにスタイルを指定できます。<li>タグの子要素という意味じゃなくて、<ul>タグの一番最初の子要素という意味なので混乱しないように注意です！
上の例では<li>タグに限定して指定していますが、要素を問わずに一番最初の子要素だけというようにも指定できます。
ちなみに:last-child疑似クラスというのもあるんですけど、IE7 と IE8 ではサポートされていません … 何なのよ …。なので、上のサンプルを IE で見ると、一番最後のリストのボーダーが消えてません。
CSS
div.example > :first-child { ... }
こうすると、div.example の最初の子要素にスタイルが指定できます。<p>タグでも<img>タグでも<a>タグでも要素は問いません。私はあんまり使ってないかも…
8. min-height、min-width、max-height、min-heightプロパティ：IE6未対応
要素の最小、最大の幅や高さを指定できるこれらのプロパティも IE7 からは使えるようになりました！これはけっこう助かりますね！
- min-height：要素の最小の高さを指定
- max-height：要素の最大の高さを指定
- min-width：要素の最小の幅を指定
- max-width：要素の最大の幅を指定
9. :before疑似クラス、:after疑似クラス：IE7でも未対応
ここからは IE7 では使いたくても使えないシリーズです。残念ながら IE7 でも未対応なのが :before、:after疑似クラス。結構便利なのに残念です。
どんな事ができるかっていうと、指定した要素の直前や直後のスタイルを指定できます。でもそれだけじゃなくって、コンテンツも挿入できる優れものなんです！簡単な例で説明すると…
例えばここに3枚の画像があります。
真ん中の画像は<div>タグにリピート背景として指定。後のふたつを :before、:after疑似クラスを使ってシャドウ付きボックスを作ります。
XHTML
<div id="content">ここにコンテンツ</div>
CSS
#container{
background:url(images/background.jpg) no-repeat 0 0;
}
#content {
background: url(images/content-bg.png) repeat-y 0 0;
}
#content:before {
display:block;
height: 50px;
content: " ";
/* 上部の背景 */
background: url(images/content-top.png) no-repeat 0 0;
}
#content:after {
display:block;
height: 50px;
content: " ";
/* 下部の背景 */
background: url(images/content-bottom.png) no-repeat 0 0;
}
こうすると余分なマークアップをしないでもキレイなボックスができました。注意事項としては、元の要素がインライン要素だった場合、:before、:after疑似クラスでブロックレベル要素を指定できないという事。
IE7 では未対応なので、XHTML のほうに IE7 の時だけマークアップする工夫をする必要があります。
XHTML
<!--[if IE 7 ]> <div class="ie7-top"></div> <![endif]-->
こうすると IE7 の時だけマークアップされて他のブラウザでは表示されません。ちょっと簡単すぎるサンプルでしたが、:before、:after疑似クラスはもっといろいろな事ができる疑似クラスです。
10. :focus疑似クラス：IE7未対応
これも IE7 ではダメだったんですねー。要素をフォーカスした時にスタイルを指定する疑似クラスです。よく使われるのがフォームをフォーカスした時にスタイルを変えるとかですね。
11. white-spaceプロパティ：IE7未対応
主に行の折り返しをコントロールするwhite-spaceプロパティ。単語の途中で折り返したくないんだよなーという時に重宝しますが、残念ながらIE7では使えないんです。実際にやってみると使えるんですよね。私の勘違いだったみたいです。ごめんなさい。
IE7で遭遇するバグ？何なのよー！って事
コーディングしていて時々遭遇するIE7の変な挙動をまとめてみました。
<li>タグの隙間 …
どうしてか分からないけれど、時々<li>タグを縦に並べた時にIE7だけ隙間ができちゃうことがあります。下の写真は margin: 0 の<li>タグに border-top , border-bottomを1pxずつ指定しているんですけど…なぜか隙間がでてる状態。
こんな時は vertical-align: bottom を指定すると隙間が消えます！
CSS
li {
border-top: 1px solid #111;
border-bottom: 1px solid #333;
vertical-align: bottom;
}
フッターの下になぜか隙間…
フッターの下に Javascriptを詰め込んだりした時に時々なるんですけど、IE7 だけフッターの下に隙間ができちゃう事があります…。何なのよー！
CSS
html,body {
height:100%;
}
height: 100% … こうすると隙間が無くなります。
透過pngに opacity（透過）を指定すると画像が黒くなる…
下の画像のようにシャドウがついたりしたアルファチャンネルの透過png画像。例えばマウスオーバー時にopacityで透明度を変更して装飾しようとします。（CSSスプライト用画像を作るのが面倒なんで w）
CSS
img.opacity:hover {
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
}
でも残念な事に IE7、IE8 では黒くなってしまうという残念な結果に … orz
背景色が決まっているならjpgで、または CSS スプライトで表現した方がよさげです。… IEのばか …
IE7 の z-index
最後にIE7 の z-index は要注意です。どーも IE7 だけ z-index の解釈が違います。
単純な親、子孫要素間では問題ないのですが、DOM が複雑化してくると他のブラウザと差異が出てくるので要注意です。
他にも IE7 で注意した方がいい事あったら教えて頂けると嬉しいです！