CSSでリンクの下線をスッキリさせる方法

リンクの下に引かれる下線って、「これ、リンクだよ！」と分かる一方で、リンクが集まるような場所だったり、アンカーテキストが長かったりすると、逆にゴチャゴチャして見づらくなってしまったりするんですが、この下線をスタイルシート（CSS）を使ってちょっとだけスッキリさせる方法を見つけました。

通常、CSSを使うことで下線をなくすことはできます。

a { text-decoration:none; }
下線なしの場合、下線なしの場合
下線なしの場合、下線なしの場合
a { text-decoration:underline; }
下線ありの場合、下線ありの場合
下線ありの場合、下線ありの場合

こんな感じのものをスタイルシートに追記すれば、リンク部分の下線を消すことが可能。でもでも、下線がなくなるとなーんか寂しいとか、ユーザビリティー的には下線あるべきだよネ！と思ったり思わなかったり。

問題は、リンク部分の下線が実線＆リンクと同色だから目立ちすぎちゃうわけで、下線の色を薄めにするとか、破線にするとかすればスッキリするんじゃない？というわけで考えてみた結果、浮かんできたのがコチラの指定。

a { border-bottom:dotted 1px #0000ff; }
下線をドットにした場合、下線をドットにした場合
下線をドットにした場合、下線をドットにした場合

下線をtext-decorationではなくborderで指定、線種も実線ではなくドット（dotted）を指定してみました。サンプルを比較していただければお分かりかと思うんですが、下線有りでも幾分スッキリしたかと。

borderで指定することで線種だけでなく下線の色もアンカーテキストとは別の色にすることが可能。

a { border-bottom:dotted 1px #6699cc; }
下線を破線＆やや薄めに、下線を破線＆やや薄めに
下線を破線＆やや薄めに、下線を破線＆やや薄めに

こんな感じで場所場所に併せて指定してあげれば、「リンクには下線」というユーザビリティの原則を保ちつつ、デザイン的にスッキリさせることができます。

実は今、このブログをリニューアルしようと準備中なんですが、この技を使ったところ、リンク密集地帯がすっごくスッキリしました。「下線はつけたいけど、なんかなぁ…。」とお悩みの方、ぜひぜひお試しくださいませｗ

Tweet