リンクの下線が「ダサい」を卒業する！CSSでタイポグラフィを磨き上げる魔法のテクニック
Webサイトを作っていて、「リンクの下線が文字に近すぎて窮屈だな…」とか、「下線が太すぎて野暮ったいな…」と感じたことはありませんか？
実は、CSSの標準設定のままだと、下線（text-decoration）は文字とかなり密着して表示されます。デザイナーさんのこだわりが強い現場では、この「デフォルトの線」が一番の悩みどころだったりするんです。
でも、安心してください。最近のCSSには、この下線を自由自在に操るための、まるで「タイポグラフィの職人」になれるような素敵なプロパティが用意されています。
今回は、初心者の方でもすぐに使える`text-underline-offset`と`text-decoration-thickness`という2つのプロパティについて、じっくり解説していきますね。
—
1. まるで「余白」を操る：text-underline-offset
まず一つ目は、「下線と文字の距離」を調整する`text-underline-offset`です。
なぜこれが必要なの？
例えるなら、ノートに線を引くときを想像してみてください。文字のすぐ下をなぞるように線を引くと、文字の「足（gやyなど）」に線が重なってしまって、少し読みづらくなりますよね。
`text-underline-offset`を使えば、文字と線の間に「ちょうどいい隙間」を作ることができます。この隙間があるだけで、Webサイトの印象はグッと洗練されて見えます。
書き方を見てみましょう
a {
/ 文字から下にどれくらい離すかを指定（pxやemで設定します） /
text-underline-offset: 4px;
}
たったこれだけ！これだけで、リンクの見た目が驚くほど上品になります。「なんとなく窮屈だな」と思ったら、まずはこの数値を少しずつ増やしてみてください。
—
2. 線に「意志」を持たせる：text-decoration-thickness
次に紹介するのは、「下線の太さ」を決める`text-decoration-thickness`です。
なぜこれが必要なの？
デフォルトの線は、どうしても頼りなく見えてしまうことがあります。特に見出しや強調したいリンクでは、線を少し太くすることで「ここが重要ですよ！」という視覚的な重み（意志）を伝えることができます。
例えば、お買い物サイトのボタンや、重要なリンクで線を少し太くすると、ユーザーの視線が自然とそこに誘導されやすくなるんです。
書き方を見てみましょう
a {
/ 下線の太さを指定（数字が大きいほど太くなります） /
text-decoration-thickness: 2px;
}
「太くすればいいってもんじゃないでしょ？」と思うかもしれません。その通りです！デザインに合わせて、0.5pxのような繊細な設定から、あえて3pxくらいの太い線にしてレトロな雰囲気を出すなど、いろいろ遊んでみてくださいね。
—
実践！美しいリンクのレシピ
では、この2つを組み合わせて、プロっぽい「読みやすい下線」を作ってみましょう。コピペして、あなたのエディタで試してみてください。
/ リンクに上品な下線を引くスタイル /
.link-elegant {
text-decoration: underline; / まずは下線を有効にする /
/ 線と文字の距離を少しだけ開ける /
text-underline-offset: 6px;
/ 線を少しだけ太くして存在感を出す /
text-decoration-thickness: 1.5px;
/ おまけ：線の色も変えるとさらに綺麗！ /
text-decoration-color: #aaa;
}
つまずきやすいポイントをフォロー
「あれ？反映されない！」という時は、以下の2点を確認してみてください。
1. そもそも `text-decoration: underline;` が書いてあるか？
これがないと、線自体が表示されません。まずは線を呼び出してから、調整しましょう。
2. ブラウザの対応状況は？
現在、主要なブラウザのほとんどがこのプロパティをサポートしています。古いブラウザを気にしすぎる必要はないので、自信を持って使ってくださいね。
—
最後に：小さなこだわりが、大きな信頼に
正直に言います。Webサイトを訪れる一般のユーザーさんは、下線が1px太いかどうかなんて、意識して気づくことはほとんどありません。
でも、「なんとなく読みやすい」「なんとなく雰囲気がいい」という、その「なんとなく」の積み重ねが、Webサイト全体の「信頼感」に直結します。
HTMLやCSSを学び始めの今は、こうした細かいプロパティを一つひとつ覚えるのは大変かもしれません。でも、一つ触ってみるだけで、画面の中の世界が自分の手でコントロールできる実感が湧いてくるはずです。
ぜひ、次の制作物でこの「魔法の線」を試してみてください。あなたのデザインが、もっともっと輝くはずですよ！応援しています。
コメント