リンクからアンダーラインを削除する方法

デフォルトでは、「アンカー」要素を使用してHTMLにリンクされているテキストコンテンツには下線が付いています。しばしば、Webデザイナーは下線を削除することによってこのデフォルトのスタイルを削除することを選択します。

多くのデザイナーは、特にリンクがたくさんある密集したコンテンツブロックでは、下線付きのテキストの表示を気にしません。これらの下線を引いたすべての単語は、実際には文書の読み込みフローを壊す可能性があります。多くの人々は、下線が自然な文字の形を変える方法のために、それらの下線が実際に言葉を区別して素早く読むことを難しくすると主張しています。

しかし、テキストリンクでこれらの下線を維持することには正当なメリットがあります。たとえば、大きなテキストブロックをブラウズすると、下線付きのリンクと適切な色のコントラストを組み合わせることで、読者はすぐにページをスキャンしてリンクの場所を確認することが容易になります。

テキストからリンクを削除することを決定した場合（簡単なプロセスを簡単に説明します）、リンクが何であるかをプレーンテキストと区別するために、そのテキストをスタイルする方法を見つけてください。これは、前述の色のコントラストで最もよく行われますが、色だけでは、色盲のような視覚障害のあるビジターには問題が生じる可能性があります。色盲の特定の形に応じて、コントラストが完全に失われ、リンクテキストとリンクされていないテキストの違いを見ることができなくなります。これは、リンクを表示するには、下線付きのテキストが最良の方法と考えられている理由です。

あなたはまだそれをしたい場合は、下線をどのように消しますか？これは視覚的な特性なので、視覚的なCSSすべてを扱うウェブサイトの部分に目を向けることにします。

カスケードスタイルシートを使用してリンクの下線をオフにする

ほとんどの場合、1つのテキストリンクでアンダーラインをオフにするのではありません。代わりに、デザインスタイルでは、すべてのリンクからアンダーラインを削除する必要があります。これを行うには、外部スタイルシートにスタイルを追加します。

a { テキスト装飾：なし;}

それでおしまい！ CSSの単純な行は、すべてのリンク上で下線（実際には "text-decoration"のCSSプロパティを使用します）をオフにします。

あなたはまた、このスタイルでより具体的になるかもしれません。たとえば、 "nav"要素の下線またはリンクをオフにしたい場合は、次のように書くことができます。

nav a { テキスト装飾：なし;}

現在、ページ上のテキストリンクはデフォルトの下線を取得しますが、ナビゲーション内のテキストリンクは削除されます。

多くのWebデザイナーが選ぶことの1つは、誰かがテキストの上を移動するときにリンクを「オン」に戻すことです。これは：hover CSS擬似クラスを使用して行います。

a { テキスト装飾：なし;}a：ホバー{ テキスト装飾：下線;}

インラインCSSの使用

外部スタイルシートを変更する代わりに、HTML内の要素自体にスタイルを直接追加することもできます。

この方法の問題は、HTML構造内にスタイル情報を配置することです。これはベストプラクティスではありません。スタイル（CSS）と構造（HTML）は別々に保管してください。

サイトのテキストリンクのすべてにアンダーラインを削除したい場合は、このスタイル情報を各リンクに個別に追加すると、サイトコードにかなりの量のマークアップが追加されます。このページの膨らみは、サイトの読み込み時間を遅くし、ページ管理全体をより困難にする可能性があります。これらの理由から、すべてのページスタイリングのニーズに合わせて常に外部スタイルシートに切り替えることが望ましいです。

最後に

Webページのテキストリンクから下線を削除するのと同じくらい簡単ですが、そうすることの結果にも注意する必要があります。それは実際にページの外観をきれいにするかもしれないが、全体的なユーザビリティを犠牲にしてそうするかもしれない。次回にページの「テキスト装飾」プロパティを変更することを検討したときにこれを考慮してください。