• ベストアンサー
  • 困ってます

スタイルシートで。。

こんにちは。 外部CSSをリンクさせてCSSを反映させています。 そこで質問です。 リンク箇所には下線がでるようにしていますが、リンクのある画像にまで下線がついてしまうのです。 画像だけには適用させない、というようなタグはありますか? ちなみにこういうのを記述してます a:link{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:visited{color:#cccccc;text-decoration:none;border-bottom: #ffffff 1px dashed;} a:active{color:#cccccc;text-decoration:none;border-bottom : #ffffff 1px dashed;} a:hover{color:#cccccc ;text-decoration:none;background-color : #688999; border-bottom : #ffffff 1px dashed;} なにか回避方はありませんでしょうか? 教えてください、よろしくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数69
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.2
  • Bo_Bo
  • ベストアンサー率65% (97/149)

以下では、どうですか!? <html><head><title>TEST</title> <style type="text/css"><!-- a { text-decoration:none; border-bottom:1px #f00 dashed; } a.ancNoBorder { border: none !important; } --></style> </head><body> <p><a href="#">アンカー</a></p> <p> <a class="ancNoBorder" href="#"><img src="fig.gif" border="0"></a> </p> </body></html> 【蛇足】 “id”は、オブジェクトを特定するための識別句です。 1つのページに同一の“id”を複数適用することは、出来ません。 #keyword { color:red }    : <p id="keyword">text 01</p> <p id="keyword">text 02</p> は間違い。“class”にしましょう!

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 今お教えたいただいた方法でやってみたら・・ なりました!! けっこう一年近く悩んでたんですが、説明のしかたがわからなくて質問もできずにいました・・。 !importantってよくわからないんですが、いろいろ勉強したくなってきました。 永い間の悩みが解消できました。 ありがとうございました。

関連するQ&A

  • リンクの下線を破線にしているのですが…

    リンクの下線を破線にするスタイルシートを使用しているのですが、 通常の左寄せや<center>タグで囲ったテキストでは正常に動作するのに、 <div align="right">または<p align="right">で囲った右寄せのテキストには破線が表示されません。 どうすれば表示されるようになるでしょうか。 私が使用しているスタイルシートは以下の通りです。 <style type="text/css"> <!-- A:link {color:#666666; text-decoration:none; border-bottom:1px dashed #00CCCC;} A:visited {color:#666666; text-decoration:none; border-bottom:1px dashed #00CCCC;} A:hover {color:#FF3300; text-decoration:none; border-bottom:1px dashed #00CCCC;} --> </style>

  • スタイルシートでリンクに装飾することについて教えてください

    今、自分の日記にスタイルシートを使っています。 スタイルシートでリンクに点線の下線をつけているんですが、 これをページ内のリンク部分の一部だけに適用するようにしたいのですが どうしたらできますか? 今、ソースはこうなっています。 a:link,a:hover,a:active,a:visited { text-decoration : none ; border-bottom : 1px dashed #99E ; } これに何か付け加えて指定したらできると思うのですが 自分で調べてもわかりませんでした。 ぜひ教えてください。よろしくお願いします。

  • リンクのスタイルシートについての質問

    スタイルシートを作成しています。 リンクにアクションをつけたのですが 思うような動作にならずに、悩んでします。 ちなみに動作確認はIE6で行っています。 ◆現在の動き リンクにマウスをのせると箱が上下に動いてしまう。 ◆どうしたいか リンクにマウスののせても箱が上下に動かないようにしたい。 固定したいとうことです。 以下に作成したソースをのせておきますので わかる方いましたら教えていただけると幸いです。 a.menu01{ text-decoration:none; text-align: center; border:#FFF solid 1px; background-color:#DACD96; width:280px; font-size:15px; font-weight:bold; color:#FFF; padding:5px; display:block; letter-spacing: 5px; margin-bottom:10px; } a.menu01:active { margin-bottom:10px; } a.menu01:visited{ margin-bottom:10px; text-decoration:none; } a.menu01:hover { text-decoration:none; color:#AA8B62; background-color:#FFFFFF; margin-bottom:10px; }

その他の回答 (2)

  • 回答No.3

外部ファイルに a img{    border-style: none;} を追加してみてください。 私はこれで画像リンクの下線を外しています。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。 お教えいただいた分は以前試したのですが反映されなくって・・・。 ありがとうございました。

  • 回答No.1

ちょっと手間かもしれませんが、<a>タグに属性をつけてCSSのほうで ノーマル用と画像用で分けて記述すれば大丈夫ではないでしょうか。 idとかclassとか。 例えばこんな 普通のリンク用 <a id="normal">xxxxx</a> 画像用 <a id="graphic">xxxxx</a> でCSSで #normal a { 設定 } とか。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございました。 そうですね、分ければいいかもしれません。 ありがとうございました。

関連するQ&A

  • スタイルシートと画像リンクの下線

    現在HPを作成しています。 スタイルシートで、ページ内指定で、リンクについて下線を表示させています。テキストから下線を少し離したいので以下のような記述をしています。 A:link{text-decoration:none;border-bottom-style:solid;border-width:1px;padding-bottom:0.3p x;color:#000000;} そして、そのページ内にある画像からもリンクを設定したいのですが、画像には下線がついて欲しくないのです。 何かよい方法がありますでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでリンクの表示をテキストと画像で変えたい

    CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、  アンダーラインをださない  a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • CSSのtext-decoration: none;が効かない

    こんにちは。 CSSでリストタグ内のリンクのアンダーラインを消すために、 .side_menu li { line-height: 100%; border-bottom: 1px solid #FFFFFF; } .side_menu a { display: block; padding-left: 30px; background: #FFFFFF; width: 160px; text-indent: -17px; text-decoration: none; } .side_menu a:hover { background: #BDE2F7; text-decoration: none; } としました。 作業しているうちに、きちんと消えていたリンクのアンダーラインが付いているのに気づきました。 すべてにではなく、数行なのです。付いてないところもあります。 htmlにゴミが入ってるのかと思い、再入力したのですがなぜか傷が広がります。 こんな現象って・・・? text-decoration: none;を効かせるには、どう対処すればいいのでしょうか? よろしくお願いします。

  • CSS:スタイルシートでテキストリンク

    教えてください!! 外部ファイルのスタイルシート(CSS)を使って、各ページへジャンプするテキストリンクをマウスオーバー時に太字になるように設定しています。 IE6.0では問題なく起動していますが、NS7.1,Firefox1.0では、機能していません。何か対処方法はないでしょうか? ↓私の記述は以下の通りです↓ 【外部ファイルへのリンクの記述】 <link rel="stylesheet" type="text/css" href="../menu.css" title="menu" /> 【外部ファイル内のCSSの記述】 .menu { font-family: "MS Pゴシック", Osaka; font-size: 12px; font-style: normal; line-height: 14px; color: #FFFFFF; text-decoration: none; } .menu a:link { color: #FFFFFF; text-decoration: none; } .menu a:visited { color: #FFFFFF; text-decoration: none; } .menu a:hover { color: #FFFFFF; font-weight: bold; text-decoration: none; } .menu a:active { color: #FFFFFF; font-weight: bold; text-decoration: none; }

  • CSSで表示が異なってしまう

    下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか? よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>

    • ベストアンサー
    • HTML
  • CSSを消して表に色を付けたい!!!

    参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「CSSが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> 1.CSSを全て解除しなければいけないのですか? 2.メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか?

  • CSS、どこが間違っている?

    友人の話によると、以下のCSSをネット上のチェックプログラムにかけると、エラーがあるといわれるらしいのですが、私にはどこが間違っているのかわかりません。 そのプログラムがそんなに信頼できるのかも謎ですが、「専門家じゃないから私にはわからんよ」といっても「なんとかしてくれ」の一点張りです。 他人様に頼るのもどうかと思うのですが...「なんとかして」頂きたいです。 よろしくお願いします。 BODY{background: #ffffff; url(top.gif) no-repeat fixed 50% 50%; color:#000000; line-height:1.2em; cursor:default;} INPUT,TEXTAREA,SELECT{background-color: #ffffff; color:#000000; border: #000000 1px solid;} a:link{background-color: #ffffff; text-decoration:none; color:#0000A0; cursor : default;} a:visited{background-color: #ffffff; text-decoration:none; color:#707070; cursor : default;} a:active{background-color: #ffffff; text-decoration:none; color:#0000A0; cursor : default;}

  • CSSの優先順位

    CSSを一部適用しない部分を設定したいのですが方法が分かりません。 もしかすると、私のやりたいことはCSSの順位付けかもしれません。 ▼基本▼ a:link {color:赤;text-decoration:none;} a:visited {color:青;text-decoration:none;} a:hover {color:黄;text-decoration:none;} a:active {color:緑;text-decoration:none;} ▲基本▲ 一方、下記のテキストには上記CSSの効果はいらないです。ここのテキストはリンクを貼っても文字の色(基本色:黒)を変化させず、下線もつけたくありません。 <td style="border:1px solid gray;" onmouseover="this.style.backgroundColor=紫" onmouseout="this.style.backgroundColor=白">ホーム</td> 「基本」を記述をすると、もちろんリンクをつけたすべてのテキストに適用されてしまいます。 しかし「基本」を一部適用したくない場所に不適用とすると下線とかも勝手につきますよね。 2番目に優先させるものとして↓を記述すべきですか? a:link {color:黒;text-decoration:none;} a:visited {color:黒;text-decoration:none;} a:hover {color:黒;text-decoration:none;} a:active {color:黒;text-decoration:none;} そもそも優先順位のつけかたが分からないのですが…。 色々考えましたが、何をすべきか分かりません。よろしくお願いします。

  • borderでa:hover下線表示させるとズレる

    underline では雰囲気に合わないため、border-bottomでホバー時のリンク下線を表示させています。具体的には以下のような感じです。 a {color: 青; text-decoration: none;} a:hover {color: 赤; text-decoration: none; border-bottom: dotted 1px 赤;} これでほとんど問題ないのですが、まれにホバー時にガタッと表示がズレることがあります。よく分からないのですが、ちいさなdiv要素を連続させている部分で起こるような気がします。リンクにマウスオーバーすると、続くdiv部分が下線分?下に動く感じです。 説明がうまくできているか分かりませんが、解決策があったら教えてください。ちいさなことですが、結構気になってしまいます。

    • ベストアンサー
    • HTML
  • スタイルシートでツールチップ

    初心者です。 http://ameblo.jp/linking/entry-10083271034.htmlから拝借して、ツールチップが出るような指定をしたいと思うのですが、できたらaタグを使わずにやりたいのですが、どうしたらよいでしょうか。 よろしくお願いいたします。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;} </style> <body> Easy <a href="#" class="tooltip">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>. </body> </html>

    • ベストアンサー
    • HTML