- ベストアンサー
リストリンクと角丸画像のロールオーバーを連動させる方法について
- リストリンクのロールオーバー時にリストマーク的な画像、テキストの文字色、リンク領域内の背景色を変化させたい
- 1行目はできているが、最終行のリンクで1とリンク領域の背景色を連動させることができない
- 最終行の角丸画像の座標がテキストの行数に応じて変化するため、一体化した画像を作成できない
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
ANo.2です。補足を拝見しました。 とりあえず仕様に関する認識は私の解釈した通りだったという事ですね。 > ご指摘の通り、リストの上下の角丸領域をもマウスオーバーしたいと思ったのですが、上側は動作したと思われるものの、下側は動作しませんでした。 当然ですね。以下は、リストアイテムのリンク部分に適用されるclassの背景画像の部分のみを抜粋したものです。 【A】汎用的（リストアイテムの全てに適用する）なclass #navi_menu .navi_link a { background-image: url(images/arrow.gif); } 【B】最初のリストアイテムにだけ適用するclass #navi_menu li.top_kadomaru a { background-image: url(images/corner_maru_top.gif); } 【C】最後のリストアイテムにだけ適用するclass #navi_menu li.last a { background-image: url(images/corner_maru_bottom.gif); } 【A】で、arrow.gifというリストマーク的背景画像を指定しているのに、最初と最後のリストアイテムに対しては更に別のスタイル【B】【C】をclass属性で（【A】の”後”に）付与したマークアップになっており、【B】【C】それぞれの設定で新たな背景画像を設定しているので、【A】の背景画像は【B】【C】での背景画像に上書きされてしまいます。 【B】に設定する背景画像は、上端と左端からの位置を固定値で決め打ちできるので「上部角丸＋リストマーク」を結合したものを用意でき、【A】での背景画像の部分は上書きされて（消えてしまって）も【B】の背景画像中に全く同じ部分が含まれている為、表示上は同じに見えます。しかし、【C】の方は（質問者様もお気付きの通り）【B】と違って、背景画像中の【A】にあたる部分と、下部角丸画像に当たる部分の両方の位置を同時に決め打ちする事ができない状況なので、結合した背景画像を用意する事ができず、corner_maru_bottom.gifやcorner_maru_bottom_on.gifの様に「下部角丸」だけの背景画像になっている為、【C】に上書きされた結果【A】でのリストマーク的背景画像（arrow.gif）は消えてしまいます。 【C】に【B】の様な結合した背景画像を適用する事ができない以上、同一の要素aだけの挙動で2つの画像「下部角丸」と「リストマーク」を同時にコントロールする事は無理ですね。 > ロールオーバー前の角丸画像の背景色は白色となり、枠線に色がついております。 > そのため、最初と最後のリストアイテムも含め初期状態（マウスアウト時）には背景色を設定されていない状態が正常となります。 了解しました。ですが…実物を見れないので明確な事は言えませんが、上部と下部の角丸部分だけ枠線（曲線部分）が引かれて、それ以外の中味の部分の左右両端には枠線（直線部分）がないのですか？提供されたソースを見る限りではそうなってしまうのですが、元々そういう意図のデザインなのでしょうか？ …その疑問はひとまずあちらに置いておきまして、 > JavaScriptの「どこでもhover」を使用したサンプルをご提供いただけないでしょうか？ > IE6はメインのターゲットと考えている関係上、IE6ではこちらの意図したとおりの動作をさせたい ということでしたら以下はサンプルの一例です。失礼ながら、オリジナルのHTML側でのマークアップ及びCSSでの各セレクタの設定にはちょっと冗長なところがあり、詳細度の点でもわかりづらいので、その点を含めて少々変えさせて頂いております。 --------------------------------------------------------------------- 【サンプル】 --------------------------------------------------------------------- （省略） <!-- body { font: 13px "ＭＳ Ｐゴシック"; *font-size: small; *font: x-small; margin: 0; padding: 0; } body { behavior:url("js/csshover.htc"); }※←「どこでもhover」のファイルのパスを指定。 #navi_menu { width: 170px; } #navi_menu ul { margin: 0; padding: 0; } ul#navi_link {※←HTML側のマークアップで本件の角丸リストにidを付与したのでここで設定。以下の本件関連のセレクタはこの親要素からの記述に変更。 list-style: none; line-height: 26px; } /* 汎用 */ ul#navi_link li a { display: block; height: 100%; padding-left: 18px; color: #333333; background: url(images/arrow.gif) 4px 7px no-repeat;※←背景関連のプロパティを一括指定に。 } ul#navi_link li a:hover { color: #c9c; background: url(images/arrow_on.gif) 4px 7px no-repeat #3ff; } ul#navi_link a span { display: block; margin-left: -18px; padding-left: 18px; text-decoration: underline; background: url(images/bg.gif) repeat;※←背景関連のプロパティを一括指定に。 } /* 最初のリストアイテム用 */ ul#navi_link li.first {※←classのネーミングをできるだけ物理的イメージから遠ざける為に変更。 padding-top: 6px; background: url(images/corner_maru_top.gif) 0 0 no-repeat;※←背景関連のプロパティを一括指定に。 } ul#navi_link li.first:hover { background: url(images/corner_maru_top_on.gif) 0 0 no-repeat;※←背景関連のプロパティを一括指定に。 } /* 最後のリストアイテム用 */ ul#navi_link li.last {※←classのネーミングをできるだけ物理的イメージから遠ざける為に変更。 padding-bottom: 6px; background: url(images/corner_maru_bottom.gif) left bottom no-repeat;※←背景関連のプロパティを一括指定に。 } ul#navi_link li.last:hover { background: url(images/corner_maru_bottom_on.gif) left bottom no-repeat;※←背景関連のプロパティを一括指定に。 } --> </style> </head> <body> <div id="navi_menu"> <ul id="navi_link"> <li class="first"><a href="index1.html"><span>最初のリストアイテム</span></a></li> <li><a href="index2.html"><span>2番目のリストアイテム</span></a></li> <li><a href="index3.html"><span>3番目のリストアイテム</span></a></li> <li><a href="index4.html"><span>4番目のリストアイテム</span></a></li> <li class="last"><a href="index5.html"><span>最後のリストアイテム</span></a></li> </ul> （↓オリジナルのセレクタの付け方から、このdiv内には他のulもあるのだと仮定しています。） <ul class="hoge"> <li>別のスタイルのリスト</li> <li>別のスタイルのリスト</li> </ul> </div> （省略） --------------------------------------------------------------------- これでCSSのセレクタもHTMLのマークアップも幾分すっきりした感じになると思いますが。 前回の質問qa4837348.htmlの時と同じ環境でほぼ同様に表示される事を検証済みです。 ここで使用している「どこでもhover（英名はWhatever:hover）＝csshover.htc」というスクリプトですが、このキーワードでググるだけでダウンロード元にすぐたどり着けますよ。ただしこれの使い方には注意があって、このサンプルの様に相対パスで指定した場合、階層の違うHTMLファイルには適用されなくなる様です。これを適用させたいHTMLファイルが全て同一階層だけに収まるとは想定しにくいのですし、かといって階層毎に違うCSSを用意するのは馬鹿馬鹿しいので、Webサーバ上にアップする時のurlで「body { behavior:url("http://www.hoge.com/js/csshover.htc"); }」の様に記述した方が楽だと思います。 上記サンプルで不具合ある様でしたら補足して下さい。 あと、これは余計なお世話かもしれませんが、今までの質問やレスの内容から質問者様はプロの制作者の方と見受けられます。CSSで凝ったスタイルを実現されるには、プロパティの記述のまとめ方・セレクタの詳細度・HTMLのマークアップの工夫、といったあたりをもう少々掘り下げて学ばれた方が今後の作成がスムーズになるのではないかと思われます。
その他の回答 (4)
- abril
- ベストアンサー率69% (388/560)
ANo.2,4です。 ANo.2に用語の間違いがありましたので訂正しておきます。 【誤】疑似要素:hover→【正】疑似クラス:hover また、ANo.4にはタイポがありましたのでこちらも訂正しておきます。 【誤】 【C】最後のリストアイテムにだけ適用するclass #navi_menu li.last a { ↓ 【正】 【C】最後のリストアイテムにだけ適用するclass #navi_menu li.bottom_kadomaru a { 失礼致しました。
お礼
訂正ありがとうございます。 上記の件、了解いたしました。
- askaaska
- ベストアンサー率35% (1455/4149)
> corner_maru_top.gifをcorner_maru_top_on.gifに変更 必要ないと思うんだけど。 そもそも<li class="top_kadomaru">と<li class="bottom_kadomaru">は データを持つ必要ないわよ。
お礼
ご回答ありがとうございます。 <li class="top_kadomaru">と<li class="bottom_kadomaru">にデータを持たせず、意図した動作を行う方法がわかりませんでした。 No.4のabrilさんご提供のサンプルで意図した動作をしている感じなので、そちらを使用させていただきたいと思います。
- abril
- ベストアンサー率69% (388/560)
このご質問はおそらくqa4837348.htmlの続きですよね？ リストの上下の角丸画像がマウスオーバー時でも入れ替わらないとか、リストアイテムにリストマーク的背景画像が設定されていない、というのであれば全く悩む必要がない筈ですので、質問者様のやりたい事はつまり、リストアイテムのリストマーク的背景画像＋背景色のマウスオーバー時の挙動と揃えて、リストの上下の角丸領域をもマウスオーバーの状態でテキストリンクの背景色と同色に入れ替わる様にしたい、という事ですよね？ ※ちなみに、現状のソースをコピペして再現すると、最初と最後のリストアイテム以外は初期状態（マウスアウト時）には背景色が設定されていませんのであとのアイテム部分（2～4）は親要素の色が透過されるのみの状態になっている様ですよ。プロパティの設定や詳細度に不備がある為の様です。 この問題は、疑似要素:hoverがa以外でも有効なブラウザ（IE6を除くほとんどのモダン・ブラウザ）であれば最初のリストアイテムと最後のリストアイテムのliに対して（現状のaに対する背景画像＋背景色はそのままで）別途角丸画像を用意してliの背景画像とし、更にli:hoverの時にその背景画像を入れ替えれば簡単に解決するのですが（それであれば最初のリストアイテムも今のような特別な画像を用意する必要もなくなります）。ただし、IE6はこのli:hoverが効かない為、マウスオーバー状態の時に、aに対するリストマーク的背景画像＋背景色は入れ替わりますが、liに対する背景画像はそのままの状態になる為、角丸画像の部分のみくっきり境界がわかってしまう事になります。 上記の方法を採用する場合、選択肢としては、 【CSSのみで解決する】 ・liに対して:hoverを併用し、IE6で閲覧する時は上記の様な挙動だと割り切ってもらう。ユーザビリティの面では特に支障はないし、表示の初期状態、マウスアウト時では他のモダン・ブラウザと同じくリンクされたテキスト部分と角丸画像の領域は同色になので違和感はない。 【JavaScriptを併用して解決する】 ・「どこでもhover」と称される便利なJavaScriptがあり、これを参照する仕様にすればIE6でもa以外の要素に対して:hoverが有効になる。CSSファイルには1行追加するだけで、後は全て通常の指定の仕方で済む。 といったものが考えられるかと思います。 それでよければサンプルをご提供する事もできますが、いかがでしょうか？
補足
> このご質問はおそらくqa4837348.htmlの続きですよね？ はい、そうです。 あの当時の質問は、まだこの域まで到達しておらず、当初の質問内容とは別物となる為、新たに質問させていただきました。 > リストの上下の角丸画像がマウスオーバー時でも入れ替わらないとか、リストアイテムにリストマーク的背景画像が設定されていない、というのであれば全く悩む必要がない筈ですので、質問者様のやりたい事はつまり、リストアイテムのリストマーク的背景画像＋背景色のマウスオーバー時の挙動と揃えて、リストの上下の角丸領域をもマウスオーバーの状態でテキストリンクの背景色と同色に入れ替わる様にしたい、という事ですよね？ はい、その通りです。 「リストの上下の角丸画像がマウスオーバー時でも入れ替わらない」、又は「リストアイテムにリストマーク的背景画像が設定されていない」のであれば、現状のソースから不要な部分をコメントアウトするなり、画像を差し替えれは動作すると思います。 ご指摘の通り、リストの上下の角丸領域をもマウスオーバーしたいと思ったのですが、上側は動作したと思われるものの、下側は動作しませんでした。 > ※ちなみに、現状のソースをコピペして再現すると、最初と最後のリストアイテム以外は初期状態（マウスアウト時）には背景色が設定されていませんのであとのアイテム部分（2～4）は親要素の色が透過されるのみの状態になっている様ですよ。プロパティの設定や詳細度に不備がある為の様です。 こちらは私の用意したサンプル画像が正式なものと異なる為誤解を招いてしまいましたが、ロールオーバー前の角丸画像の背景色は白色となり、枠線に色がついております。 そのため、最初と最後のリストアイテムも含め初期状態（マウスアウト時）には背景色を設定されていない状態が正常となります。 > この問題は、疑似要素:hoverがa以外でも有効なブラウザ（IE6を除くほとんどのモダン・ブラウザ）であれば最初のリストアイテムと最後のリストアイテムのliに対して（現状のaに対する背景画像＋背景色はそのままで）別途角丸画像を用意してliの背景画像とし、更にli:hoverの時にその背景画像を入れ替えれば簡単に解決するのですが（それであれば最初のリストアイテムも今のような特別な画像を用意する必要もなくなります）。ただし、IE6はこのli:hoverが効かない為、マウスオーバー状態の時に、aに対するリストマーク的背景画像＋背景色は入れ替わりますが、liに対する背景画像はそのままの状態になる為、角丸画像の部分のみくっきり境界がわかってしまう事になります。 > > 上記の方法を採用する場合、選択肢としては、 > > 【CSSのみで解決する】 > ・liに対して:hoverを併用し、IE6で閲覧する時は上記の様な挙動だと割り切ってもらう。ユーザビリティの面では特に支障はないし、表示の初期状態、マウスアウト時では他のモダン・ブラウザと同じくリンクされたテキスト部分と角丸画像の領域は同色になので違和感はない。 > 【JavaScriptを併用して解決する】 > ・「どこでもhover」と称される便利なJavaScriptがあり、これを参照する仕様にすればIE6でもa以外の要素に対して:hoverが有効になる。CSSファイルには1行追加するだけで、後は全て通常の指定の仕方で済む。 > > といったものが考えられるかと思います。 > それでよければサンプルをご提供する事もできますが、いかがでしょうか？ ご都合のよろしいときで結構ですので、JavaScriptの「どこでもhover」を使用したサンプルをご提供いただけないでしょうか？ IE6はメインのターゲットと考えている関係上、IE6ではこちらの意図したとおりの動作をさせたいと思います。 以上、宜しくお願いします。
- askaaska
- ベストアンサー率35% (1455/4149)
画像を用意するのが面倒だったわ・・・。 シンプルな問題よ。 この件の最大の間違いは 先頭行と最終行に枠 つまり corner_maru_top.gif、corner_maru_bottom.gifを 用意しているのが原因なの。 私ならデータを持つliは全てnavi_linkのみにして corner_maru_top.gif、corner_maru_bottom.gifは 別途liを上下に用意するわ。 liのとこだけ書き出せば <li class="top_kadomaru"> <li class="navi_link"> <li class="navi_link"> <li class="navi_link"> <li class="navi_link"> <li class="navi_link"> <li class="bottom_kadomaru"> こんなイメージね。
お礼
ありがとうございます。 liの部分だけ書き出すと下記のようなイメージという事でしょうか。 <li class="top_kadomaru"><a href="index1.html"><img src="corner_maru_top.gif" /></a></li> <li class="navi_link"><a href="index1.html">1</a></li> <li class="navi_link"><a href="index2.html">2</a></li> <li class="navi_link"><a href="index3.html">3</a></li> <li class="navi_link"><a href="index4.html">4</a></li> <li class="navi_link"><a href="index5.html">5</a></li> <li class="bottom_kadomaru"><a href="index5.html"><img src="corner_maru_bottom.gif" /></a></li> たとえば、上記の場合、「1」と書かれたテキスト部分をロールオーバー時、corner_maru_top.gifをcorner_maru_top_on.gifに変更するにはどうすればよいのでしょうか？ またcorner_maru_top.gifをロールオーバー時、「1」と書かれたテキスト部分の「リストマーク的な画像」や「テキストの文字色」や「リンク領域内の背景色」を変更するにはどうすればよいのでしょうか？ corner_maru_bottom.gifについても同様ですが、<li>タグの「5」の部分と<li class="bottom_kadomaru">のロールオーバーをどのように連動させればよいのでしょうか？ 以上、宜しくお願いします。
お礼
実際に構築しているサイトに組み込んでみました。 質問さしていただいた内容は満たしているようでした。 どうもありがとうございました。
補足
ご回答ありがとうございます。 > 【C】に【B】の様な結合した背景画像を適用する事ができない以上、同一の要素aだけの挙動で2つの画像「下部角丸」と「リストマーク」を同時にコントロールする事は無理ですね。 やはりそうですか。 ご指摘ありがとうございます。 > > ロールオーバー前の角丸画像の背景色は白色となり、枠線に色がついております。 > > そのため、最初と最後のリストアイテムも含め初期状態（マウスアウト時）には背景色を設定されていない状態が正常となります。 > > 了解しました。ですが…実物を見れないので明確な事は言えませんが、上部と下部の角丸部分だけ枠線（曲線部分）が引かれて、それ以外の中味の部分の左右両端には枠線（直線部分）がないのですか？提供されたソースを見る限りではそうなってしまうのですが、元々そういう意図のデザインなのでしょうか？ > …その疑問はひとまずあちらに置いておきまして、 すいません。 文字数制限、及びその部分については質問前から問題なく動作していたこともあり、ソースからは削除させていただいておりました。 実際のソースにはliタグのborder-leftとborder-rightに実線を引いております。 それとサンプルのご提供ありがとうございます。 サンプルベースの話になりますが、意図した動作となっているように見受けられました。 近日中に実際のソースに反映させていただこうと思います。 またどこでもhoverの記述の件、了解いたしました。 複数階層で使用するため、絶対パスで記述するようにいたします。 > あと、これは余計なお世話かもしれませんが、今までの質問やレスの内容から質問者様はプロの制作者の方と見受けられます。CSSで凝ったスタイルを実現されるには、プロパティの記述のまとめ方・セレクタの詳細度・HTMLのマークアップの工夫、といったあたりをもう少々掘り下げて学ばれた方が今後の作成がスムーズになるのではないかと思われます。 いえいえ、ご指摘ありがとうございます。 ご指摘の通り業務で製作しており、その過程で詰まってしまい、質問させていただきました。 またご指摘の通り私のHTML,CSS関係の理解度には難があると思いますので、もう少し掘り下げて学んでいきたいと思います。 本件については数日中に実環境で確認後、良回答を付けさせていただき、closeさせていただきたいと思います。 このたびはご指導ありがとうございました。