文字の飾りつけ 【text-decoration】
ブラウザで表示した時の見え方
文字に飾り付けしない状態「none」
文字に下線をつけた状態「underline」
文字の上に線をつけた状態「overline」
文字に取り消し線をつけた状態「line-through」
ソースサンプル
【CSS】
.none {
text-decoration: none
}
.underline {
text-decoration: underline
}
.overline {
text-decoration: overline
}
.line {
text-decoration: line-through
}
【HTML】
<p class="
none">
文字に飾り付けしない状態「none」</p>
<p class="
underline">
文字に下線をつけた状態「underline」</p>
<p class="
overline">
文字の上に線をつけた状態「overline」</p>
<p class="
line">
文字に取り消し線をつけた状態「line-through」</p>
[
黒※説明中のタグ
紫※省略可能なタグ
赤※変更可能
緑※文章など
]
解説
- underlineはIE3、NN4以上のブラウザで対応しています。（Macintosh版ではIE5以上のブラウザで対応）
- overlineはIE4、NN6以上のブラウザで対応しています。（Macintosh版のNN4には対応していません）
- line-throughはIE3、NN4以上のブラウザで対応しています。
| オプション |
| none | 文字に飾り付けしない | text-decoration: none |
| underline | 文字に下線をつける | text-decoration: underline |
| overline | 文字の上に線をつける | text-decoration: overline |
| line-through | 文字に取り消し線をつける | text-decoration: line-through |
| 値 | 機能 | 例 |
AICHAN WEB(Z)
>
HTML＆CSSサンプル集(S)
>
CSS
-
文字の飾りつけ