text-decoration：テキストの下線・上線・打ち消し線・点滅の指定
| 適用対象 | 全ての要素 |
| 継承 | しない |
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 | テキストのアンダーラインの位置を指定する |