【CSS】下線＋装飾でデザインに差をつけるtext-decoration

はじめに

こんにちは！株式会社TOKOSのユウマです！

Webサイト制作の際、線を引くとなったらborderプロパティを思い浮かべる方が多いと思います。
今回はborderプロパティ以外に線を引く方法、text-decorationプロパティをご紹介します。
CSSのtext-decorationプロパティは「下線を引くだけ」ではありません！
線の色・太さ・位置・スタイルを自由に変えることで、リンクや見出しをデザインの一部として演出できます。

この記事では、text-decorationの基本から、実務でも役立つ応用テクニックまでをわかりやすく紹介します。
初心者の方でも、「見た目がちょっと垢抜ける下線」が作れるようになりますよ！

borderプロパティ以外に線を引く方法"text-decoration"とは？

p {
  text-decoration: underline;
}

上記のように指定すると、テキスト全体に下線が引かれます。

指定できる主な値は以下のとおりです。

none

装飾なし

underline

下線を引く

overline

上線を引く

line-through

取り消し線を引く

underline overline

複数の線を組み合わせる

text-decorationプロパティの構成・値の意味

text-decorationは1つのプロパティでも指定できますが、細かくカスタマイズする場合は以下のサブプロパティを使います。

text-decoration-line: underline;
text-decoration-color: #ff6b6b;
text-decoration-style: wavy;
text-decoration-thickness: 2px;
text-underline-offset: 3px;

主なサブプロパティ一覧

text-decoration-line

役割：線の位置（下線・上線・取り消し線）を指定
例：underline

text-decoration-color

役割：線の色を指定
例：#000000

text-decoration-style

役割：線のスタイル（実線・点線・波線など）
例：wavy

text-decoration-thickness

役割：線の太さを指定
例：◯px

text-underline-offset

役割：線と文字の間隔を調整
例：◯px

これらを組み合わせることで、「読みやすさ」＋「デザイン性」を両立したテキスト装飾ができます。

実際に装飾してみよう！基本例

まずは基本的な下線の指定です。

<p class="underline">これは下線付きのテキストです。</p>

.underline {
  text-decoration: underline;
}

次に、色やスタイルを追加してみます。

.underline {
  text-decoration-line: underline;
  text-decoration-color: #3498db;
  text-decoration-style: dotted;
}

結果：青い点線の下線が表示されます。
リンクや見出しの装飾としても使えますね。

デザイン性を高める応用テクニック

text-decorationは、少し工夫するだけで印象が大きく変わります。
ここでは実務でよく使われる応用テクを紹介します。

下線の位置を調整して、すっきり見せる

.text {
  text-decoration: underline;
  text-underline-offset: 4px;
}

下線が文字に近すぎると読みにくいですが、少し離すとデザインが整って見えます。

太めの下線で強調する

.title {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

線を太くするだけで、強調感のある見出しに。
細かい余白や太さの調整で印象がぐっと変わります。

hover時に色と線を変える

a {
  text-decoration: none;
  color: #333;
}
 
a:hover {
  text-decoration: underline;
  text-decoration-color: #ff6b6b;
  text-underline-offset: 4px;
}

ホバーした瞬間に柔らかく色が変わるリンク。
シンプルなのに動きがある印象を作れます。

wavy（波線）で遊び心をプラス

.wavy {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #e67e22;
}

最近ではデザインカンプでもよく見られる「波線強調」。
注意書きや強調文に使うと親しみやすい印象に。

よくある疑問・解決策

下線が文字に重なって見づらい

解決策：text-underline-offsetで間隔を調整

太さが変わらない

解決策：text-decoration-thicknessにpx指定を

border-bottomとの違いは？

違い：text-decorationは文字単位、border-bottomは要素全体に線を引く

text-decorationはテキストそのものの装飾。
→ リンクやキーワード強調などに最適。

borderはボックス（要素）全体の装飾。
→ 見出し・ボタン・デザイン下線に適している。

ユウマ

text-decoration、borderプロパティを使い分けて、デザインに合った線を実装しましょう✨️

おわりに

text-decorationは、ただの装飾ではなく「テキストの表現力」を高めるCSSプロパティです。

色・太さ・位置を少し工夫するだけで、サイト全体の印象が変わります。

「リンクに下線を引く」だけで終わらせず、「見た目も含めた設計」に意識を向けることで、一歩先のコーディングを目指してみましょう。