【入門編】text-decorationの高度な制御 – HTML実践ガイド

CSSの `text-decoration` は、昔はただの「ONかOFFか」のスイッチのようなものでした。でも今は違います。まるで絵筆を変えるように、太さや色、さらには線のスタイルまで自由自在に操れるようになったんです。

今日は、あなたのWebサイトの「文字の足元」を洗練させる、魔法のようなプロパティたちを紹介しますね。

—

1. 「下線」の概念をアップデートしよう

これまでの下線（text-decoration: underline）は、ブラウザにお任せの「一律の線」でした。しかし、今のCSSを使えば、線を「ただの飾り」から「デザインの一部」へと昇格させることができます。

まずは、基本の4つのプロパティを覚えておきましょう。

• `text-decoration-line`: 線をどこに引くか（下線、上線、打ち消し線など）
• `text-decoration-color`: 線の色をどうするか
• `text-decoration-style`: 線の種類（一本線、点線、波線など）
• `text-decoration-thickness`: 線の太さはどれくらいか

これらを組み合わせるだけで、まるで高級な雑誌のようなタイポグラフィが作れるんですよ。

—

2. 実際に書いてみよう！

では、早速コードを見てみましょう。例えば、「リンクを目立たせたいけれど、デフォルトの青い線だと野暮ったいな」という場面を想像してください。

/ おしゃれなリンクの装飾例 /
.custom-link {
/ 1. 下線を引く設定 /
text-decoration-line: underline;

/ 2. 線の色をブランドカラーに（例：柔らかいピンク） /
text-decoration-color: #ffb7c5;

/ 3. 線のスタイルを波線に /
text-decoration-style: wavy;

/ 4. 線の太さを少し太めに /
text-decoration-thickness: 3px;

/ リンクの青い枠を消して、スッキリさせる /
text-decoration-skip-ink: auto; / 文字との重なりを調整して読みやすくする工夫 /
}

このコードを適用すると、ただのリンクだった場所が、まるで手書きのマーカーを引いたような、温かみのあるデザインに変わります。

—

3. なぜ「細部」にこだわるのか？

初学者のうちは、「動けばいいや」と思いがちですよね。それは全く正しい姿勢です！まずは動くこと。そこからがスタートです。

でも、少し慣れてくると、「なんだかプロのサイトと自分のサイト、何かが違う…」と感じる瞬間がやってきます。その「何か」の正体こそが、こうした「細部のコントロール」なんです。

• 線の太さ: 文字に対して線が太すぎると重たく見えます。逆に細すぎると頼りない。
• 線の色: 文字と全く同じ色にするか、少し薄くするか。このわずかなコントラストの差が、サイトの「品」を作ります。

「お買い物で洋服を選ぶとき、ボタンの色や糸のほつれが気になる」のと同じで、Webサイトも細かい部分に配慮が行き届いていると、ユーザーは無意識のうちに「このサイトは信頼できるな」と感じてくれるものなんです。

—

4. つまずきポイント：ショートハンドを活用しよう

プロパティを一つずつ書くのは正直面倒ですよね。実は、これらは一つにまとめることができます。

/ ショートハンド（省略記法）ならスッキリ！ /
a {
/ 下線 / スタイル / 色 / 太さ の順番で書きます /
text-decoration: underline wavy #ffb7c5 3px;
}

「あれ、順番が覚えられない！」となっても大丈夫です。最初は一つずつ丁寧に書いて、慣れてきたらこうやって短く書くスタイルに移行していけばいいんですよ。焦らず、自分のペースでいきましょう。

—

最後に：小さなこだわりを楽しんで

`text-decoration` をいじることは、自分のWebサイトという「キャンバス」に、自分だけの筆跡を残すような作業です。

「ここを波線にしたら楽しそうだな」「この文字だけは太い下線を引いて強調しようかな」——そうやって遊んでいるうちに、気づけばあなたのCSSスキルは、単なる知識から「表現力」へと進化しています。

ぜひ、今作っているページで、まずは一行、線をいじってみてください。たったそれだけで、あなたのページは世界で一つだけのデザインに変わりますから。

応援しています！何か分からなくなったら、またいつでもここを覗きに来てくださいね。