CSS text-decorationでテキスト表現を豊かにする基本と応用

Webサイトのデザインにおいて、テキストの装飾はユーザーの視線を誘導し、コンテンツの可読性を高める重要な要素です。特にリンクの下線や特定の単語の強調は、サイト全体の印象を大きく左右します。

多くのWeb制作者が、次のような課題に直面します。

• テキストの下線の色や太さを、デザインに合わせて変更したい
• リンクにデフォルトで付く下線を消して、スッキリ見せたい
• マウスホバー時だけ、デザイン性の高い下線を表示させたい
• 打ち消し線を使い、更新前の情報や完了タスクを示したい

これらの課題は、CSSのtext-decorationプロパティで解決できます。このプロパティは単に下線を引くだけでなく、多彩なテキスト表現を可能にする奥深い機能を備えています。

この記事では、text-decorationの基本から関連プロパティを組み合わせた応用テクニックまで、豊富なコード例と共に解説します。

• 基本の装飾: 下線(underline)、上線(overline)、打ち消し線(line-through)の使い方
• 線の個別指定: 線の種類(text-decoration-style)、色(text-decoration-color)、太さ(text-decoration-thickness)の設定方法
• 実践テクニック:
  • リンク下線の表示・非表示制御
  • ホバーエフェクトと組み合わせたインタラクティブな下線
  • テキストと下線の間にスペースを設ける方法
  • 波線や二重線など、デザイン性の高い線の活用

この記事を読めば、text-decorationを自在に操り、Webサイトのテキスト表現を格段に向上させるスキルが身につきます。

text-decorationの基本：4つの個別プロパティを理解する

text-decorationは、テキストに装飾線を加えるためのプロパティですが、実際には4つの個別プロパティをまとめて指定できる「ショートハンドプロパティ」です。この仕組みの理解が、text-decorationを使いこなす第一歩となります。

まず、装飾線を構成する4つの個別プロパティを一つずつ見ていきましょう。

1. 線の種類を指定する text-decoration-line

テキストのどの位置に線を引くかを指定する、最も基本的なプロパティです。

• underline: テキストの下に線を引きます（下線）。
• overline: テキストの上に線を引きます（上線）。
• line-through: テキストの中央を貫く線を引きます（取り消し線）。
• none: 線を表示しません。リンクのデフォルト下線を消す際によく使われます。

これらの値は、スペースで区切って複数指定も可能です。

/* 下線を引く */
.sample1 {
  text-decoration-line: underline;
}

/* 下線と上線を同時に引く */
.sample2 {
  text-decoration-line: underline overline;
}

2. 線の色を指定する text-decoration-color

装飾線の色を指定します。テキストの色とは独立して設定できるため、デザインのアクセントとして効果的です。colorプロパティと同様に、キーワード（red）、16進数（#ff0000）、rgb()など、CSSで利用できるすべての形式が使えます。

/* 線を赤色にする */
.sample {
  text-decoration-line: underline;
  text-decoration-color: red;
}

3. 線のスタイルを指定する text-decoration-style

線の見た目を変更します。デフォルトはsolid（実線）ですが、他にも様々なスタイルが用意されています。

• solid: 実線（デフォルト）
• double: 二重線
• dotted: 点線
• dashed: 破線
• wavy: 波線

