まず最初に見つけたのが、以下のサイト。

» IEで position:absolute した要素が消えるバグ

こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・

日本語のリソースを調べてみても解決策が全然見つからないので、英語のリソースを探してみたところ、ずばりなページを発見しました。

» IE/Win: Disappearing position:absolute boxes near to floats and clears

なかなか興味深い内容だったので、このページをもとに自分でもテストをしてみました。その結果をまとめたのがこちらです。

» Win/IEで絶対配置（position: absolute）のボックスが消えるバグの検証ページ

（なお、内容がほぼ同じということで、公開にあたってオリジナルページの作者である Bruno Fassino 氏にメールで許可を求めたところ、快諾とともにいくつかアドバイスまでいただきました。あらためて感謝いたします。Thanks Bruno! ）

整理すると、次のケースで position:absolute のボックスが消えるようです。

• position:absolute が float と hasLayout をもつ clear の直前に存在する場合。
• position:absolute が float と hasLayout をもつ clear との間に存在する場合。
• position:absolute が width:100% の float の直前に存在する場合。（IE6以下のみ）
• position:absolute が width:100% の float の直後に存在する場合。（IE6以下のみ）

それぞれの対策はいろいろあるので、詳しくはテスト結果のページをご確認ください。オリジナルにはないものもいくつか存在しています。なお、hasLayout についてはこのあたりが詳しいです。

» IEでのCSSのバグを回避するhasLayout | コリス
» ウノウラボ Unoh Labs: hasLayoutとは何か

しかし、IE はいろいろと厄介ですねぇ・・・

おまけ

日本語でこの問題を取り扱っているサイトがあまりないのはなぜでしょうね？position:absolute をあまり使わないからそもそも出くわさないとか？みんな position が苦手なのかなぁ。ちなみに私も最初はちんぷんかんぷんでしたが、ホップ本（再出版バージョン）で完全に使いこなすことが出来るようになりました。えっへん。

実はこの4つの擬似クラスの記述順序には注意が必要で、上記のように link、visited、hover、active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。

なぜこの順番じゃなければダメなのか？

実践Web Standards Design（通称ホップ本）には、次のように書かれています。

:hover擬似クラスと:active擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効にならない点に注意してください。

「3章 3.3/CSS管理のコツ」より

擬似クラスの記述順序には注意が必要です。（略）常に最後の指定で上書きされるということに注意し、link、visited、hover、active の順番で記述しておくと問題ないでしょう。逆に、すでに訪問済みのリンクは背景画像を変えたくないということであれば、visited を最後に記述するとよいでしょう。

「7章 16/背景画像を利用して訪問済みリンクを一工夫する」より

擬似クラスの記述順序にルールがあるというのを知ったのは、実はこの本がきっかけでした。それまでは「hover が効かない！」とか「訪問済みのリンクの色が変わらない！」とかいった問題に出くわしてハマッた経験が何度かあったので、書く順番が原因だったことがわかったときは思わず「そうだったのか！」とひざを打ってしまいました。

で、勢いづいてもう少し調べてみると、CSS の権威である Eric Meyer 氏のサイトでも同じ内容に関する解説を見つけました。

» Link Specificity – meyerweb.com

カンタンにまとめてみると、

• セレクタの固有性（specificity）は4つとも同じ。
• なので、最後に書かれたものから優先的に適用される。
• 例えば、link、active、hover、visited の順番で記述しているとすると・・・
• 未訪問リンクの場合は、active を hover が打ち消すので active は無効になる。
• 従って、active は hover の後ろに記述しなければならない。
• 訪問済みリンクの場合は、active も hover も一番最後の visited が打ち消してしまって無効になる。
• 従って、visited は hover や active の前に記述しなければならない。
• つまり、link、visited、hover、active の順番で書くべし。
• ちなみに、link と visited は打ち消しあうことがないので順番はどっちでもOK。
• link はあくまで「未訪問（unvisited）」のリンクのみに適用される擬似クラスで、「リンク全般」に適用されるものじゃないので要注意。
• link じゃなくて unvisited にすればいいのにね。

順番の覚え方

海外では、この記述順序ルールを link-visited-hover-active の頭文字をとって「LVHA」と言うようです。ちょっと覚えづらいなぁと思っていたのですが、たまたま見かけた海外のブログにうまい覚え方が紹介されていました。

» How To Remember The Order of Selectors: LOVE and HATE – CSS Tricks

Just think ‘LOVE’ (LV) and ‘HATE’ (HA)….

LOVE and HATE かぁ。ちょっと意味深だし覚えやすいですね。

他にも「こんなふうに覚えてるよ」というのがあれば是非教えてください。live happily とかどうかな？

» A Gradient Tutorial » 9rules Network Official Blog

こちらのサイトでは、グラデーションを作る際のポイントが説明されています。

さて、どれが一番きれいでしょう？1 は彩度（鮮やかさ）が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。

ちなみに僕は、次のようにしてグラデーションを作成しています。使っているのは Fireworks です。

1. まずは、両側とも同じ色で塗ります。少し明るめの色がよいです。

   

2. 一方の色を変えます。ポイントは、「明るさ」のみを落とすこと。Windows版だと、「色の選択」ダイアログの右端の矢印を下げるだけでOK。落としすぎると暗くなってしまうので注意が必要です。

   

3. できあがり。この方法だと最初の色選びを間違えない限り、そんなに悪い結果にはなりません。

   

毎回色を考えるはめんどくさい！というあなた（というか自分）ために、いくつかカラーチャートを用意してみたので、よかったら参考にしてみてください。

Apple – QuickTime – Macworld 2007 Keynote でプレゼンの動画が公開されています。（”Watch iPhone Introduction” ってほうです。） 00:15:21 あたりから見てもらえるとわかると思いますが、ものすごく直感的に操作することができます。さすが、マウス、クリックホイール（iPodで使われているやつ）に続く、3番目の革新的なUI（Revolutionary UI）というだけあります。感動なのは、アーティストやアルバムなどのリストをスクロールさせる方法。指でポンとはじく感じでスクロールさせます。ステキすぎます。ぜひとも動画の00:16:00 あたりを見ていただきたい。絶対驚くはずです。

実は、アップル製品って今まで持ったことがなかったんですが、これは欲しいです！でも日本で発売されるのはいつになるんでしょうね・・・（アジアでは2008年の予定だそうですが。）

1. まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。

2. ラインツールで 1px の「硬い線」を斜めに引きます。

   

3. 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。

   

4. 書き出しをすれば画像は完成です。

   

あとは、css で背景画像と背景色を同時に指定します。

斜線の線を変えたい場合は、css の背景色を変えるだけでOK（サンプルページ）。この透過GIF を作っておくだけでいろいろ使いまわせます。とっても便利！

Lucky bag::blog: 背景画像に使える透過 GIF では斜線以外に市松模様やストライプの透過GIF画像が入手できます。いろいろなパターンに応用できそうですね。