# text-decoration

> テキストの装飾（下線、上線、取り消し線など）を指定するプロパティです。underline、overline、line-through、noneなどの値があり、リンクやテキストの強調に使用されます。色やスタイルも個別に指定可能です。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/text-decoration/

## 構文

```css
text-decoration: <text-decoration-line> <text-decoration-style> <text-decoration-color>
```

## Tailwindでは

- `underline` → text-decoration-line: underline
- `line-through` → text-decoration-line: line-through
- `no-underline` → text-decoration-line: none
- 補足: 線の色・太さ・スタイルは decoration-{color} / decoration-2 / decoration-wavy。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 下線を追加

```css
text-decoration: underline;
```

### 例2: 赤い取り消し線

```css
text-decoration: line-through red;
```

### 例3: 青い波線の下線

```css
text-decoration: underline wavy blue;
```

## TIPS

リンクのスタイリングでよく使用。noneでデフォルトの下線を削除。

## AIがよく間違えるポイント

AIは下線のカスタマイズにborder-bottomを使いがちですが、現在はtext-decoration-color / -thickness / text-underline-offsetで下線自体を細かく制御できます（複数行でも正しく機能するのが利点）。リンクの下線を消すだけの提案（アクセシビリティ低下）にも注意が必要です。

## AIへの依頼文例

- リンクの下線を消さずに、色を薄く・少し下にオフセットして上品にして。border-bottomではなくtext-decoration系で