/* 波線の下線を引く */
.sample {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

4. 線の太さを指定する text-decoration-thickness

装飾線の太さを指定します。auto（ブラウザのデフォルト）やfrom-font（フォントの推奨値）のほか、pxやemなどの単位で自由に調整できます。

/* 3pxの太さの下線を引く */
.sample {
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
}

ショートハンド記法でまとめて指定

これら4つのプロパティは、text-decorationを使って一行でまとめて記述できます。値をスペースで区切って記述するだけで、CSSが自動的にどのプロパティに対応するかを解釈してくれます。

/* 個別に指定した場合 */
.individual {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: blue;
  text-decoration-thickness: 2px;
}

/* ショートハンドでまとめて指定した場合 */
.shorthand {
  text-decoration: underline wavy blue 2px;
}

ショートハンド記法を使えば、コードが簡潔になり可読性が向上します。まずは4つの個別プロパティの役割を覚え、ショートハンドでの効率的な記述に慣れていきましょう。

コピペで使える！text-decorationの応用デザインサンプル

基本をマスターしたら、より実践的でおしゃれなデザインテクニックに挑戦しましょう。text-decorationは、プロパティを組み合わせることで多彩な表現が可能です。ここでは、コピペしてすぐに使える応用的なコードサンプルを紹介します。

1. マウスホバーで下線を表示するインタラクション

リンクなどで頻繁に利用される、マウスカーソルを乗せたとき（ホバー）に下線を表示させるデザインです。クリック可能な要素だと直感的に伝え、インタラクティブな印象を与えます。CSSの疑似クラス:hoverで簡単に実装できます。

通常時のリンク（aタグ）にはtext-decoration: none;を指定して下線を消し、:hover時にtext-decoration: underline;を適用します。transitionプロパティを追加すると、下線が滑らかに表示され、より洗練されたユーザー体験を提供できます。

<a href="#" class="hover-link">マウスを乗せると下線が表示されます</a>

.hover-link {
  color: #007bff;
  text-decoration: none; /* 通常時は下線を非表示 */
  transition: text-decoration 0.3s; /* アニメーションが不要な場合は削除 */
}

.hover-link:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

2. text-underline-offsetで下線とテキストの距離を調整

text-decorationで引いた下線がテキストに近すぎると感じるときは、text-underline-offsetプロパティを使います。このプロパティは、テキストと下線の間の余白（オフセット）を調整し、デザインの細かなニュアンスを表現するのに役立ちます。

pxやemなどの単位で値を指定するだけで簡単に距離を調整でき、可読性が向上し、よりゆとりのある上品なデザインが実現します。

.offset-underline {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px; /* テキストと下線の間に5pxの余白を作成 */
}

3. <span>タグで一部分だけを装飾する

文章全体ではなく、特定のキーワードだけを強調したい場合は、HTMLの<span>タグとCSSを組み合わせることで、一部分だけにtext-decorationを適用できます。

装飾したい部分を<span>タグで囲んでクラス名を付け、そのクラスに対してCSSを指定します。このテクニックを使えば、波線で重要な単語をマークするなど、表現の幅が大きく広がります。

<p>この文章の<span class="wavy-highlight">重要な部分</span>だけを波線で強調します。</p>

.wavy-highlight {
  text-decoration: underline wavy red 2px;
}

text-decorationを使いこなし、Webデザインの質を高める

この記事では、CSSのtext-decorationプロパティについて、基本から応用までを解説しました。単に下線を引くだけの機能と思われがちですが、各プロパティを理解し組み合わせることで、Webサイトの雰囲気やユーザビリティを大きく向上させることができます。

text-decorationでできることのまとめ

text-decorationは、複数のプロパティを組み合わせることで多彩な表現を可能にします。基本となる4つの構成プロパティをしっかり押さえましょう。

• 線の種類 (text-decoration-line): underline（下線）のほか、overline（上線）、line-through（取り消し線）を指定可能。
• 線のスタイル (text-decoration-style): solid（実線）以外にwavy（波線）、dotted（点線）などがあり、デザインのアクセントになる。
• 線の色 (text-decoration-color): テキスト本体と異なる色を線に指定し、視覚的なコントラストを生み出す。
• 線の太さ (text-decoration-thickness): pxやemで太さを細かく調整し、デザインのバランスを整える。

これらのプロパティに加え、text-underline-offsetで余白を調整したり、<span>タグで部分的に装飾したりといった応用テクニックを駆使すれば、細部にまでこだわったプロフェッショナルな仕上がりを実現できます。

さらなる表現力を求めて：他のCSSとの連携

text-decorationの基本をマスターしたら、他のCSSプロパティと組み合わせて、よりインタラクティブで独創的な表現に挑戦しましょう。

例えば、a:hover疑似クラスとtransitionプロパティを組み合わせれば、下線が滑らかに表示されたり、色や太さが変化したりするアニメーションを実装できます。こうした細やかな演出は、ユーザーに心地よい操作感を与えます。

また、text-shadowプロパティと組み合わせれば、テキストに立体感が生まれ、装飾されたテキストをさらに際立たせることも可能です。text-decorationで引いた線自体に影は付きませんが、テキスト本体に影を落とすことで、視覚的な深みを演出できます。

これらの知識を土台として、実際に手を動かし、さまざまな組み合わせを試すことがスキルアップにつながります。

text-decorationの実践的な注意点とQ&A

text-decorationをより深く、そして安全に使いこなすために、実践で役立つ注意点やよくある疑問への回答をまとめます。

知っておきたい注意点とアクセシビリティ

デザインの自由度を高めるtext-decorationですが、使い方を誤るとユーザーの利便性を損なう可能性があります。特にアクセシビリティの観点から、以下の点には注意が必要です。

• リンクの下線を安易に消さない Web上では「青いテキストと下線」がリンクの共通認識です。text-decoration: none;で下線を消すデザインはスタイリッシュですが、ユーザーがリンクの場所を一目で判断しにくくなります。下線を消す場合は、色や太さで周囲のテキストと明確に区別するなど、誰もがクリックできると認識できる代替手段を用意しましょう。

• 下線とリンクの誤認を避ける ユーザーは下線のあるテキストを「クリックできるリンク」と認識しがちです。そのため、リンクではないテキストの強調目的で安易に下線(underline)を用いると、クリックできないことにストレスを与えてしまう可能性があります。テキストの強調にはfont-weight: bold;（太字）や、<em>、<strong>タグの使用が適切です。

• 取り消し線の使い方 line-through（取り消し線）は価格の訂正やタスク完了を示す際に有効です。しかし、スクリーンリーダーによっては取り消し線を読み上げない場合があります。文脈上、取り消されていることが重要な意味を持つ場合は、視覚的な表現だけに頼らず、<del>タグを使用したり、テキストで補足したりする配慮が求められます。

よくある質問（Q&A）

Q1. text-decorationが効かないのはなぜ？ A. 最も多い原因はCSSの「詳細度」の問題です。より具体的なセレクタや後から読み込まれたスタイルで上書きされている可能性があります。ブラウザの開発者ツールで、対象要素にどのスタイルが適用されているかを確認してください。リセットCSSの影響も考えられます。!importantで強制適用もできますが、多用は管理を困難にするため最終手段としましょう。

Q2. テキストと下線の間のスペースを調整したい A. text-underline-offsetプロパティを使用します。このプロパティで、テキストと下線の間の余白をpxやemなどの単位で自由に調整できます。テキストが密集している箇所で下線が読みにくさを生む場合に活用すると、可読性が向上します。

a {
  text-decoration: underline;
  text-underline-offset: 4px; /* テキストと下線の間に4pxの余白を設定 */
}

Q3. text-decorationで引いた線の色やスタイルだけを変えたい A. text-decoration-colorで線の色、text-decoration-styleで線のスタイル（実線、波線、点線など）を個別に変更できます。

p.wavy-line {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

border-bottomによる下線の代替

text-decorationは手軽ですが、線の位置調整には限界があります。よりデザイン性の高い下線を引きたい場合、border-bottomプロパティが有効な代替手段となります。

border-bottomには以下のメリットがあります。

• padding-bottomと組み合わせ、テキストと線の間の距離を自由に調整できる。
• border-styleで点線や破線をより細かく表現できる。

一方で、border-bottomは要素のボックス全体に線が引かれるため、複数行にわたるテキストの場合、ブロックの最下部にのみ線が表示されます。行ごとに線を引きたい場合は、対象のテキストを<span>タグで囲むなどの工夫が必要です。表現したいデザインに応じてtext-decorationと使い分けましょう。