プロが教えるわが家の防犯対策術！

リストリンクと角丸画像のロールオーバーを連動させる方法について

解決済

  • 質問者：iroha_168
  • 質問日時：
  • 回答数：5件

縦に並んだリンクを作成していたのですが分からない所がありましたので、ご教示いただける方がいらっしゃいましたら、よろしくお願いします。


【やりたい事】
リストリンクのロールオーバー時に下記を変化させたいです。
1. リストマーク的な画像(テキストの1行目の横に表示し、テキストが何行になろうとも自動で対応したいです)
2. テキストの文字色
3. リンク領域内の背景色

ただし1行目と最終行のリンクについては上記以外に下記も変化させたいです。
4. 角丸画像


【できていない事】
最終行のリンクで、【やりたい事】の1と4を連動させる事ができませんでした(1行目はできています)。

なお1行目はできていて、最終行ができていない理由は下記となります。
1. 1行目は下記の2つの座標が常に一定の為、この二つと背景色を一体化した画像を作成すれば意図した動作となりました。
角丸画像の座標(0, 0)
リストマーク的な画像の座標(4, 14)

2. 最終行の角丸画像の座標はテキストの行数が決まっていない為、特定できません。
その為、一体化した画像は作れませんでした。

下記のソースでは、最終行の角丸画像の動作は問題ないのですが、最終行のリンクは、ロールオーバー前、後共にリストマーク的な画像が表示されません(【やりたい事】の1と4を連動させる事ができず、4が動き、1が動かない形となっております)。

【ソース】
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>title</title>
<style type="text/css">
<!--
body {
font:13px "ＭＳ Ｐゴシック";
*font-size:small;
*font:x-small;
margin:0;
padding:0;
}
#navi_menu {
width: 170px;
}
#navi_menu ul {
margin:0;
padding:0;
}
#navi_menu .navi_link {
line-height: 26px;
list-style: none;
}
#navi_menu .navi_link a {
display: block;
height: 100%;
padding-left: 18px;
color: #333333;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 4px 7px;
}
#navi_menu li.top_kadomaru a {
padding-top:7px;
background-image: url(images/corner_maru_top.gif);
background-position: 0px 0px;
}
#navi_menu li.bottom_kadomaru a {
padding-bottom:6px;
background-image: url(images/corner_maru_bottom.gif);
background-position: bottom;
}
#navi_menu .navi_link a:hover {
color: #c9c;
background-color: #3ff;
background-image: url(images/arrow_on.gif);
background-repeat: no-repeat;
background-position: 4px 7px;
}
#navi_menu li.top_kadomaru a:hover {
background-image: url(images/corner_maru_top_on.gif);
background-position: 0px 0px;
}
#navi_menu li.bottom_kadomaru a:hover {
background-image: url(images/corner_maru_bottom_on.gif);
background-position: bottom;
}
#navi_menu .navi_link a span {
display: block;
margin-left: -18px;
padding-left: 18px;
text-decoration: underline;
background-image: url(images/bg.gif);
background-repeat: repeat;
}
-->
</style>
</head>
<body>
<div id="navi_menu">
<ul>
<li class="navi_link top_kadomaru"><a href="index1.html"><span>1行目は1行でも複数行でも大丈夫です</span></a></li>
<li class="navi_link"><a href="index2.html"><span>2行目も同上</span></a></li>
<li class="navi_link"><a href="index3.html"><span>3行目は同上</span></a></li>
<li class="navi_link"><a href="index4.html"><span>4行目は同上</span></a></li>
<li class="navi_link bottom_kadomaru"><a href="index5.html"><span>最終行を連動させる方法が分かりませんでした</span></a></li>
</ul>
</div>
</body>
</html>

【使用ファイル】
index.html(上記ソース)
arrow.gif(10x10の任意の画像)
arrow_on.gif(同上)
bg.gif(2x26で最終行の1ピクセルのみに任意の色がついている画像(罫線的な意味合いがあります))
corner_maru_bottom.gif(170x6の任意の画像)
corner_maru_bottom_on.gif(同上)
corner_maru_top.gif(170x24で(0,0)～(170,7)が角丸画像用領域、(4,14)にarrow.gifを貼り付けた画像)
corner_maru_top_on.gif(同上)

どうかよろしくお願いします。

「リストリンクと角丸画像のロールオーバーを」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.4ベストアンサー

  • 回答者： abril
  • 回答日時：

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のマークアップの工夫、といったあたりをもう少々掘り下げて学ばれた方が今後の作成がスムーズになるのではないかと思われます。

