この際だから覚えてしまいたいIE7からのCSSの小難しいセレクタやプロパティいろいろ

そろそろ IE6 のことは忘れて、

からのクロスブラウザを目指せばいいのかなーという気がしています。CSS のプラパティーの中には、今まで IE6 のことを考えて使わなかったものがたくさんあったりします。それらを改めて確認してみると、コーディングの幅が広がるなーという気になったりもします。

これから使う事が増えるかもしれない、CSS のセレクタやプロパティを、もう一度振り返ってみると同時に、IE7 で注意したい事などを簡単にまとめてみました。

IE6 ではサポートされていませんでしたが、IE7 からは使ってもOKなセレクタやプロパティには、どんなものがあるのか確認してみます。後半は IE7 でも使えない、残念なセレクタやプロパティになっています。

IE7 セレクタ 目次

目次に ○ がついてるものは、IE7 から使えるもの。x がついてるのは、IE7 でも使えないものです。

1. チャイルドセレクタ ○
2. 属性セレクタ ○
3. 隣接セレクタ ○
4. 間接セレクタ ○
5. <a>タグ意外の:hover疑似クラス ○
6. :hover疑似クラスの子孫セレクタ ○

1. :first-child疑似クラス ○
2. min-height、max-widthなど ○
3. :before , :after疑似クラス x
4. :focus疑似クラス x
5. white-spaceプロパティ x
6. IE7のバグ、何なのよー！って事

1. チャイルドセレクタ

いきなりきました …。あまり使った事がない人も、たくさんいそうなセレクタですねー。チャイルドセレクタは、子要素だけにスタイルを指定できるセレクタです。

「ん？それのどこが便利なの？普通に書いてもいいんじゃない？」って聞こえそうですが、子要素だけってところがポイントです。

例えば id="sample" の中、子要素の <p> タグだけ（孫要素は除く）フォントカラーをピンクにしたいときにはどうしますか？

SAMPLE

HTML

<div id="sample">
  <p>このパラグラフは子要素です！</p>
    <div>
      <p>このパラグラフは孫要素です！</p>
    </div>
</div>

こんな HTML があって、子要素の <p> だけ、スタイルを指定したいときに、チャイルドセレクタを使います。

CSS

/* これだと孫までスタイルが適応される */
#sample p {
  color: pink;
}

/* チャイルドセレクタを使えば簡単！ */
#sample > p {
  color: pink;
}

チャイルドセレクタを使えば、子要素だけ（孫要素を除く） にスタイルを指定できるので、余分なクラスを付けなくて済みますね！HTML も CSS もスッキリです。

2. 属性セレクタ

これも IE6 は未対応でしたね。どんな事ができるかって言うと …

• <a> タグの name 属性 があるものだけにスタイル
• <a> タグの target 属性 が _blank のものだけにスタイル
• <input> タグの type 属性 が text のものだけにスタイル
• <img> タグの alt 属性 に特定の文字を含むものだけにスタイル

など、属性を指定して、スタイルを指定することができます。

SAMPLE

CSS

a[name] { /* Style */ }
a[target="_blank"] { /* Style */ }
input[type="text"] { /* Style */ }
img[alt~="Hello"]{ /* Style */ }

これらは結構おなじみですね。

3. 隣接セレクタ

隣接セレクタとは、親要素が同じで、隣同士になった時だけスタイルを指定する事ができるセレクタ。どんな時に使えるかっていうと … 例えば見出し。

普段はパラグラフなどとの間に、十分な余白をとったりして読みやすくしてある見出しも、連続して使った時には、余白が大きすぎる場合がありますよね。そんな時には隣接セレクタが使えます！

SAMPLE

HTML

<h4>これはh4タグです</h4>
<h5>すぐ隣にh5タグです</h5>

CSS

h4 + h5{
  margin-top:-20px;
}

