ISSEN 
はじめに
こんにちは！株式会社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プロパティです。
色・太さ・位置を少し工夫するだけで、サイト全体の印象が変わります。
「リンクに下線を引く」だけで終わらせず、
“見た目も含めた設計” に意識を向けることで、一歩先のコーディングを目指してみましょう。
スポンサーリンク
