2026年4月16日
text-decorationとは？リンクの下線をカスタマイズしたいあなたへ
「リンクの下線を消したい」「下線の色や太さを変えたい」「取り消し線や波線を引きたい」——テキストの装飾に関する悩みはtext-decorationプロパティで解決できます。
この記事では、text-decorationの全プロパティを使いこなせるようになることを目指します。リンクのカスタマイズからアクセシビリティの注意点まで解説します。
基本構文：ショートハンドと個別プロパティ
ショートハンド
/* text-decoration: 線の種類 スタイル 色 太さ; */
.fancy {
text-decoration: underline wavy #0d9488 2px;
}個別プロパティ
| プロパティ | 値の例 | 説明 |
|---|---|---|
text-decoration-line | underline, line-through, overline, none | 線の種類 |
text-decoration-style | solid, dashed, dotted, wavy, double | 線のスタイル |
text-decoration-color | #0d9488, red, rgba() | 線の色 |
text-decoration-thickness | 2px, 0.1em, auto | 線の太さ |
text-underline-offset | 4px, 0.2em | 下線の位置（文字からの距離） |
/* 個別に指定する場合 */
.custom-underline {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: #0d9488;
text-decoration-thickness: 2px;
text-underline-offset: 4px; /* 文字から4px離す */
}基本の値
/* 下線 */
.underline { text-decoration: underline; }
/* 打ち消し線 */
.strike { text-decoration: line-through; }
/* 上線 */
.overline { text-decoration: overline; }
/* 装飾なし（リンクの下線を消す） */
a { text-decoration: none; }
/* 複数の線を同時に指定 */
.both { text-decoration: underline overline; }実践コード例①：リンクの下線をカスタマイズ
/* デフォルトの下線を消して、カスタム下線を適用 */
a {
color: #0d9488;
text-decoration: none;
text-decoration-line: underline;
text-decoration-color: rgba(13, 148, 136, 0.3); /* 薄い色 */
text-decoration-thickness: 2px;
text-underline-offset: 3px; /* 文字から少し離す */
transition: text-decoration-color 0.2s ease;
}
a:hover {
text-decoration-color: #0d9488; /* ホバーで濃くなる */
}text-underline-offset で下線を文字から離すと、読みやすくなります。色の指定方法はCSSで色を指定する方法で復習できます。
実践コード例②：hover時に下線が現れるナビゲーション
.nav-link {
color: #374151;
text-decoration: none;
position: relative;
}
/* 疑似要素で下線を作る（より細かい制御が可能） */
.nav-link::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #0d9488;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%; /* ホバーで下線が伸びる */
}text-decorationのtransitionは一部ブラウザで効かないことがあるため、疑似要素で下線を作るテクニックもよく使われます。hoverの詳しい使い方はCSSのhoverで動きをつける方法を参照してください。
実践コード例③：波線で強調マーカー風の装飾
/* 波線で強調 */
.highlight-wavy {
text-decoration: underline wavy #f59e0b;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* 蛍光マーカー風（背景で実現） */
.highlight-marker {
background: linear-gradient(transparent 60%, #fef08a 60%);
text-decoration: none;
}
/* 打ち消し線 + 新価格（セール表示） */
.original-price {
text-decoration: line-through;
text-decoration-color: #ef4444;
color: #9ca3af;
}
.sale-price {
color: #ef4444;
font-weight: bold;
}よくある間違い・注意点
❌ text-decoration: noneでリンク下線を消すとアクセシビリティに影響
リンクの下線を消すと、色覚に障害のあるユーザーがリンクを識別できなくなる可能性があります。下線を消す場合は、以下の代替手段を用意しましょう。
- ホバー時に下線を表示する
- 太字やアイコンでリンクだとわかるようにする
- 十分な色のコントラストを確保する
❌ 子要素に継承される挙動
text-decorationは子要素に「継承」されるように見えますが、実際には親要素の装飾が子要素の上に描画されます。子要素でtext-decoration: noneを指定しても消えないことがあります。
/* 親の下線が子要素にも表示される */
.parent {
text-decoration: underline;
}
/* NG: 子要素でnoneにしても親の下線は消えない */
.parent .child {
text-decoration: none; /* 効かない場合がある */
}
/* OK: 親要素側で制御する */
.parent a {
text-decoration: none;
display: inline-block; /* ブロック化すると親の装飾が切れる */
}text-decoration-skipの挙動
モダンブラウザでは、下線が文字の下部（g, y, pなどのディセンダー）にかからないよう自動調整されます。これはtext-decoration-skip-ink: auto（デフォルト）の挙動です。
ブラウザ対応状況
基本プロパティ（text-decoration-line, color, style）は全ブラウザ対応です。text-decoration-thickness と text-underline-offset はモダンブラウザ（Chrome・Firefox・Safari・Edge）で対応しています。
text-decorationを使うときのコツ
下線を引くときは、text-underline-offsetプロパティも一緒に使うと見やすくなります。これは下線と文字の間隔を調整するプロパティです。値を3pxや4pxにすると、文字と下線が重ならず読みやすくなります。
また、リンクの下線を消したいときはtext-decoration: none;を使います。ただし、下線を消すとリンクだと気づいてもらえないことがあります。下線を消す場合は、色を変えたり太字にしたりして、リンクだとわかる工夫をしましょう。
まとめ
- ✅
text-decorationで下線・打ち消し線・上線を追加 - ✅
text-decoration-colorで色、-styleでスタイル（wavy等）を指定 - ✅
text-decoration-thicknessで太さ、text-underline-offsetで位置を調整 - ✅ リンクの下線を消す場合はアクセシビリティの代替手段を用意
- ✅ アニメーションしたい場合は疑似要素で下線を作るテクニックも有効
text-decorationは4つのサブプロパティで細かく制御できます。フォント全体のスタイリングはCSSでフォントを変える方法で学べます。セレクタの基本はCSSセレクターの使い方を参照してください。CSSの基礎全体はCSSとは？初心者向け解説で学べます。
関連記事
- CSSでフォントを変える方法 — テキスト関連プロパティを復習
- CSSで色を指定する方法 — 装飾の色指定
- CSSのhoverで動きをつける方法 — hover時の下線演出
- CSSセレクターの使い方 — リンクセレクタの指定
- CSSトランジション入門 — 下線アニメーション