こうすると、<h4> タグと <h5> タグが並んだ時だけ、<h4> タグのマージンを減らすことができます。もちろん見出し以外にもいろいろ使えるので、有効活用してくださいね。

4. 間接セレクタ

隣接セレクタと似てるんですけど、間接セレクタは、親要素が同じなら隣通しでなくても（間に別の要素が入っていても）スタイルを適用できます。ちょっと説明しにくいので、サンプルを見てくださいね。

SAMPLE

CSS

h4 { margin-top: 0; }
h4 ~ h4 { margin-top: 40px; }

一番始めにでてくる <h4> タグには、通常のスタイルが適応されますが、それ以降にでてくる弟分の <h4> タグには、間接でレクタで指定したスタイルが適応されます。上の例で言えば、2番目以降に出てくる <h4> タグには、全て margin-top: 40px が適応されるという訳です。

隣り合ってなくてもOKですし、隣り合ってても適応されます。親要素が同じである事が条件です！

5. <a> タグ以外の :hover 疑似クラス

IE6 では、<a>タグ以外の要素に、:hover 疑似クラスを指定できませんでした。csshover などの、Javascriptライブラリ使って IE6 にも対応させたりしてました。

IE7 以降なら、<li> タグでも、<img> タグでも、<div> タグでも、:hover 疑似クラスが使えるので表現が広がりますね！

ちなみに <a> タグの疑似クラスの書き順には、決まりがあるので注意が必要です。

1. a:link（未訪問リンク）
2. a:visited（訪問済み）
3. a:hover（マウスオーバー）
4. a:active（クリック時）

順番間違えるとうまく動かないので、これは暗記しちゃいましょう！

6. :hover疑似クラスの子孫セレクタ：IE6未対応

IE7 以降では、次のようなスタイルの書き方ができるようになってます。

a:hover span{ /* Style */ }

微妙に便利です！IE6 ではできなかったんですねー。

7. :first-child 疑似クラス

なかなか便利な疑似クラス。:first-child 疑似クラスを使えば、不要なクラスを付けなくて済んだりするので XHTML がクリーンになったりします。

基本的には、一番最初の子要素だけにスタイルを指定できます。

SAMPLE

CSS

li {
  border-top:1px solid #111;
}
ul li:first-child {
  border-top: none;
}

こんな感じで、一番最初の子要素だけにスタイルを指定できます。<li> タグの子要素 … という意味じゃなくて、<ul> タグの一番最初の子要素という意味なので混乱しないように注意です！

上の例では <li> タグに限定して指定していますが、要素を問わずに一番最初の子要素だけ … というようにも指定できます。

ちなみに :last-child 疑似クラスというのもあるんですけど、IE7 と IE8 ではサポートされていません … 何なのよ …。

CSS

div.example > :first-child { /* Style */ }

こうすると、div.example の最初の子要素にスタイルが指定できます。<p>タグでも、<img>タグでも、<a>タグでも要素は問いません。私はあんまり使ってないかも…。

8. min-height、min-width、max-height、min-height プロパティ

要素の最小、最大の幅や高さを指定できるこれらのプロパティも、IE7 からは使えるようになりました！これはけっこう助かりますね！

• min-height：要素の最小の高さを指定
• max-height：要素の最大の高さを指定
• min-width：要素の最小の幅を指定
• max-width：要素の最大の幅を指定

9. :before疑似クラス、:after疑似クラス – IE7 NG

ここからは、IE7 でも使えないシリーズです。残念ながら IE7 でも未対応なのが :before、:after疑似クラス。結構便利なのに残念です。

どんな事ができるかっていうと、指定した要素の直前や、直後のスタイルを指定できます。でもそれだけじゃなくって、コンテンツも挿入できる優れものなんです！簡単な例で説明すると…

SAMPLE

この文章の左にある、ダブルクォーテーションのアイコンは、:bofore 疑似クラスを利用して表示しています。

HTML

<blockquote>これは引用です！</blockquote>

CSS

