web-dev-qa-db-ja.com

アンカー（リンク）の下線を削除する方法

ページに導入されたテキストとリンクの下線を避けるために（CSSで）とにかくありますか？

htmlcssunderline
273
Steven

CSSを使用してください。これにより、aおよびu要素から下線が除去されます。

a, u {
    text-decoration: none;
}

場合によっては、要素の他のスタイルをオーバーライドする必要があります。その場合は、ルールに!important修飾子を使用できます。

a {
    text-decoration: none !important;
}
457
Emil Vikström

CSSは

text-decoration: none;

そして

text-decoration: underline;
26
DanDan

これはあなたの色と、アンカータグが存在するという下線を消します

 a {
     text-decoration: none ;
  }
a:hover
  {
    color:white;
    text-decoration:none;
    cursor:pointer;
   }
15
Ashwin Shahi

最も簡単なオプションはこれです：

<a style="text-decoration: none">No underline</a>

もちろん、CSSとHTMLを混在させること（つまりインラインCSS）は、特にaタグを至るところで使用している場合はお勧めできません。
だからこそ、代わりにこれをスタイルシートに追加するのは良い考えです：

a {
    text-decoration: none;
}

あるいは、JSファイルのこのコードでさえ：

var els = document.getElementsByTagName('a');

for (var el = 0; el < els.length; el++) {
    els[el].style["text-decoration"] = "none";
}
8
XLogic

CSSを使用してtext-decorationsを削除します。

a {
    text-decoration: none;
}
6
Alan Haggai Alavi

アンカーリンクのみからアンダーラインを削除したい場合に最適なオプション - 

    #content a{
                text-decoration-line:none;
                }

これにより下線が削除されます。

さらに、あなたも他のスタイルを操作するために同様の構文を使うことができます。

                text-decoration: none;
                text-decoration-color: blue;
                text-decoration-skip: spaces;
                text-decoration-style: dotted;

これが役立つことを願っています！

P。 - これが私の最初の答えです。

4
praveen kaushik

いつかそれはいくつかのレンダリングUI CSSによって上書きされます。より良い使い方：

a.className {
    text-decoration: none !important;
}
4
Sanjib Karmakar

私の場合は、このようにアンカーによるホバー効果についての規則がありました。

#content a:hover{
border-bottom: 1px solid #333;
}

もちろん、text-decoration:none;はこの状況では役に立ちませんでした。そしてそれがわかるまで私は多くの時間を費やしました。

だから：下線とボーダーボトムを混同しないでください

3
Aleksandr Khomenko

問題への別の視点を提供するには（元の記事のタイトル/内容から推測されるように）：

HTMLで不正な下線を作成しているものを突き止めたい場合は、デバッグツールを使用してください。から選択することがたくさんあります：

FirefoxにはFireBugがあります。

OperaにはDragonflyがあります（Tools-> Advancedメニューでは "Developer tools"と呼ばれます;デフォルトではOperaに付属しています）。

IEには "Internet Explorer Developer Toolbar"があります。これはIE7以下用の個別ダウンロードで、IE8に統合されています（F12を押してください）。

私はSafari、Chrome、その他の少数派ブラウザについては知りませんが、とにかく上の3つのうちの少なくとも1つをあなたのマシンに持っているべきです。

1
Vilx-

スタイルを追加せずに単純にリンクとしてアンカータグを使用する場合（ホバーや青い色の下線など）、アンカータグにclass="no-style"を追加します。それからあなたのグローバルスタイルシートの中でクラス "no-style"を作ります。

.no-style { text-decoration: none !important; }

これには2つの利点があります。

  1. すべてのアンカータグに影響を与えるわけではなく、「スタイルなし」クラスが追加されたものだけに影響します。
  2. そうでなければtext-decorationをnoneに設定できなくなる可能性がある他のスタイル設定を上書きします。
1
Frederick John

Linkタグを使用してスタイルシートを含めることを忘れないでください

http://www.w3schools.com/TAGS/tag_link.asp

または、CSSをWebページのスタイルタグで囲みます。

<style>
  a { text-decoration:none; }
  p { text-decoration:underline; }
</style>

下線はリンク以外には使用しないことをお勧めします。下線はクリック可能なものとして一般に認められています。クリックできない場合は、下線を引かないでください。

CSSの基本はw3schoolsで拾うことができます

0
JasonS

下線は、テキスト装飾と呼ばれるCSSプロパティによって削除されることがあります。

<style>
a{
text-decoration:none;
}
</style>

a以外の要素にあるテキストの下線を削除する場合は、次の構文を使用してください。

<style>
element-name{
text-decoration:none;
}
</style>

他にも text-decoration の値を使ってリンクをデザインすることができます。

0
Sheraz
<u>

非推奨のタグです。

つかいます...

<span class="underline">My text</span>

...を含むCSSファイルで.

span.underline
{
    text-decoration: underline;
}

あるいは単に...

<span style="text-decoration:underline">My Text</span>
0
Moose Factory

Cssプロパティを使う

text-decoration:none;

リンクから下線を削除します。

0
Smita Kagwade