この回答への補足

ご回答ありがとうございます。

> 【C】に【B】の様な結合した背景画像を適用する事ができない以上、同一の要素aだけの挙動で2つの画像「下部角丸」と「リストマーク」を同時にコントロールする事は無理ですね。
やはりそうですか。
ご指摘ありがとうございます。

> > ロールオーバー前の角丸画像の背景色は白色となり、枠線に色がついております。
> > そのため、最初と最後のリストアイテムも含め初期状態（マウスアウト時）には背景色を設定されていない状態が正常となります。
>
> 了解しました。ですが…実物を見れないので明確な事は言えませんが、上部と下部の角丸部分だけ枠線（曲線部分）が引かれて、それ以外の中味の部分の左右両端には枠線（直線部分）がないのですか？提供されたソースを見る限りではそうなってしまうのですが、元々そういう意図のデザインなのでしょうか？
> …その疑問はひとまずあちらに置いておきまして、
すいません。
文字数制限、及びその部分については質問前から問題なく動作していたこともあり、ソースからは削除させていただいておりました。
実際のソースにはliタグのborder-leftとborder-rightに実線を引いております。

それとサンプルのご提供ありがとうございます。
サンプルベースの話になりますが、意図した動作となっているように見受けられました。
近日中に実際のソースに反映させていただこうと思います。
またどこでもhoverの記述の件、了解いたしました。
複数階層で使用するため、絶対パスで記述するようにいたします。

> あと、これは余計なお世話かもしれませんが、今までの質問やレスの内容から質問者様はプロの制作者の方と見受けられます。CSSで凝ったスタイルを実現されるには、プロパティの記述のまとめ方・セレクタの詳細度・HTMLのマークアップの工夫、といったあたりをもう少々掘り下げて学ばれた方が今後の作成がスムーズになるのではないかと思われます。
いえいえ、ご指摘ありがとうございます。
ご指摘の通り業務で製作しており、その過程で詰まってしまい、質問させていただきました。
またご指摘の通り私のHTML,CSS関係の理解度には難があると思いますので、もう少し掘り下げて学んでいきたいと思います。

本件については数日中に実環境で確認後、良回答を付けさせていただき、closeさせていただきたいと思います。
このたびはご指導ありがとうございました。

補足日時：2009/04/07 20:28
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

実際に構築しているサイトに組み込んでみました。
質問さしていただいた内容は満たしているようでした。

どうもありがとうございました。

通報する
お礼日時：2009/04/12 23:28

No.5

  • 回答者： abril
  • 回答日時：

ANo.2,4です。


ANo.2に用語の間違いがありましたので訂正しておきます。
【誤】疑似要素:hover→【正】疑似クラス:hover

また、ANo.4にはタイポがありましたのでこちらも訂正しておきます。
【誤】
【C】最後のリストアイテムにだけ適用するclass
#navi_menu li.last a {
↓
【正】
【C】最後のリストアイテムにだけ適用するclass
#navi_menu li.bottom_kadomaru a {

失礼致しました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

訂正ありがとうございます。
上記の件、了解いたしました。

通報する
お礼日時：2009/04/07 20:30

No.3

  • 回答者： askaaska
  • 回答日時：

> corner_maru_top.gifをcorner_maru_top_on.gifに変更


必要ないと思うんだけど。

そもそも<li class="top_kadomaru">と<li class="bottom_kadomaru">は
データを持つ必要ないわよ。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

<li class="top_kadomaru">と<li class="bottom_kadomaru">にデータを持たせず、意図した動作を行う方法がわかりませんでした。
No.4のabrilさんご提供のサンプルで意図した動作をしている感じなので、そちらを使用させていただきたいと思います。

通報する
お礼日時：2009/04/07 20:25

No.2

  • 回答者： abril
  • 回答日時：

このご質問はおそらく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ではこちらの意図したとおりの動作をさせたいと思います。

以上、宜しくお願いします。

補足日時：2009/04/06 13:51
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： askaaska
  • 回答日時：

画像を用意するのが面倒だったわ・・・。





シンプルな問題よ。

この件の最大の間違いは
先頭行と最終行に枠
つまり
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">
こんなイメージね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

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">のロールオーバーをどのように連動させればよいのでしょうか？

以上、宜しくお願いします。

通報する
お礼日時：2009/04/06 13:21

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報