text-decoration: none;が一部だけ効かない理由

このQ&Aのポイント
  • CSSのtext-decoration: none;を使用してアンダーラインを消したいが、一部のリンク先で効かない問題が発生している。
  • 外部スタイルシートでリンクのデザインを変更したが、一部のリンク先だけアンダーラインが表示され続けている。
  • 問題の発生範囲は全体の5%程度であり、すべてのページで同様の現象が起きている。リンク先には共通性がないため、原因は分からない。
回答を見る
  • ベストアンサー

何故か一部だけ、text-decoration: none; にならない・・

a:link { color: #000000; text-decoration: none; } a:visited { color: #339999; } a:hover { color: #FF6600; text-decoration: underline; } これを外部スタイルシートで使っているのですが、 いろいろあるリンク先の一部(全体の5%ぐらい)だけ何故か「text-decoration: none;」 にならずアンダーラインが表示されます。 もともとはアンダーラインがあった状態だったのもを変更したのですが、 一部変更にならないという症状です。 ・どのページでも同じような事が起こっています。 ・リンク先に共通性はないと思います。 これは何によるものなのでしょうか?

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

  • ベストアンサー
  • Oh-Orange
  • ベストアンサー率63% (854/1345)
回答No.1

★『A』のスタイルシート定義は外部ファイルのみですか? ・各ファイルのヘッダの<STYLE>タグ内で『A』を再定義などしていないか確認して下さい。  また、下のように『A』のスタイルシートを定義したらどうなる? お試しあれ: A{  text-decoration: none; } A:link{  color: #000000; } A:visited{  color: #339999; } A:active, A:hover{  color: #FF6600;  text-decoration: underline; } その他: ・DIV A.link{ … } のような定義はしていますか?  これは<DIV>タグ内の『A』だけを特別にスタイルシートで定義します。  もしも、こんな定義があったとして、その中にアンダーラインを表示するように  スタイルシートで記述されていると一部だけアンダーラインが表示されます。 ・あまり複雑なスタイルシートを記述しないか、ちゃんと構造を考えて定義しましょう。  あと関係あるか分かりませんが『A:active{ … }』も記述しておくのはどうでしょうか。 ・以上。参考に!

ame-sanc
質問者

お礼

ご指摘いただいた通りで無事解決いたしました。ありがとうございました。 提供テンプレートのまま使っていたものでこんな事になったみたいです。勉強しなければなりませんね。

関連するQ&A

  • divでくくったけれど、反映が変になります。

    divで指定した2つのリンク要素なのですが、 mainのくくりの中の文字にleftsideの設定が反映されてしまいます。 でも、mainで指定した div#main a:hover { color: #6699FF ; text-decoration: underline; }だけはそのまま活きています。 どこが間違っているのでしょうか。 div#main a:link, a:visited { color: #3300FF ; text-decoration: underline; } div#main a:hover { color: #6699FF ; text-decoration: underline; } div#leftside a:link, a:visited { color: #000000 ; text-decoration: none; } div#leftside a:hover { color: #6699FF ; text-decoration: none; }

    • ベストアンサー
    • HTML
  • はじめて利用します。質問の上で至らぬところがあればご指摘願います。

    はじめて利用します。質問の上で至らぬところがあればご指摘願います。 スタイルシートでリンクの色を変更しているのですが、どうしても未訪問のリンクの色が変わりません。 こんな感じの例で設定しています a{ color:0000ff; font-style:normal; text-decoration:underline; } a:link { color:0000ff; font-style:normal; text-decoration:underline; } a:visited { color:#934C7B; text-decoration:underline; } a:hover { color:#ff0000; font-style:normal; text-decoration:underline; } a:active { text-decoration:none; } link要素も試してみましたが、どうしても未訪問のリンクの色だけかわりません。 同じような質問がありましたが、実際に解決策、納得がいかなく質問させていただきました。 昨日今日でサイト作りをはじめたばかりで、色々と疎いです。 解決方法を探しています、なにとぞよろしくお願いします。

  • 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;を効かせるには、どう対処すればいいのでしょうか? よろしくお願いします。

  • 次のスタイルシートにおいて

    <style type="text/css"> <!-- a:link { color:#333333;text-decoration:none; } a:visited { color:#333333;text-decoration:none; } a:active { color:#ff0000;text-decoration:none; } a:hover { color:#ff0000;text-decoration:none; } --> </style> a:linkなどがA:linkになっているものを見かけますがaを小文字で書くよりも大文字で書くほうが望ましいのでしょうか? 特にxhtml1.1の観点から教えてください

    • ベストアンサー
    • Flash
  • スタイルシートの記述について

    お世話になります。 スタイルシートでリンク箇所にアンダーバーを つけないために下記の記述をしているのですが a:link { Color: #0000cc; text-decoration: none; } a:visited { color: #0000cc; text-decoration: none; } a:hover { color: #ff0000; text-decoration: underline; } a:active { color: #0000cc; text-decoration: none; } ブラウザを起動してみてみるとアンダーバーが 表示されます。 一度リンクをクリックするとアンダーバーの 表示が消えます。 どこかミスがあるのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • a:hoverについて

    リンク毎に「a:hover」のスタイルを変更したいのですが、 a:link { text-decoration: none; color: blue; } a:visited { text-decoration: none; color: blue; } a:hover { text-decoration: underline; color: red; } 通常は↑のスタイルで、 a[aaa]:hover { text-decoration: underline; color: blue; } nameを指定したリンクの場合は↑にしたい。 <a name="aaa" href="~">リンク</a> このような感じだと、上のリンクにカーソルを持っていっても青に変わってくれません。 どーすれば良いでしょうか?

    • ベストアンサー
    • HTML
  • 文章によって違うリンクカラーの指定をするには

    同じページ内で文章によって違うリンクカラーの指定はできるのでしょうか? 現在外部のCSSファイル内において下記の指定をしています。 a:link { color: #000000; text-decoration: none} a:active { color: #FF0000; text-decoration: none} a:visited { color: #000000; text-decoration: none} a:hover { color: #FF0000; text-decoration: none} これを文章によっては、a:linkとa:visited の色を別の色にしたいのですが、どのような方法がありますか?IDやclass指定を使えば可能なのでしょうか?アドバイスおねがいいたします。

    • ベストアンサー
    • HTML
  • CSSについて

    カーソルがルンク先文字にふれた時に色が変わり、 リンクしたあとリンク済みになるCSS( スタイルシート)はこれでいいでしょうか? リンク済みの色が変わりません。 <!-- <style type="text/css"> --><!--A:HOVER{position : relative;top:2px; left:2px;} </style> --> <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style>

    • ベストアンサー
    • HTML
  • cssの外部ファイルでのリンクの装飾

    学校の課題で今HPを作っています。 外部ファイルでリンクの装飾をしようとしているのですが、 検索してもHEAD内に組み込むタイプのタグしか出てきませんでした。 <Style Type="text/css"> <!-- A:link { text-decoration:none; color:#000080; } A:visited { text-decoration:none; color:#000080; } A:active { text-decoration:underline; color:#000080; } A:hover { text-decoration:underline; color:#1e78ff; } //--> </Style> ↑このようなものを外部ファイルの場合はどう書けばいいのでしょうか? つまり↑の内容(リンクの装飾)を↓のような形式に書き換えたいということです。 #title{ font-size:24px; font-weight:bolder; font-family:Arial; } わかりづらくて申し訳ありませんが、どなたか詳しい方いましたらよろしくお願いします★

    • ベストアンサー
    • HTML
  • CSSの文字指定

    <style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。 たとえば、MSゴシック,平成角ゴシックなど。 どう加えればよいですか? <style type="text/css"> font:16px "MS Pゴシック",平成角ゴシック,</style>とやってもダメでした と

    • ベストアンサー
    • HTML

専門家に質問してみよう