CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使ってリンクの点線アウトラインを非表示にする方法

ハイパーリンクは、クリックされたとき（アクティブ状態）やキーボードでフォーカスされたときに、周囲に点線のアウトラインが表示されるのがデフォルトの動作です。ブラウザによって見た目が異なる場合もありますが、この点線を消したい場合は、CSSのoutlineプロパティをnoneに設定することで簡単に実現できます。

解決方法

以下のように、a要素とその擬似クラスに対してoutline: none;を指定します。

a, a:active, a:focus {
    outline: none;
}

サンプルコード

実際に、アクティブなリンクの周囲の点線を削除する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Remove dotted line around links using css</title>
</head>
<style>
div {
    color: #000;
    padding:20px;
    background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
    text-align: center;
}
a, a:active, a:focus {
    outline: none;
}
</style>
<body>
<div>
<h1>HTML Links Demo</h1>
<a href="https://google.com" target="_blank">Go To Google</a>
</div>
</body>
</html>

実行結果

上記コードの出力結果は以下の通りです。

適用前

リンクをクリックすると、周囲に点線のアウトラインが表示されます。

CSSを使ってリンクの点線アウトラインを非表示にする方法

適用後

outline: none;を適用すると、クリックしても点線が表示されなくなります。

CSSを使ってリンクの点線アウトラインを非表示にする方法

注意点

アウトラインを完全に削除すると、キーボード操作でのフォーカス位置が分かりにくくなり、アクセシビリティ（ユーザビリティ）の観点で問題が生じる可能性があります。その場合は、:focus-visible擬似クラスを使って、キーボード操作時のみ視覚的なフォーカス表示を残す方法も検討するとよいでしょう。

  1. CSSでリンクの色を設定する方法｜colorプロパティと疑似クラスの使い方

    CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。構文CSSの color プロパティの基本構文は以下のとおりです。Selector {    color: /*値*/ }サンプルコード1次の例では、リン

  2. CSSでリンクの下線を消す方法｜text-decorationプロパティの基本と実例

    はじめにデフォルトでは、HTML内のすべてのリンク（<a>要素）には下線が自動的に表示されます。この下線は、CSSのtext-decorationプロパティを使うことで簡単に削除できます。デザイン性の高いナビゲーションメニューやボタン風のリンクを作成したい場合などに、よく使われるテクニックです。構文CSSのtext-decorationプロパティの基本的な構文は以下のとおりです。Selector {    text-decoration: /*値*/ }下線を削除する場合は、値としてnoneを指定します。使用例1：シンプルな下線の削除以下の例では、a要素に対して