こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。
Webサイトを作っていると、リンクに下線を引いたり、終わったタスクに打ち消し線を入れたりといった「テキストの装飾」は避けて通れませんよね。特にインライン要素（`a`タグや`span`タグなど）を扱うとき、CSSの`text-decoration`プロパティはとても身近な存在です。
でも、いざ使い始めると「下線が文字と重なって読みづらいな…」「もっとオシャレに線をカスタマイズできないの？」なんて悩みが出てきませんか？
今日は、そんな「CSSの線」にまつわるちょっと深い話を、現場のリアルな感覚を交えながら優しく紐解いていこうと思います。
—
そもそも `text-decoration` って何者？
`text-decoration`は、その名の通り「テキストの装飾」を担当するプロパティです。主に以下の3つの「線」を引くことができます。
- 下線（underline）: リンクの定番。
- 打ち消し線（line-through）: 「価格改定しました！」といった古い情報の取り消しによく使います。
- オーバーライン（overline）: 文字の頭に線を引く、ちょっと珍しい装飾です。
これらを指定するだけで、Webサイトに「ここをクリックできるよ！」「ここは修正済みだよ！」という視覚的な合図を送れるようになります。
—
下線と文字が「重なる問題」を解決しよう
さて、ここからが本題です。標準の`text-decoration: underline`を使うと、日本語の「g」や「y」、あるいは漢字の「針」や「芽」といった、下に突き出す部分（ディセンダーと呼びます）と下線が重なってしまい、文字が潰れて見えることはありませんか？
昔のWeb制作現場では、この重なりを避けるために`border-bottom`を使って、パディングを調整して…と苦労したものです。でも、今は`text-decoration-skip-ink`という魔法のプロパティがあります。
`text-decoration-skip-ink` の実力
このプロパティを `auto` に設定すると、「文字の部分だけ、自動的に線を避けてくれる」という賢い挙動をしてくれます。
.link-style {
text-decoration: underline;
/ 文字の突き出し部分を避けて、線を途切れさせる魔法 /
text-decoration-skip-ink: auto;
}
これだけで、どんなフォントを使っても読みやすさが格段にアップします。細かいことですが、この「読みやすさへの配慮」が、プロのサイトとそうでないサイトの分かれ道だったりするんですよ。
—
線を自分好みにカスタマイズする
最近のCSSは進化していて、単に線を引くだけじゃなく、線の太さや色、スタイルまで細かく指定できるようになりました。まるでペンの種類を選ぶような感覚です。
.fancy-link {
text-decoration: underline;
/ 線の太さを指定 /
text-decoration-thickness: 3px;
/ 線の色を文字と変えてみる /
text-decoration-color: #ff6b6b;
/ 線のスタイルを波線に！ /
text-decoration-style: wavy;
/ 線と文字の距離を少し離す /
text-underline-offset: 4px;
}
「お買い物のカートの中身」を表示する際、売り切れの商品に「波線の打ち消し線」を引いたりすると、ユーザーにとって「おっと、これは選べないんだな」ということが直感的に伝わります。こういった小さな工夫が、サイトの使い勝手を大きく左右するんです。
—
初学者がつまずきやすいポイント：インライン要素の特性
ここで一つだけ、初心者の時に「なぜ？」となりやすいポイントをお伝えしますね。
`span`や`a`タグのような「インライン要素」は、「文章の中に溶け込むための要素」です。そのため、`text-decoration`で線を引くと、それはあくまで「テキストの一部」として扱われます。
もし「線だけをもっと大きく動かしたい」「線にアニメーションをつけたい」という場合は、あえてインライン要素のままではなく、`display: inline-block` に変えてみるのも一つのテクニックです。そうすると、箱（ブロック）としての性質も持つようになるので、より自由なデザインが可能になります。
—
まとめ：装飾は「ユーザーへのメッセージ」
CSSのプロパティはただの命令文ではなく、「読者にどう伝わってほしいか」というメッセージです。
- `text-decoration-skip-ink: auto` で読みやすさを確保する。
- `text-decoration-style` や `thickness` で意味に合わせたデザインを施す。
これらを知っておくだけで、あなたの作るWebサイトは一気に「現場レベルのクオリティ」に近づきます。最初はすべてを覚える必要なんてありません。「あ、そういえば線ってカスタマイズできたな」と思い出せれば、その時はこの記事のコードをコピペして使ってみてくださいね。
皆さんのWeb制作が、少しでも楽しく、そして快適なものになりますように！応援しています！
コメント