本書の179ページでJavaScriptを使わないでマウスオーバーをする方法を解説しましたが、本書ではテキストの背景に画像を貼付ける方法をとっていました。アクセシビリティやメンテナンスのしやすさを考えるとこういったテクニックは非常に使えるのですが、場合によっては画像の文字を使ってビジュアル的によりおもしろいデザインにしたいときもあります。そういった場合だと本書で紹介したテクニックでは少し物足りないということになります。そこで今回は本書のように＜UL＞でテキストリストを保持しつつ画像を使ったナビゲーションの作り方を紹介します。
SSSB：マウスオーバーデモ
デモではCSSもダウンロード出来るので詳しくはそちらを見てほしいですが、キーポイントになるのは以下の部分になります。
ul#navigation li a {
height: 26px;
position: absolute;
overflow: hidden;
padding: 26px 0 0 0;
text-indent: -100em;
text-decoration: none;
top: 0;
width: 130px;
}動作確認はWindows版IE5.5+, Mozilla, Opera7.5, Mac版IE5.2, Safariで行っています。今回はpositionを使ったテクニックを紹介しましたが、他にも方法はあるのでいろいろ試行錯誤してみると良いかもしれませんね。また、今回のテクニックはCSSがONにしてあって、画像を表示させないというケースではナビゲーションが表示されなくなるので、高いアクセシビリティが要求される場合は他の方法を考えるか、テキストで表現したほうが良いと思います。
いつも勉強させてもらっております、GREEDです。この画像を「ずらす」という技術は本で始めてみた時驚きました、面白い発想ですよね。CSSファイルを見て器になる部分があったので質問させてください。
html>body ul#navigation li a{
height: 0 !important;
}
この中に！importantというあまり見かけない記述があるのですが、この！importantは衝突する値に対しての優先度を指定する記述ですよね？今回の場合はどういった意味があるのでしょうか？
> GREEDさん
値を優先させたいときに !important を使って最重要宣言するわけですが、今回は優先させたくない値（IE用の値である26px）が最初に記述されていますし、IEでは読めない別記述方法で回避させているので、別に必要ないですよね。
というわけで削除しておきました。あってもエラーが出るとかいうのはないですが、紛らわしいのは極力避けておいたほうが良いですからね。ありがとうございました。
レスありがとう御座います。
そういうことだったんですね、すいませんなんかツッコミ入れたような質問になってしまいましたね。あ、私のコメントで「気になる」を「器になる」なんて書いてますね、失礼。
いつも拝見させていただいてます。ジェフリーゼルドマンのサイトでは、グローバルナビゲーションで使用している画像は全て1枚上に配置しポジションを変えているようですが、ヤスヒサ様の様に画像を一枚一枚にする方法と、どちらが良いのでしょうか？漠然とした質問なのですが是非ご意見をお聞かせください。
> saluta
どちらが良いというのは特になく、好みの問題だと思います。１枚絵の効率性も否めませんが、ナビゲーションごとに分けておくとナビゲーションの内容がかわったときも編集が楽ですし、ファイルサイズを減らしやすいような気がします。
これ、おもしろいですね。私にとっては、display:inline;やfloatを使うやり方より分かりやすいです。
Mac版Netscape7.1では、ul#navigationにpadding: 0;を入れないと、ホームの左端が切れちゃってました。ご報告しておきます。
マウスオーバーとは関係のないことですが、2つ質問させてください。
これは、xml宣言をしてわざとWinIE6にも互換モードで読ませてありますよね。その方が、ハックが簡単でレンダリングも早いと聞くのでいいなと思いますが、こういうやり方はまだあまりみたことがありません。最近はよく使われてるやり方なのでしょうか。
backgroundのurlの指定に、ダブルクォーテーションが入っていません。こういう書き方はよくみますが、教科書的な本ではダブルクォーテーションを入れてある場合が多いようです。これは、入れても入れなくてもいいから省略してあるんでしょうか。それとも、入れると逆に何かの不具合が、何かのブラウザで起こる場合があるのでしょうか。
＞とおりすがりさん
ありがとうございます。
今まではそれほど不具合を感じたことはなかったですが、今度からMacIEで背景がうまく行かないときには疑ってみることにします。
気になって有名サイトをあちこち見てみましたが、ダブルクォーテーション、入れてないサイトが多数派だけど、入れてるサイトもちょっとある、といったかんじ。validatorではどっちでもひっかからないみたいです。どっちでもいいことを訊いちゃったかな・・・。
xml宣言については、入れるとだいたいWinIE6もWinIE5.xと同じように扱えることをテストして確認しましたが、古いブラウザでのバグを考えるとまだちょっと使えないかもなあ、使いたいけど、と思ってます。
Good Point. Anyways, this was where i met her. You can join for free as well www.redtricircle.com