【ＨＰ作成質問箱】

新しい質問は「新規入力」ボタンをクリックしてください。

| Page-1

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.9890　画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/22 (日) 01:19

こんにちは。お世話になります。

画像にリンクを貼ったとき、その画像に枠線が表示されますが、この枠線を下線だけにしたいと思い、下記のような CSS を書きました。FF で見ると期待した結果が得られたのですが、IE6 では通常状態で #ee0000 の色は表示されているのですが、オン・マウスのときに下線の色が #0040ff に変わりません。

どのような原因が考えられますでしょうか。また、IE の場合にも FF と同様の結果が得られるようにするには、どうすれば良いのでしょうか。

必ずしも下記の方法に拘っているわけではなく、画像に下線が表示され、通常の状態の場合とオン・マウスの場合で（出来れば visited の場合も）その下線の色を変えられれば全く別の方法でも良いと思っています。何か良い方法がありましたら、御教示頂けましたら幸いです。

作成途中ですので、URL は書けませんが、よろしくお願いします。

a img {border-top: none;
border-right: none;
border-bottom: solid 1px #ee0000;
border-left: none;}

a:hover img {border-top: none;
border-right: none;
border-bottom: solid 1px #0040ff;
border-left: none;}

<a href="aaa.html"><img src="gazou.gif" class="a1"/></a>

▼ ▼ ▼

　 No.9891　Re:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/22 (日) 09:26: そちらのcssを私のテストページに貼り付けてテストしたところ正常に、思うような結果が得られました。

テストしたのはIE6.0です。

で、考えられるものとすれば「DTD(Document Type Difinition)」ではないでしょうか？
私のDTDは
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

を使っています。

▼

▼

▼
　 No.9892　Re^2:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/22 (日) 10:48: atom さん、早速に有り難うございました。

ご教示頂いた DTD に変えてやってみましたが、残念ながら改善は見られませんでした。書いて頂いている DTD をコピペし、更に目視でも確認しましたので、書き間違いということはないと思われます。

引き続き皆様のお知恵を拝借させて頂ければ幸いです。よろしくお願いします。

▼

▼

▼
　 No.9893　Re^3:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/22 (日) 21:06: すいません勘違いしてました。

私のバージョンはIE7.0でした。^_^;

スタイルシートはブラウザのバージョンによっても動作が変わりますから、ひょっとしたらIE6.0の特徴かもしれません。

もし、そのページがローカルファイルにあるなら、
不要なところを全部削除して、この掲示板に添付していただけるとIE7.0で確認できますが。
その時には、そのページ内にCSSも記述してないと、別ファイルの場合、動作確認は出来ません。

▼

▼

▼
　 No.9894　Re^4:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/22 (日) 23:34: atom さん、再度のレスを有り難うございました。ファイルを添付させて頂きます。

今はダミーで下線を #ee0000 にしていますが、実際にはこの下線をページの背景色と同色にして画像だけしか見えないようにしておき、オン・マウスのときだけ下線が別の色に変化して、リンクが貼られていることが閲覧者に分かり易いようにしようという意図です。

画像をロールオーバーにするとかしても「リンクが貼られていることが閲覧者に分かり易いように」という意図は達成出来るのでしょうが、出来るだけシンプルな構成にしたいと思い、下線で表現することを考えているような次第です。

大変お手数をおかけしますが、よろしくお願いします。

P.S. 「すいません」と書かれていることからして、もしかすると atom さんは関西の方でしょうか？　＾＾

▼

▼

▼
　 No.9895　Re^5:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/22 (日) 23:53: 画像は×マークで見れませんが、ちゃんと赤からブルーに変わります。

記述は問題ないようですので、ブラウザの問題でしょう。
a:hover imgは特殊なのかもしれませんね。

私は、次のように「a:link img」で基本指定して、「a img」での色指定はしてませんね。

四国ですが、関西弁が好きなので関西なまりがかなり入ってるかもしれません。

▼

▼

▼
　 No.9896　Re^6:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/23 (月) 00:11: atom さん、有り難うございました。

