CSSでロールオーバー

April 09, 2005

最近携わっている案件のサイトのメニュー部分はCSSでロールオーバーをしている。始めは、XHTMLとCSSで作るlistのメニューにしていたのだけれど、どうも問題が。

始めの問題は、ロールオーバーした時にCSSでロールオーバーを作成するとありがちな画像が一瞬消える、チカチカ現象。これを解決する為に、通常時のメニュー画像を各メニュー部の背景として置いて対処。これでクライアントさまのマシンのキャッシュを削除して頂いて、再度確認して頂いた。これによりチカチカ現象は無くなった。

しかし･･･、次に起こった問題はメニュー部分をロールオーバーしていると、瞬時にキャッシュされたロールオーバー時の画像が通常時のメニュー画像に戻らなくなってしまい、いくつもupのステイタス画像が表示されてしまう現象だった。これを解決する為に色々なサイトを巡り、別の方法を学ぶ事となった。

これまではlistでメニューを作っていたのだけれど、これをやめ、divでメニューを作成し、このdivのvisibilityを使ってロールオーバーの状態を作成するに至った。この方法で、何だか前のロールオーバーよりも身軽くなったようで、調子が良くなったのが、私のマシンでも分かった。再度クライアント様にチェックして頂き、万事OKとなったのであった。

それにしても、XHTMLとCSSでメニューを作るときは、なぜlistを使うのが定番なのだろうと不思議に思っている今日この頃であった。。。どなたかご存知の方がいらっしゃいましたら教えてくださいませ。

Comments

honda
April 9, 2005 08:49 PM

お久しぶりです。日本は桜が綺麗ですよ。

さて、XHTMLとCSSでメニューを作るときは、なぜlistを使うのが定番なのかといいますと。

そもそもXHTMLとCSSでコーディングするというのは、ＨＴＭＬ（ＸＨＴＭＬ）の文書構造にしたがって、タグの持つ意味を考慮してコーディングするということで、そうすると、メニューなんてのは一つのリストとして考えるのが適切だと、それでlistを使うんですね。

あとは、ＳＥＯ的にlistタグは重みづけが大きいんですね。メニューには大抵キーワードが含まれるので、それでlistで囲っちゃうんですね。

でも、自分じゃ作ったことないんです。

aki
April 9, 2005 08:59 PM

hondaさん、ご解答をどうもありがとう！なるほど、勉強になります。それにしても、何故チカチカしてしまうのでしょう？このチカチカ現象はXHTMLとCSSで作成されたサイトで、listメニューを使っていると見かけます。私のサイトもそのうちの1つです。でも、自分ではあまり気にした事がなかった、プラス、メニューが小さいのであまり目立たない、と言う利点（？）もあってそのままにしています。。。