text-decoration:文字の装飾線に関する値を一括で指定する

初期値 各プロパティの初期値
適用対象 全ての要素、::first-letterおよび::first-line
継承 しない
アニメーション 各プロパティの値に基づく
対応ブラウザ caniuseで確認

text-decorationプロパティの説明

text-decorationは、文字の装飾線に関する値を一括で指定します。本プロパティは装飾線の色、種類、形状、太さをまとめて操作するショートハンド・プロパティです。

文字に対する装飾線の値を個別に指定する場合は、以下のプロパティを使用して下さい。

text-decorationに指定できる値

text-decoration-color
text-decoration-colorに該当する値です。文字に対する装飾線の色を指定します。
text-decoration-line
text-decoration-lineに該当する値です。文字に対する装飾線の種類を指定します。
text-decoration-style
text-decoration-styleに該当する値です。文字に対する装飾線の形状を指定します。
text-decoration-thickness
text-decoration-thicknessに該当する値です。文字に対する装飾線の太さを指定します。

text-decorationの使い方とサンプル

text-decorationプロパティの構文は以下の通りです。

CSS
/* line */
text-decoration: none;
text-decoration: underline;
text-decoration: overline line-through;

/* line | color */
text-decoration: underline black;
text-decoration: line-through #f00;

/* line | style | color */
text-decoration: underline dashed gray;
text-decoration: line-through wavy #f00;

/* line | style | color | thickness */
text-decoration: underline dashed gray 1px;
text-decoration: line-through wavy #f00 0.5rem;

/* グローバル値 */
text-decoration: inherit;
text-decoration: initial;
text-decoration: revert;
text-decoration: revert-layer;
text-decoration: unset;

text-decorationの実例

それでは実際にtext-decorationプロパティの書き方を見ていきましょう。以下の例は、文字に装飾線を加えた表現の比較です。一般的なアンダーラインから、強調を示す波線、打ち消し線などの実用的なものまで、様々な視覚効果を加えることができます。

打ち消し線に削除や訂正の意味を持たせる場合は、HTMLの<del><s>を使用しましょう。アンダーラインや波線による強調に意味を持たせるには、<u><i>で囲いスタイルを指定すると良いでしょう。

表示確認
CSS
.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box > section {
	overflow: auto;
	margin: 1rem 0 0;
	padding: 0 1rem 1rem;
	background: #fff;
	resize: horizontal;
}
section > h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
section > p {
	margin: .5rem 0 0;
}
.td_1 > p {
	text-decoration: underline;
}
.td_2 > p {
	text-decoration: underline wavy blue;
}
.td_3 > p {
	text-decoration: line-through double #f00;
}
.td_4 > p {
	text-decoration: underline overline rgba(0, 0, 0, 0.5);
}
.td_5 > p {
	text-decoration: underline solid pink 5px;
}
HTML
<div class="samp_box">
	<section class="td_1">
		<h2>text-decoration: underline;</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
	<section class="td_2">
		<h2>text-decoration: underline wavy blue;</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
	<section class="td_3">
		<h2>text-decoration: line-through double #f00;</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
	<section class="td_4">
		<h2>text-decoration: underline overline rgba(0, 0, 0, 0.5);</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
	<section class="td_5">
		<h2>text-decoration: underline solid pink 5px;</h2>
		<p>abcdefg hijklmn opqrstu vwxyz.</p>
	</section>
</div>

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

テキスト関連
text-align ボックスに含まれる内容の横位置の揃え方を指定する
text-align-last ボックスに含まれる内容の最後の行を揃える位置を指定する
text-combine-upright 一文字分の空間に挿入する文字の組み合わせを指定する
text-decoration 文字の装飾線に関する値を一括で指定する
text-decoration-color 文字に加えられた装飾線の色を指定する
text-decoration-line 文字に加えられた装飾線の種類を指定する
text-decoration-skip-ink 装飾線が文字を通過する祭の処理を指定する
text-decoration-style 文字に加えられた装飾線の形状を指定する
text-decoration-thickness 文字に加えられた装飾線の太さを指定する
text-emphasis テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
text-emphasis-color テキストに付加する圏点、傍点、脇点の色を指定する
text-emphasis-position テキストに付加する圏点、傍点、脇点の位置を指定する
text-emphasis-style テキストに付加する圏点、傍点、脇点の記号を指定する
text-indent テキストの一行目に挿入するインデントの幅を指定する
text-justify テキストの行端揃えに対して均等割り付けの方法を指定する
text-orientation 縦書きモードの文字の向きを指定する
text-overflow 行からテキストが溢れている状態の表現方法を指定する
text-shadow 文字に影(ドロップシャドウ)を付ける
text-transform テキストの大文字・小文字の表記を指定する
text-underline-position 文字の下に引かれる装飾線の位置を指定する