多くのWebサイトでリンクの文字には下線が入っていますが、今回はこれをカスタマイズする方法をご紹介したいと思います。線の色、太さ、文字からどれくらい離すかをカスタマイズするだけでデフォルトの状態よりも随分見やすくなります。CSS自体も簡単なのでぜひ試してみてください。

まずは基本から

サイト内外へのリンクを貼るにはHTMLで以下のように書きます。

<a href="〇〇（サイトのURL）">〇〇（リンク部分の文字）</a>

基本ですね。例えば当サイトへのリンクは以下のようになります。

<a href="https://neatdesignjournal.com/">Neat Design Journal</a>

実際にどのように表示されるか、CodePenでご覧ください。

See the Pen 通常のリンク by ryskyshd (@ryskyshd) on CodePen.

ではここからカスタマイズしていきます。

文字の色を変える

表題に入る前に、もう少し基本的なところをおさらいしていきます。リンクの文字色を変えるにはCSSで次のように指定します。

:root {
    --color-anchor: #0077e6;
}

a {
    &:any-link {
        color: var(--color-anchor);
    }
}

直接色を指定しても良いんですが、後々変更する可能性があれば変数化しておくことをお勧めします。ということで:root要素に変数を定義しておきます。

:any-linkというのは:linkと:visitedをまとめたものと思ってください。記述が少なくて済みますが、訪問済みリンクの色を変えたい場合にはそれぞれを指定するようにしてください。

See the Pen any-link-color by ryskyshd (@ryskyshd) on CodePen.

これでリンクの色が#0077e6に変わります。色はお好みで変えてください。

続いてはホバー時（マウスオン）のカラーを変えてみましょう。CSSは以下の通りです。

:root {
    --color-anchor: #0077e6;
    --color-anchor-hover: #004ea2;    
}

a {
    &:any-link {
        color: var(--color-anchor);
    }
    @media (any-hover: hover) {
        &:hover {
            color: var(--color-anchor-hover);
        }
    }
}

@media以降を追加します。この指定で、マウス操作時のみホバーエフェクトが適用されます。

See the Pen Untitled by ryskyshd (@ryskyshd) on CodePen.

さらに、ホバー時の色の変化をフワッとさせるために、transitionを指定します。

:root {
    --color-anchor: #0077e6;
    --color-anchor-hover: #004ea2;    
}

a {
    transition: color 0.2s ease;
    &:any-link {
        color: var(--color-anchor);
    }
    @media (any-hover: hover) {
        &:hover {
            color: var(--color-anchor-hover);
        }
    }
}

aセレクタに変化させたいプロパティ、変化の速さ、変化の仕方をそれぞれ指定します。ここではcolorプロパティを0.2sでeaseで変化させるという指定になります。

transition - CSS: カスケーディングスタイルシート | MDN

transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay、 transition-behavior の一括指定プロパティです。

https://developer.mozilla.org/ja/docs/Web/CSS/transition

それぞれの値の詳細については上記のサイトをご参照ください。

See the Pen transition-linkl by ryskyshd (@ryskyshd) on CodePen.

下線の色を変える

続いては下線の色を変えるCSSです。下線の色を変えるには、text-decoration-colorというプロパティを使います。

a {
    text-decoration-color: #0000ff;
}

こんな感じでaセレクタに対してtext-decoration-colorプロパティの値を指定してください。基本的にはリンクの色と同じか近しい色が違和感なく馴染むと思います。ここではちょっと工夫して、リンクの文字色をrgb()関数の相対値構文を使って透明度を40%に指定します。

a {
    text-decoration-color: rgb(from var(--color-anchor) r g b / 0.4);
}

このようにカスタムプロパティを使うこともできますので、カラーの一貫性が保たれます。

rgb() - CSS: カスケーディングスタイルシート | MDN

rgb() 関数記法は、赤、緑、青の成分によって色を表現します。オプションのアルファ成分は、色の透明度を表します。

https://developer.mozilla.org/ja/docs/Web/CSS/color_value/rgb

下線の太さを変える

では次に下線の太さを変えてみましょう。下線の太さはtext-decoration-thicknessプロパティを使って以下のように書きます。

a {
    text-decoration-thickness: 1px;
}

これも覚えてしまえば簡単ですね。値を2pxとかに変えれば太くもできます。個人的には2pxくらいの方が目立たず埋もれず邪魔せずのちょうど良い感じになると感じます。

下線を少し離す

最後は、リンクの文字列から下線を少しだけ離すCSSです。これも簡単で、text-underline-offsetプロパティを使います。

a {
    text-underline-offset: 0.3em;
}

値については色々と変えてみて適度な数値を見つけてみてください。

全部まとめて

これまでのカスタマイズを全部まとめてみます。私の場合、最終的なコードはこのようになりました。

:root {
    --color-anchor: #0077e6;
    --color-anchor-hover: #004ea2;    
}

a {
    text-decoration-color: rgb(from var(--color-anchor) r g b / 0.4);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    &:any-link {
        color: var(--color-anchor);
    }
    @media (any-hover: hover) {
        &:hover {
            color: var(--color-anchor-hover);
            text-decoration-color: rgb(from var(--color-anchor) r g b / 0.6);
        }
    }
}

text-decoration-colorにもホバー時のエフェクトとtransitionを指定しています。

See the Pen anchor-all by ryskyshd (@ryskyshd) on CodePen.

このようになりました。一番最初のデフォルトの状態と比較すると見やすくなったかと思います。ちなみにこの見やすくなるというのは個人の主観でしかありませんので正解はないと思います。ただ、多くの方が見やすくなるようなデザインは必ず存在しますし、ある程度規格化されているものもありますので、そのような仕様書とか参考書を見て決めても良いかもしれません。

最後に

今回は、リンクの下線をカスタマイズする方法をご紹介しました。どのプロパティもそこまで難しくなく、簡単に実装できるのでぜひやってみてください。

a {
    --color-anchor: #0077e6;
    --color-anchor-hover: #004ea2;
    text-decoration-color: rgb(from var(--color-anchor) r g b / 0.4);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    &:any-link {
        color: var(--color-anchor);
    }
    @media (any-hover: hover) {
        &:hover {
            color: var(--color-anchor-hover);
            text-decoration-color: rgb(from var(--color-anchor) r g b / 0.6);
        }
    }
}

カスタムプロパティをaセレクタの中に書けばこれだけまとめてどこでも使いまわせるようになりますね。今気づきました。笑