> 私は、次のように「a:link img」で基本指定して、

すみません、“次のように” というのは、どれのことでしょうか。
結局、IE6 でも表示されるようにするには、別の方法を考えるしかないということになるのでしょうか。

▼

▼

▼
　 No.9897　Re^7:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/23 (月) 08:23: そちらは基本指定を「a img」と記述してますが、
同じような機能をあるサンプルで使ってますが、そこのcssでは基本設定を「a:link img」で指定して、「a img」は使ってないけど．．と言う意味です。

> 結局、IE6 でも表示されるようにするには、別の方法を考えるしかないということになるのでしょうか。

そうなんでしょうね。
私がIE6.0ならもっと詳しい回答ができるのですが、同じ環境でないため、詳しく調査が出来ないですね。

▼

▼

▼
　 No.9898　Re^8:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/23 (月) 10:43: atom さん、何度もご回答を頂き、大変有り難うございました。

IE6 での表示は諦めるか、別の方法を講じるか、少し考えてみようと思います。

またお世話になるかも知れませんが、よろしくお願い致します。有り難うございました。

▼

▼

▼
　 No.9899　Re^9:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/23 (月) 14:45: 参考までに、こちら
http://beginners.atompro.net/testcgi/imagebbs/?action=bbslsts

ここに似たような機能の画像リンクがあります。

これがそちらのブラウザで動作しなかったら、IE6.0の可能性が高いです。

参考まで。

▼

▼

▼
　 No.9901　Re^10:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/23 (月) 21:13: atomさん、有り難うございます。

“No.1 [atom]:投稿のテスト” という代替テキストが付された画像のことですよね？　私のパソだと、IE6 でも FF でも同じに見えるのですが・・・。

IE6 でも FF でも、画像にカーソルを合わせても何の変化も起きませんが、クリックした瞬間に一瞬だけ枠線の色が変わります。

▼

▼

▼
　 No.9902　Re^11:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/24 (火) 08:04: そうです。

私はFF3.0.6、IE7.0ですが、どちらもマウスオーバーで枠線が赤になります。
ちなみにWinXP HomeEdition SP3です。

▼

▼

▼
　 No.9903　Re^12:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/24 (火) 15:37: 昨日やってみたときには、画像にカーソルを合わせただけでは何の変化も起きなかったのですが、今やってみると、マウスオーバーで枠線が赤に変わりました。でも、[9894] で添付させて頂いたファイルの方は相変わらず何の変化も起きません。う～ん・・・？？？

私の方は、WinXP HomeEdition SP2 です。

▼

▼

▼
　 No.9906　Re^13:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/24 (火) 20:27: 昨日はデザインが完全に崩れてたでしょう？
もしそうなら、CSSが全然効いてませんでした。^_^;

崩れてないデザインなら、CSSが正しく効いています。

そちらのファイルは最初、DTDだけと思ってたのですが、
今見たらHTMLのヘッダ部分には、デザインをコントロールしそうないろいろなものが付いてましたね。

それが悪影響してるのかもしれないので、不要なものをできるだけ削除して、最低限の機能だけにしたものをここに添付してみました。
まずは確認してくれませんか？

▼

▼

▼
　 No.9907　Re^14:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/24 (火) 22:51: 有り難うございます。

> 昨日はデザインが完全に崩れてたでしょう？

昨日も特にデザインは崩れてはいませんでした。

アップして頂いている画像を早速拝見しましたが、IE6 だとやはり変化ナシでした。FF だと縦線だけしか表示されませんでしたが (画像の×マークナシ)、マウスオーバーで縦線が赤に変わりました。

でも、何故 [9899] にリンクして頂いている画像は、IE6 でもマウスオーバーで枠線の色が変わるのでしょうね？　いろいろと自分なりに試行錯誤した結果、下記のように、画像だけでなく何か文字も入れてリンクを貼っておくと所期の結果が得られることは分かったのですが、 [9899] にリンクして頂いている画像には文字は入っていませんし・・・。

