【入門編】text-decorationのショートハンドと詳細プロパティ – HTML実践ガイド

こんにちは！フロントエンドの世界へようこそ。

HTMLやCSSを触り始めたばかりの頃、誰もが一度は「リンクのあの青い下線、なんとかならないの？」とか「もう少しおしゃれな下線にしたいな」と悩むはずです。

今日は、そんな「テキストの装飾」に革命を起こす、CSSの『text-decoration』プロパティについてお話しします。難しそうに見えるかもしれませんが、実はとってもクリエイティブで楽しい作業なんですよ。一緒に紐解いていきましょう！

—

昔のCSSでは、`text-decoration: underline` と書けば、ブラウザが決めた通りの「味気ない一本線」しか引けませんでした。でも今は違います。

料理に例えるなら、昔は「とりあえず醤油をかけるだけ」だったのが、今は「スパイスを選び、ソースの厚みや色を変え、お皿に合わせて盛り付ける」ような感覚です。

`text-decoration`を使いこなすには、以下の4つの要素を覚えるだけ。これさえ押さえれば、もう怖いものなしです！

1. line（線そのもの）: 下線、上線、打ち消し線など。
2. color（色）: 線の色を自由に変える。
3. style（線の種類）: 実線、点線、波線など。
4. thickness（太さ）: 線を太くしたり細くしたり。

—

まずは、サクッとコードを見てみましょう。これをCSSファイルに貼り付けるだけで、いつものリンクが劇的に変わります。

/ リンクを自分好みにデコレーション！ /
a {
/ これがショートハンド（省略形）の書き方です /
/ 「下線」「赤色」「波線」「3ピクセルの太さ」 /
text-decoration: underline wavy red 3px;

/ アンカーテキストと線の間の隙間を調整（これが大事！） /
text-underline-offset: 6px;
}

ここで一番のポイントは `text-underline-offset` です。
これがないと、線が文字にべったりと張り付いてしまい、窮屈に見えてしまうんです。ちょっと隙間を開けてあげるだけで、デザインに「呼吸」が生まれ、ぐっとプロっぽくなりますよ。

—

プロの現場では、状況に応じてこれらを使い分けます。

ショートハンド（一括指定）: `text-decoration: underline wavy red 3px;` のように、まとめて書く方法。コードがスッキリして気持ちいいですよね。
個別プロパティ: 「ホバーした時だけ色を変えたい」という時は、分解して書くのが正解です。

/ 通常時：目立たないグレーの細い線 /
a {
text-decoration: underline solid #ccc 1px;
}

/ マウスを乗せた（ホバー）時：鮮やかな青の太い波線へ変化！ /
a:hover {
text-decoration: underline wavy #007bff 3px;
}

こうすることで、ユーザーがマウスを乗せた時に「おっ、反応した！」という小さな驚きを提供できます。Web制作において、こういう「ちょっとした気遣い」が、サイトの品質を何倍にも高めてくれるんです。

—

学習していると、「あれ？線が出ない」「線が消えない」といった現象に出くわすことがあります。

「線が消えない！」という時：`text-decoration: none;` を指定していないか確認してください。親要素で設定されている場合、子要素でちゃんと打ち消してあげる必要があります。
「線が文字に重なって読みづらい」という時：先ほど紹介した `text-underline-offset` を調整してみてください。これだけで解決することがほとんどです。

—

HTMLとCSSの面白いところは、どれだけ変えてもブラウザが壊れることはないという点です。

「今日は波線にしてみようかな？」「いや、思い切って太い点線にしてみよう！」と、パズルのように色々試してみてください。失敗しても、その分だけ「どうすれば思い通りになるか」という知識があなたの血肉になります。

最初は少し難しく感じるかもしれませんが、大丈夫。誰もが通る道です。今日覚えた `text-decoration` の魔法で、あなたのWebサイトに素敵な彩りを加えてみてくださいね。

また次の記事で、お会いしましょう！