最終更新日

text-decorationプロパティ

text-decorationは、文字の装飾線に関するサブプロパティの値を、まとめて記述するためのショートハンドプロパティです。

下記サブプロパティの値を、好きな順番で半角スペースで区切って記述します。

text-decoration-line:文字の装飾線の位置を指定する
text-decoration-color:文字の装飾線の色を指定する
text-decoration-style:文字の装飾線の種類を指定する

各サブプロパティの値を省略した場合は、それぞれのプロパティの初期値が設定されます。

また、ショートハンドの役割とは別に、blinkキーワードを指定して、文字を点滅させることもできます。

装飾線を引かない対象を指定したい場合は、text-decoration-skipを使用します。

CSS3での変更点
・文字の装飾線に関する値を、まとめて記述できるように拡張されました。
初期値 適用先 継承
none すべての要素 なし
CSS3の値 説明
text-decoration-lineの値 文字の装飾線の位置を指定する
text-decoration-colorの値 文字の装飾線の色を指定する
text-decoration-styleの値 文字の装飾線の種類を指定する
blink 文字を点滅させます。
none 文字の装飾線は表示されず、点滅もしません。(初期値
CSS2.1の値 説明
underline 文字の下に装飾線が付きます。
overline 文字の上に装飾線が付きます。
line-through 文字に打ち消し線が付きます。
blink 文字を点滅させます。
none 文字の装飾線は表示されず、点滅もしません。(初期値
サンプルコード
text-decoration: underline #f00 solid;
text-decoration: overline red double;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;
text-decoration: none;
参考文献:CSS Text Level 3外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。