<a href="aaa.html"><img src="gazou.gif" class="a1"/>あ</a>

▼

▼

▼
　 No.9908　Re^15:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/24 (火) 23:30: そうですか、たびたびすみませんね。

ではできる限り、お絵かきに近い形のHTMLソースを作成して添付しました。
これではどうですか？

headタグ内にいくつかmetaタグなどの追記をしました。
また、ソースコードはutf-8で記述しています。
sjisでも結果は同じだと思いますが。

▼

▼

▼
　 No.9909　Re^16:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/25 (水) 00:05: > そうですか、たびたびすみませんね。

こちらの方こそ、長々とお付き合い頂いて恐縮です。

レスをアップされた時間は23時30分になっていますが、23時35分～40分くらいの間に画像を変更したり (アップし直したり) とかされましたでしょうか？

ここにはパソコンが２台あるのですが、先ず片方のパソで画像を拝見したところ、変化ナシでした。その後、念のためにもう１台の方でも見てみたところ、枠線が青から赤に変わり、背景色 (枠線と画像の×マークの間) がオレンジっぽいような色に変わりました。

どちらのパソも同じ XP HomeEdition SP2 、IE6.0 ですので、「ん？　なんで片方のパソだけ機能するの？」と不思議に思い、再度初めの方のパソで試してみたところ、何と今度は枠線が青から赤に変わりました。

最初１台目のパソで試したときには “変化ナシ” だったものが、２台目のパソで期待どおりの結果が得られ、再び１台目のパソでやり直してみたら初めのときとは違う結果になったということです。それで、もしかすると私が１台目のパソで試してから２台目のパソで試してみるまでの間に、ちょうど atom さんが画像をアップし直したのとタイミングが合ったのかと思ったような次第です。もし画像をアップし直したりとかされていないのであれば、なぜ最初１台目のパソで試したときには “変化ナシ” だったのかが不思議です。

▼

▼

▼
　 No.9910　Re^17:画像にリンクを貼った場合の枠線の色について
[atom] [ブラウザ]　 09/02/25 (水) 07:17: そうですか、やったぁ！
これでIE6.0でもこの機能が使える事は実証できたわけですね。

その通りです。

最初、自分が、これぐらいで大丈夫だろう．．と、DTDとCSSだけの設定にしてたのですが、お絵かきのソースを眺めてて、そちらのソースとの違いで、関係しそうなところはすべて挿入してた方がいいかな？と、
３、４度ソース追加をしながらアップしなおしました。

文字挿入が関係しそうなのなら、
a:link{ color: #103894; }
a:visited{ color: #6699cc; }
a:active{ color: #009999; }
a:hover{
color : red;
text-decoration : underline;
background-color: #ffcc99;
}

が必要なのかもしれませんね。

いずれにしても再現できるソースが分かったのですから、後はそのソースを見ながらそちらで改造などしていけばよろしいのではないでしょうか？

あるいは参考にしながらいろいろとテストしてみるのもいいでしょう。

▼

▼

▼
　 No.9911　Re^18:画像にリンクを貼った場合の枠線の色について
[肉球仮面] [ブラウザ]　 09/02/25 (水) 10:13: atom さん、大変有り難うございました。お陰様で希望していた機能が使えそうです。

IE のバグがよく取り沙汰されますが、ページを作成していて、IE と FF の表示の違いに対応するために取られる労力や時間がすごく大きいような気がします。全てのブラウザが Web 標準に準拠していたなら、同じ内容のページを作るとすると、労力や時間はもっと少なくて済むのではないでしょうか。まぁ、ボヤいてみても始まらないのですが・・・。＾＾；

参考書やネットの記事を首っ引きにしながら目下サイト構築中ですので、また分からないことに出くわしましたらお邪魔するかも知れません。その節にはよろしくお願い致します。有り難うございました。

▼

▼

▼

【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】 一覧 / 詳細

一覧 / 詳細

【ＨＰ作成質問箱】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　一覧 / 詳細