CSSの設定(a:link)でリンクのアンダーラインを点線にしているのですが、ネットスケープ,MacのIE等のブラウザではリンクを張った画像にも点線のアンダーラインがついてしまいます。これを回避する方法もしくは詳しいURLをを教えてください。.imgというクラスを作り.img a:link { text-decoration: none; border: none 0px }とし、画像に.imgクラスを指定しましたが解決しませんでした。(何か間違いがあるのかも..)

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答5件)

id:finalvent No.1

回答回数321ベストアンサー獲得回数1

ポイント20pt

文字側をクラスで特定しては?

a.txt {

text-decoration: none;

border-bottom: dotted;

}

<p><a class=”txt” href=”

”>Hatena!</a></p>

id:chankaz No.2

回答回数53ベストアンサー獲得回数3

ポイント20pt

http://kanzaki.com/docs/htminfo.html

ごく簡単なHTMLの説明

画像にリンクをはった場合、普通は

<a href=”〜”><img src=”〜”></a>

となるので、わざわざクラスを指定しなくても、

a:link img{ text-decoration:none; border:none 0px; }

で消えると思います。お試しあれ。

id:mady No.3

回答回数86ベストアンサー獲得回数0

ポイント20pt

http://www.htmq.com/

HTMLクイックリファレンス

単純に記述ルールが間違っています

クラス属性は単独で用いるか、要素に

つけるかのどちらかで使用します。

すなわち

.img a:link

では無く

a.img:link

とすれば直ります(実験済み)。

id:sakyo No.4

回答回数46ベストアンサー獲得回数0

ポイント30pt

http://hp.vector.co.jp/authors/VA022006/css/index.html

正しい知識を得たい人の爲のCSS2リファレンス

なぜか、さっき書けなかった。遅いし、他の方の説明でも足りてると思います。

ポイントは不要です。(せっかく書いたので投稿だけしときます)

質問の「.img a:link」は、「img属性を持つ任意の要素に内包されるA要素」に適用されます。

例.<span class=”img”><a href=”URL”><img src=”URL”></a>

「<a href=”URL”><img class=”img” src=”URL”></a>」は、「A要素に内包されているimg属性を持つ要素」なので適用されません。

HTMLを書き換えたくない場合は、「a:link .img」とすると「A要素内のimg属性を持つ要素」に適用されます。

例.<a href=”URL”><img class=”img” src=”URL”></a>

「a:link img」とすると「A要素内のimg要素」に適用されます。全ての画像で装飾をしたくないのであれば、こちらの方が簡潔だと思います。

例.<a href=”URL”><img src=”URL”></a>

id:HIDEBIRD

みなさん、ご回答ありがとうございます。

現在検証中ですがなぜかうまくいきません(泣)混乱してます(笑)

finalventさんのご回答は、柔軟な発想でなるほどと思わされました。頭かたいな>自分(笑)

ただ、テキストリンクが多いと面倒ですね;;。

chankazさん、madyさん、sakyoさんのご回答は、要素を特定する方法がいまいち良くわかってなかったので

とても参考になりました。

ただ、設定してみたのですが思い通りに行かないのですよね;;。頭冷やして検証続けてみます。

検証中にわかったのですが、WinXPのIE(最新)の場合

テーブルセルに密接するリンク付き画像の下線が消えるようです。

MacのSafari(OSX)は、セル内外問わず画像に下線がつかないようです

(IE,Safari共にスライスに配慮してるのでしょうか...実装は正しくないですね...?)

WinXP版Netscape7.1では下線が表示されます。

(スライス内画像リンクにもボーダーが表示されスライスが崩れて困ってしまう−Map設定で回避は可能なのですが....)

(上記条件は未確定です。a:linkに点線の下線を指定したときの状況です)

質問は終了としますが、解決していないのでなにかご意見ありましたらコメント頂けると幸いです。

2003/08/21 18:21:30
id:chankaz No.5

回答回数53ベストアンサー獲得回数3

http://www.ne.jp/asahi/minazuki/bakera/html/css/reference

水無月ばけらの CSS リファレンス

>画像に.imgクラスを指定しました

と書かれていたので勘違いしていました。

記述方法は回答3のmadyさんの書き方で直ります。

が、クラスを指定するのは画像にではなくてアンカーの方です。

<a class=”img” href=”〜”><img src=”〜”></a>

  • id:sakyo
    補足1

    http://www.fromdfj.net/html/
    http://hp.vector.co.jp/authors/VA022006/css/index.html
    上記の二つは、CSSの実装やバグについても、載ってます。
    http://cssbug.tripod.co.jp/
    こちらは、ブラウザごとのCSS実装バグ(2chのスレッドでの情報)をまとめたページ
    水無月ばけらさんのサイトもあわせて、私が普段参考にしてるサイトです。
    この辺を一通り目を通したら、あとは、細かいバグを見つける度に検索かけていけば、たいていのことは解決すると思います。

    最後に、A要素にimg属性を指定しているなら、
    a.img:link img { text-decoration:none;border:none}
    です。
    (text-decorationはテキストを含まない要素には適用されないので、img属性をもつA要素内がimg要素のみなら不要)
    (borderは継承されない)
  • id:HIDEBIRD
    Re:補足1

    a.img:link { border: none 0px }
    として
    <a class=”img” href=”URL”><img src=”URL”〜></a>

    とすることで、 検証したどのブラウザでもリンク画像の下線が消えました。

    クラス指定しなくても一括でできればスマートなのですが、なぜだかできませんでした。何かミスってるかなぁ;;

    sakyoさんURLとても参考になりました。ありがとうございました。
  • id:sakyo
    Re(2):補足1

    他の部分で、A要素、IMG要素に対する指定を何もしていないという前提で、
    a:link { text-decoration:none ; border-bottom:1px #000000 dotted ;}
    a:link img { border:none ;}
    これで、HTMLでclass属性を指定する必要はなくなるはずです。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません