HTMLのリンクから下線を削除する方法は？

129

私のページには、行を入れたくないリンクをいくつか置いています。HTMLを使用してそれを削除するにはどうすればよいですか？

html

— パイクテン
ソース

4

Paicさん、タグをロールバックする手間は省きますが、下線を削除する唯一の方法はCSSを使用することです。はい、それを（style属性内の）HTMLにインラインで追加している場合でも、CSSのままです。他の2つのタグも完全に有効です（presentationおよびhyperlink）。今後、正当な理由がない限り、質問からタグを削除（または追加）しないでください。ありがとう！

— 0b10011

@bfrohs私はあなたの言葉を尊重しますが、私はHTMLのみを使用してサイトを構築しているため、タグを追加しませんでした。実際、私は少し初心者です。それが理由です。

— Paic Ten

3

CSSなしで標準に準拠したWebサイトを構築することはできません（すべてのプレゼンテーションにブラウザーのデフォルトを使用しない限り）。HTML =構造; CSS =プレゼンテーション。他のタグは他の言語とは何の関係もありません-それらは人々が質問と答えを見つけるのを助けるためだけに提供されました。

— 0b10011

1

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

— RAS 14

2

なぜこの質問には非常に多くの賛成票があるのですか？文字通り1つのGoogle検索で答えることができ、StackOverflowにも多くの重複があると思います。

— Alternatex

191

インラインバージョン：

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

ただし、通常はWebサイトのコンテンツ（HTML）をプレゼンテーション（CSS）から分離する必要があることに注意してください。）。したがって、通常はインラインスタイルを使用しないでください。

CSSを使用した同等の回答については、ジョンの回答を参照してください。

— patryk.beza
ソース

1

キラー！私は^^ ....私はHTMLをやっていることすべての年でこれらのアンダースコアラインを見たことがない

— アレックスCIO

1

ジョンの答えは依然として本質的にインラインスタイルを使用しています。CSSを分離することは、htmlでcssをエイリアスすること以上のものを意味します。例えば、class="big-and-red"分離ではなくエイリアシングです。class="meaningful-domain-item"次にCSS .meaningful-domain-item { //big and red }です。この回答は、CSS +1で使用するタグを思い出させるのに十分です。

— Nathan Cooper

この上記のコードは私にはうまくいきませんでした。問題を掘り下げたとき、hrefの後にスタイルを配置したため、問題が機能していないことに気付きました。hrefの前にスタイルを配置すると、期待どおりに機能していました。<a href=" yoursite.com」style="text-decoration:none"> yoursiteする</a>

— ガネーシュMS

55

これにより、すべてのリンクからすべての下線が削除されます。

a {text-decoration: none; }

これを適用したい特定のリンクがある場合は、次のようにクラス名を付けてnounderlineください：

a.nounderline {text-decoration: none; }

それはそれらのリンクにのみ適用され、他のすべてのリンクには影響しません。

このコードは、<head>ドキュメントのまたはスタイルシートに属しています。

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

そして体内で：

<a href="#" class="nounderline">Link</a>

— ジョン・コンデ
ソース

15

マウスポインターがアンカー上にある場合、下線を避けるために：hoverを使用することをお勧めします

a:hover {
   text-decoration:none;
}

— ローマ人
ソース

6

これを外部スタイルシートに追加します（推奨）：
```
a {text-decoration:none;}
```
または、これを<head>HTMLドキュメントのに追加します。
```
<style type="text/css">
 a {text-decoration:none;}
</style>
```

または、a要素自体に追加します（非推奨）。

<!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

— 0b10011
ソース

4

他の回答はすべてテキスト装飾について言及しています。Wordpressテーマまたは他の誰かのCSSを使用して、リンクに他の方法で下線を付け、テキスト装飾を適用する場合があります。下線をオフにするものはありません。

境界線とボックスシャドウは、リンクに下線を引くために知っている2つの方法です。これらをオフにするには：

border: none;

そして

box-shadow: none;

— ジョー・ゴルトン
ソース

2

以下はベストプラクティスではありませんが、役立つ場合があります

John Condeが提供するソリューションを使用することをお勧めしますが、外部CSSを使用できない場合もあります。したがって、HTMLタグに以下を追加できます。

<a style="text-decoration:none;">My Link</a>

— nebulousGirl
ソース

1

<style="text-decoration: none">

上記のコードで十分です。下線を削除するリンクに貼り付けてください。

— sd1990
ソース

1

上記のコードはすべて機能しませんでした。問題を掘り下げたとき、hrefの後にスタイルを配置したため、問題が機能していないことに気付きました。hrefの前にスタイルを配置すると、期待どおりに機能していました。

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>

— ガネーシュMS
ソース