ウェブランサー

text-decoration - テキストの下線・上線・打ち消し線・点滅の指定

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 しない

text-decorationプロパティは、テキストに下線、上線、打ち消し線、点滅の効果を与える事ができます。複数の値を指定する場合には、値を任意の順序でスペースで区切って記述してください。Internet Explorerは点滅をサポートしていません。

text-decorationに与えられる値

text-decoration: none;
何も付かない状態です。これが初期値です。
text-decoration: underline;
テキストに下線が付きます。
text-decoration: overline;
テキストに上線が付きます。
text-decoration: line-through;
テキストに打ち消し線が付きます。
text-decoration: blink;
テキストが点滅します。

text-decorationの使用サンプル

CSS
.text_sample01 {
 text-decoration: underline;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample02 {
 text-decoration: overline;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample03 {
 text-decoration: line-through;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample04 {
 text-decoration: blink;
 border: 1px solid #666666;
 padding: 5px;
 margin-bottom: 10px;
}
.text_sample05 {
 text-decoration: underline overline;
 border: 1px solid #666666;
 padding: 5px;
}
XHTML
<div class="text_sample01">
text_sample01 [text-decoration: underline;]<br />
テキスト<br />
</div>

<div class="text_sample02">
text_sample02 [text-decoration: overline;]<br />
テキスト<br />
</div>

<div class="text_sample03">
text_sample03 [text-decoration: line-through;]<br />
テキスト<br />
</div>

<div class="text_sample04">
text_sample04 [text-decoration: blink;]<br />
テキスト<br />
</div>

<div class="text_sample05">
text_sample05 [text-decoration: underline overline;]<br />
テキスト<br />
</div>
表示確認
text_sample01 [text-decoration: underline;]
テキスト
text_sample02 [text-decoration: overline;]
テキスト
text_sample03 [text-decoration: line-through;]
テキスト
text_sample04 [text-decoration: blink;]
テキスト
text_sample05 [text-decoration: underline overline;]
テキスト

text-decorationに関連するCSSプロパティ

テキスト関連
text-align 内包する要素に対して横位置の揃え方を指定する
text-align-last 内包する要素の最終行に対して横位置の揃え方を指定する
text-autospace アルファベット等との間隔を指定
text-combine-horizontal 文字を縦書き表示にした際に縦中横のレイアウトにする
text-combine-mode 縦書き表示で縦中横のレイアウトにした文字の表示方法を指定する
text-decoration 文字列に装飾線や点滅を指定する
text-decoration-color 文字の装飾線の色を指定する
text-decoration-line 文字の装飾線の位置を指定する
text-decoration-skip 文字の装飾線について除外する対象を指定する
text-decoration-style 文字の装飾線の種類を指定する
text-emphasis 要素内のテキストに付与する強調マークに関する指定を行う
text-emphasis-color 要素内のテキストに付与する強調マークの色を指定する
text-emphasis-position 要素内のテキストに付与する強調マークの位置を指定する
text-emphasis-style 要素内のテキストに強調マークを付与する
text-height テキストの高さを指定する
text-indent 文章のインデント幅を指定する
text-justify 行の両端揃えの方法を指定する
text-orientation 縦書き文章の文字の表示方向に関して指定する
text-overflow 要素からはみ出した文字を省略する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字表示・小文字表示を指定する
text-underline-position テキストのアンダーラインの位置を指定する