blockquote:before {
	display: block;
	float: left;
	font-size: 100px;
	content: open-quote;
	color: #ccc;
	text-shadow: 0 1px #fff;
	margin-top: -50px;
	margin-right: 10px;
}

こうすると、余分なマークアップをしなくても、引用にクォートマークをつけることができました！注意事項としては、元の要素がインライン要素だった場合、:before、:after疑似クラスでブロックレベル要素を指定できないという事。便利なのに … 残念です。

• CSS TRICKS

  via – CSS Tricks for Smart Quotes and Tooltips

10. :focus疑似クラス – IE7 NG

これも IE7 ではダメだったんですねー。要素をフォーカスした時に、スタイルを指定する疑似クラスです。よく使われるのがフォームをフォーカスした時に、スタイルを変えるとかですね。

SAMPLE

テキストボックスをクリック（フォーカス）すると、背景が白くなります。

CSS

input[type="text"]:focus {
  background: #fff;
}

11. white-spaceプロパティ – IE7 NG

主に行の折り返しをコントロールする white-space プロパティ。単語の途中で折り返したくないんだよねー … という時に重宝しますが、残念ながらIE7では使えないんです。

SAMPLE

Web Design Art PHP 日本語の場合 Javascript 日本語の場合 XHTML CSS Photo 日本語の場合 日本語の場合 MySQL 日本語の場合 WordPress 日本語の場合 日本語の場合 JQuery 日本語の場合 Photoshop

Web Design Art PHP 日本語の場合 Javascript 日本語の場合 XHTML CSS Photo 日本語の場合 日本語の場合 MySQL 日本語の場合 WordPress 日本語の場合 日本語の場合 JQuery 日本語の場合 Photoshop

CSS

span { white-space: nowrap; }

12. IE7で遭遇するバグ？何なのよー！って事

コーディングしていて、時々遭遇する IE7 の変な挙動をまとめてみました。

12.1. <li>タグの隙間 …

どうしてか分からないけれど、時々 <li> タグを縦に並べた時に、IE7 だけ隙間ができちゃうことがあります。下の写真は margin: 0 の<li>タグに border-top、border-bottom を 1px ずつ指定しているんですけど…なぜか隙間がでてる状態。

こんな時は vertical-align: bottom を指定すると隙間が消えます！大体はリセット CSS などで、vertical-align: baseline にしてますもんねー …。落とし穴でした。

CSS

li {
  border-top: 1px solid #111;
  border-bottom: 1px solid #333;
  vertical-align: bottom;
}

フッターの下になぜか隙間…

フッターの下に Javascript のコードを詰め込んだりした時に、ときどきなるんですけど、IE7 だけフッターの下に隙間ができちゃう事があります…。何なのよー！

CSS

html,body {
  height:100%;
}

height: 100% … こうすると隙間が無くなります。

12.2. 透過pngに opacity（透過）を指定すると、画像が黒くなる…

下の画像のように、シャドウがついたりしたアルファチャンネルの 透過PNG。例えばマウスオーバー時に、opacity で透明度を変更したとします。

• Icon

  Web browsers

CSS

img.opacity:hover {
  opacity: 0.75;
  filter: alpha(opacity=75);
}

でも残念な事に IE7、IE8 では、黒くなってしまうんですよね … X(

背景色が決まっているなら、塗りつぶした画像を使った方が良さそうです。

4.12. IE7 の z-index

最後に … IE7 の z-index には要注意というお話です。どーも IE7 だけ z-index の解釈が違います。単純な親、子孫要素間では問題ないのですが、DOM が複雑化してくると他のブラウザと差異が出てくるので要注意です。

これは IE7 には z-index: auto を指定しても、z-index: 1 と同じになってしまう … というバグに起因するもの。詳しいことは、別の記事で書いたので、参考にしてみてください。

• 関連記事

  CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ

他にも IE7 で注意した方がいい事があったら、教えて頂けると嬉しいです！