下線（アンダーライン）はもう古い？CSSで「一歩先行く」テキスト装飾をマスターしよう
Web制作を始めたばかりの頃、誰もが一度は「リンクの下線って、どうしていつも同じ太さで同じ色なんだろう？」と疑問に思ったことがあるはずです。デフォルトの `text-decoration: underline` は、正直なところ少し野暮ったいですよね。
でも、安心してください。今のCSSは、まるでペンを使い分けるように、自由自在にテキストを飾れるよう進化しています。今日は、ただの「線」を「デザイン」に変える、魔法のようなプロパティたちをご紹介します。
—
1. そもそも「text-decoration」って何者？
`text-decoration` は、テキストに線を引いたり消したりするプロパティです。以前は「引くか、引かないか」の二択でしたが、現在は「線の種類」「線の色」「線の太さ」「線との隙間」を細かく指定できるようになりました。
これをお料理に例えるなら、これまでは「塩をかけるか、かけないか」だけだったのが、今は「岩塩をどれくらいの粗さで、どのくらいの量、どこに振りかけるか」を選べるようになったようなものです。
—
2. 自由自在に操る！5つの魔法のプロパティ
CSSには、線の個性を決めるための「職人道具」が5つ用意されています。
- `text-decoration-line`: 線をどこに引くか（下線、上線、取り消し線）
- `text-decoration-style`: 線の形（実線、点線、波線など）
- `text-decoration-color`: 線の色
- `text-decoration-thickness`: 線の太さ
- `text-decoration-offset`: 文字と線の距離
これらを組み合わせるだけで、Webサイトの印象はガラッと変わります。
—
3. 実践！オシャレな装飾を作ってみよう
さっそく、エディタを開いて試してみましょう。まずは「少し太めの波線」を引くコードです。
.fancy-link {
/ 下線を引く /
text-decoration-line: underline;
/ 波線にする /
text-decoration-style: wavy;
/ 線の色を少し柔らかいグレーに /
text-decoration-color: #ff9999;
/ 線を少し太くして存在感を出す /
text-decoration-thickness: 3px;
/ 文字と線の距離を少し離して読みやすく /
text-underline-offset: 5px;
}
なぜ `text-underline-offset` が大事なのか？
初学者が意外と見落としがちなのがこの `offset` です。デフォルトのままだと、下線が文字の「g」や「j」の足に食い込んでしまい、読みづらくなることがあります。`offset` を少し調整するだけで、文字と線に「余白」が生まれ、洗練されたプロの仕上がりになりますよ。
—
4. 現場でよく使う「ショートハンド」の書き方
毎回5行も書くのは大変ですよね。CSSには、それらを一行にまとめる便利な書き方（ショートハンド）があります。
/ 順番は自由ですが、一般的に以下のように書きます /
.short-link {
text-decoration: underline wavy #ff9999 3px;
}
これだけでOKです！「もし上手くいかないな？」と思ったら、一つずつ分解して指定してみると原因が見つかりやすいですよ。焦らなくて大丈夫、一つずつ覚えていきましょう。
—
まとめ：あなたの「こだわり」を詰め込もう
「たかが下線」と思うかもしれません。でも、Webサイトの細部（ディテール）へのこだわりこそが、訪れたユーザーに「あ、このサイトは丁寧につくられているな」という信頼感を与えます。
- 強調したいなら: 少し太めの色付き下線
- 遊び心が欲しいなら: 波線や点線
- 読みやすさを優先するなら: `offset` で距離を調整
まずはご自身のポートフォリオサイトや練習用のページで、いろいろな数値をいじってみてください。「おっ、いい感じ！」と思える瞬間が、きっとあなたのデザインの引き出しを一つ増やしてくれるはずです。
もし分からないことがあれば、いつでもまた聞きに来てくださいね。あなたのWeb制作ライフを、心から応援しています！
コメント