text-decoration: ***;
ブラウザ |
|
---|---|
プロパティ |
text-decoration は、文字の装飾(下線、上線、取り消し線、点滅)を指定するプロパティです。
p {
text-decoration: underline;
}
プロパティ名 | 値 | 説明 |
---|---|---|
text-decoration |
none |
装飾なし (初期値) |
underline |
テキストに下線を引く | |
overline |
テキストに上線を引く | |
line-through |
テキストに取り消し線を引く | |
blink |
テキストを点滅させる |
blink
の指定は、IE、Safari、Chromeでは対応していません。
複数の値を同時に指定する場合は、半角スペースで区切って記述します。
text-decoration: underline overline;
参考
次のように指定すると、下線付きの文字(a要素 等)を下線なしで表示することができます。
a { text-decoration: none; }
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
p.example1 { text-decoration: underline; }
p.example2 { text-decoration: overline; }
p.example3 { text-decoration: line-through; }
p.example4 { text-decoration: blink; }
p.example5 { text-decoration: underline overline; }
</style>
</head>
<body>
<p class="example1">テキストに下線を引く</p>
<p class="example2">テキストに上線を引く</p>
<p class="example3">テキストに取り消し線を引く</p>
<p class="example4">テキストを点滅させる</p>
<p class="example5">テキストに上下線を引く</p>
</body>
</html>
- 表示例
-
テキストに下線を引く
テキストに上線を引く
テキストに取り消し線を引く
テキストを点滅させる
テキストに上下線を引く