ロールオーバーって悩ましいですね。
サイト作るたんびにどう処理しようか迷っちゃいます。

■aタグにbackgroundで指定して、text-indentで飛ばす。
これはほんっとーによく使う手段。listタグで、ちったあSEOしたい時にはいつもやってます。
ふつうにa:hoverで画像そのものを入れ替えちゃう方法と、
background-positionでもって、表示位置をズラすことで表示する二通りが僕の主流。めんどい時は前者。
後者は単に倍の画像を作らなくちゃいけないから手間なの。
でも、前者のやり方だと、ロールオーバー時に一瞬だけ読み込む動作で真っ白になるから、それがねぇ。
あとは自己満足か。スタイルシートはずしたときの見た目にニヤニヤしたいときはこれ。

■ふつうにJavascript。ボタンもimgタグ。なので実質、<li><a><img></a></li>な感じ。
最近はこれでもいいのかな、と思うようになってきた。
ていうか、名だたる制作会社の作ったサイト見てても、altいれときゃいいやみたいなノリだからさ。
FICCのリゾートホテルのサイトとかでもそうだけど、もう、そんなんでもいいのかもなーと。
やるときは、SmartRollover.jsとかそのへんを読み込ませるのが常。
offって入ってる画像は自動でonに書き換えてくれるソフト。ググるのめんどいのでリンクせず。

■a:hover img{ filter: alpha(opacity=50);}とか、透明度設定しちゃうとか。
さらにものぐさな僕は、ぶっちゃけこれでも良いな、と思うように。
これだと、そもそもサイト全体の統一感もナチュラルに表現できていいんですよね。
要は、リンクされてるimgタグは全部hover時はアルファ50！ってことなんだけど、楽だよね、これ。
最近はこれもよいかも、と思うように。次回のサイトから実践予定。

いまさらだけど、最後に説明をしておくと、
ロールオーバーっていうのは、マウスをボタンに合わせたときの反応のことです。
ほら、マウスをボタンに合わせると色が変わって「押した感」がでるでしょ？
アレがロールオーバー。マウスオーバーとかも言うのかな。

悩ましいなぁ。

いやぁ。がんばったなぁ、僕。

今日さ、もうこれは「詰み」だな、と思うようなCSSの問題点が出たんですよ。
IEのバグとCSSの仕様の問題と、あとデザインの無茶振りによって引き起こされた「詰み」がさ。

けど、回避した。
仕事中に吼えたもんな。解決したとき。思わず吼えた。

それでは、どういう状況でどうなっていったかを記述していきましょう。

■サイトの要素はだいたい800pxぐらいで、中央にそろえたい。

■広がりを持たせるため、そのヘッダー部分の右だけを追加で300pxぐらい出したい。

■だから、見た目的には、真ん中にコンテンツは全部そろってるけど、右にぴょっと出てる要素がある。

■その場合、中心の線はコンテンツの中心線。800pxが中心。1100pxの中心ではズレてる。

■もちろんだけど、横スクロールバーとかナンセンスですよね？

■右だけ追加ゾーンは背景で。ぼかされながら広がってるので、ブラウザで狭く見てる人は見えなくて良い。

んん！なるほど！
よくわっかんねー要求だな！つーか要求してんの僕です！デザインしたの僕です！
CSSでどこまで粘れるかいってみたいと思います！レッツゴー！

では、挙がった問題点をつらつら書いていきましょう。

コンテンツ自体は800pxで中心なので、まずmargin:0 auto;でもって作ります。
で、右側。これがネックですね。あと、コンテンツに含めないというのも難しい。
どちらにせよ、リキッドに800pxが推移して、その横に300pxが常にある、という状況は、
僕の知識ではposition:absoluteが最適解な気がする。

僕の感覚では、position:absoluteって親がrelativeである必要があると思ったので、
全体をくるんでるcontainerにrelativeをあてます。
その後、一番下に<div id=”right_bg”></div>という空divをつくり、そこで表示させることに。

#right_bg{
position:absolute;
top:0;
left:0;
margin-left:800px;
width:300px;
height:500px;
background:url(img/right_bg.jpg) no-repeat;
}

うん、表示できた、オッケー。

ところが、空divだろうが何だろうが、要素は右に飛び出しているので、
横スクロールバーが出てしまっています。
次はこれを取り除くことに。

横スクロールバーを取り除くには、overflow-x:hidden;を加えれば良いです。
僕はbodyに加えてみました。オッケー。取り除かれました。

ということで、結局あっさり出来たんじゃね？と僕は思ってました。
ところがどっこい。

IEでは、position:relative が親にある場合、子要素がoverflowで隠れないバグ発生。
というか、positionやってるときはoverflowの挙動が怪しいとのこと。
うおおおああ！これは……！

検索すること1時間。
これは「詰み」じゃないか？と思う。

positionをはずさなければ、横スクロールはIEでは消せない。
でもpositionをしなければ、右に置けない。
どっちか立てればどっちか立たず。しかも、結構根本的。
どうしよう？

■結論
htmlにoverflow-x:hiddenしたら、消えました。

何か、CSSデザインの神髄を見た気がします。
bodyとhtmlで挙動がぜんぜん違うんだ……。
ちなみに*にもしてみましたが、その場合もまた違った挙動でした。
まあ、そりゃそうか。*は単にぜんぶだもんね。
つか、overflowで消すならhtmlがいいよってことなのかなぁ？
ともかく、何とか望んだ表示になったのでよしとしましょう。

最近、こういう自分のデザインの無茶振りによるCSSコーディングの圧迫がしんどいので
もうちょっと、こう、プロなんだから、そのへんも考えてデザインしてよって思います。
はい。がんばります。分かってんだけど、ついついぼかしかけたりしちゃうよね！

先日やろうとしたこと。

flashを背景にしいて、上で何やかんややろうと思ってた。

方法論としては、まずflashを作る。
んで、下記を追加する。
<param name=”wmode” value=”transparent” />
<embed wmode=”transparent”>
これでflashの上に要素を置いても、flashがちゃんと下にくるようになった。

というわけで、今度は上におきたいdiv要素を作り、配置する。
置き方は、marginをマイナスにしようが、position:absoluteしようがどっちでもいい。
僕はmarginマイナスにしてみた。positionの挙動が、あまり好きじゃないんです。
absoluteとrelativeを使いこなさなくちゃいけないのが面倒で…。

さて、これで基本的にはオッケーです。
divんなかにすきなの詰めて遊べばいいと思います。

ところがどっこい、僕はそのdiv要素に、背景画像をしこうと思ってた。
これがうまくいかないんですよねー。
cssでbackgroud:url(img.jpg);とかやっても出てこない。
唯一、IE6だけ出てくる。Firefox、Webkit、IE7とかのモダンブラウザは全死亡。さすがIE6は格が違った。

どうしようかしばらく試行錯誤してみたんですが、どうも、これは仕様のよう。
backgroundプロパティで示されるものは、どうやら一番奥にいってしまうみたい。

仕方ないから、僕はflashの中でその背景を表示させることで回避しました。
flashに無駄なデータとレイヤーが出来るんで邪魔なんですが、仕方ない…。

あんまりいないと思いますけど、flashの上にdivを重ねようって時にはご注意を。
divの背景は、flashの上にはのりません。一番下にいきます。