ほんっとにはじめての HTML5 と CSS3

CSS2までは text-decorationプロパティで、テキストの装飾の種類を指定しました。
テキストの装飾（text-decoration）と言っても「下線」「上線」「取り消し線」のラインだけですけどね。

CSS3（CSS Text Decoration Module Level 3 | W3C 勧告候補）からは、ライン装飾の「色」と「スタイル」も指定できるようになり、
text-decoration-lineプロパティ（ラインの種類）
text-decoration-colorプロパティ（ラインの色）
text-decoration-styleプロパティ（ラインのスタイル。破線とか波線とか）
と分けられました。
で、text-decorationプロパティは、それらをまとめて指定するショートハンドプロパティになりました。

今回はtext-decoration-lineプロパティを使ってみます。
これは、そのまんま「テキストをデコレーションするラインの種類」を指定します。
ラインの種類は「下線」「上線」「取り消し線」があります。

今回は記事を下記のように分けて進めます。

【47-1】テキストのライン装飾の種類を決める text-decoration-line　←今日はココ

【47-2】テキストのライン装飾の色を決める text-decoration-color

【47-3】テキストのライン装飾を波線にもできる text-decoration-style

【47-4】text-decorationショートハンドプロパティでまとめて指定

参考：
・CSS Text Decoration Module Level 3 | W3C Candidate Recommendation
・text-decoration-line - CSS | MDN

text-decoration-lineプロパティの値

text-decoration-lineプロパティの値は以下のものがあります。

text-decoration-lineプロパティの値
キーワード	noneがデフォルト値。 underline、overline、line-through、blink
グローバル値	text-decoration-line: inherit; 親の値を継承（コレ書かなくても継承するけど） text-decoration-line: initial; 継承した親の値を解消しデフォルト値に戻す text-decoration-line: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	しない ただし「継承」ではなく ボックスツリーによる 「伝播（propagated）」はします。 親要素に指定すれば、子要素にも装飾は付きます。	適用できる要素	すべての要素

それぞれのキーワードは、以下の意味があります。
「none」以外の値は、何個でも「半角スペース」で区切って並べて指定することが可能です。

none

テキストにライン装飾を付けません。

underline

テキストに下線（アンダーライン）を付けます

overline

テキストに上線（オーバーライン）を付けます

line-through

テキストの真ん中に線（ライン・スルー 取り消し線みたいなやつ）を付けます

blink

テキストを点滅させます。
CSS1時代からあった値ですが、この値は現在は非推奨で、たいていのブラウザに無視されます。
animationプロパティ（CSS Animations Level 1）を使うことが推奨されています。

text-decoration-lineプロパティの指定サンプル

text-decoration-lineプロパティの値を使ってみます。

ラインの色はデフォルト色（文字色（currentColor = colorプロパティの値）になります。
スタイルはデフォルトの「実線（solid）」です。

ラインの色を変えるときは text-decoration-colorプロパティを、スタイルを変えるには text-decoration-styleプロパティを使います。これらは順次記事にします。

サンプルのソースコードはこちら。

<div class="mihon">
<span>text-decoration-line: 指定なし（ = none）</span>
<span class="sample1">text-decoration-line: underline</span>
<span class="sample2">text-decoration-line: overline</span>
<span class="sample3">text-decoration-line: line-through</span>
<span class="sample4">text-decoration-line: blink</span>
<span class="sample5">text-decoration-line: underline overline</span>
<span class="sample6">text-decoration-line: underline overline line-through</span>
</div>

<style>
.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em 1.4em}
.mihon span {
	display:block;
	font-size:1rem;
	line-height:2.8;
	margin:0}
.sample1 {
	-webkit-text-decoration-line:underline; /*Safari用に-webkit-*/
	text-decoration-line:underline}
.sample2 {
	-webkit-text-decoration-line:overline;
	text-decoration-line:overline}
.sample3 {
	-webkit-text-decoration-line:line-through;
	text-decoration-line:line-through}
.sample4 {
	-webkit-text-decoration-line:blink;
	text-decoration-line:blink}
.sample5 {
	-webkit-text-decoration-line:underline overline;
	text-decoration-line:underline overline}
.sample6 {
	-webkit-text-decoration-line:underline overline line-through;
	text-decoration-line:underline overline line-through}
</style>

none以外の値は、何個でも同時に指定できるので、上線と下線（.sample5）や、上線と下線と取り消し線（.sample6）なんて指定もできます（あんまり使わないだろうけどねw）

ラインの色のデフォルトは「文字色（colorの値）」。文字色を変えればラインの色も同じになります。

ラインの種類は無闇に変えないほうがイイかなぁ

ユーザーは、下線があれば「リンク（a要素）」や「追加事項（ins要素）」かなと思うし、取り消し線だと「削除された内容（del要素）」だと思います。それで見慣れちゃってるので。

HTMLには、関係ない要素を使わずに 意味のある要素を使うというルールがあります。
ですので、本文のテキストにライン装飾を付けたいときは、ふさわしい要素があるなら そっちを優先して使うべきです。
<p>要素や <span>要素とかに text-decoration-lineプロパティでライン装飾を付けるのは、ユーザーにとって紛らわしいかもしれない場合は避けるべき。

じゃあ「text-decoration-lineプロパティはどこで使うんだ？」ってことですが、
ラインが邪魔なときに「取る（none）」のにはとっても重宝します。

例えばサイトタイトルのテキストに<a>要素でリンクを貼った場合、 <h1>要素でフォントサイズをデカくすれば下線も極太。デフォルトのままだとマウスオーバーした時にぶっとい下線が出ます。
そんな時は text-decoration: none で 下線を非表示にすればスッキリ。

また、追加事項を <ins>要素で囲んだ時、テキストが何行もあると下線がうるさいので text-decoration: none を指定して下線を非表示にする手もあります。
（text-decoration-colorプロパティで下線だけ薄い色にする手もあります）

次回予告

次回は、ライン装飾の「色」を決める text-decoration-colorプロパティを使おう。
このプロパティを使えば、文字と装飾ラインを違う色にできます。

関連記事

• 【50-1】テキストの強調マークの種類を決める text-emphasis-style
• 【49】アンダーラインの位置を決める text-underline-position
• 【48-2】ライン装飾が文字を横切るかを決める text-decoration-skip-ink
• 【48-1】ライン装飾をしない対象を決める text-decoration-skip
• 【47-4】text-decorationショートハンドプロパティでまとめて指定
• 【47-3】テキストのライン装飾を波線にもできる text-decoration-style
• 【47-2】テキストのライン装飾の色を決める text-decoration-color
• 【47-1】テキストのライン装飾の種類を決める text-decoration-line
• 【46】テキストの方向性を操作する unicode-bidi と direction
• （ちょっとメモ）縦書きでの字下げ・下線・リストなどを試してみた
• 【45-3】縦書きで「縦中横」ができる text-combine-upright
• 【45-2】縦書きでの文字の向きを決める text-orientation
• 【45-1】日本語の縦書きもできちゃう writing-modeプロパティ
• 【44】タブ文字の幅を決める tab-sizeプロパティ
• 【43】テキストを大文字・小文字に変換する text-transform