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

最終更新日:2019年04月12日  (初回投稿日:2019年03月09日)

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

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

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

text-decoration-lineプロパティは、Chrome, Firefox, Opera は対応。
Safari(iOS Safari も含む)は、ベンダープレフィックス「-webkit-」付きで対応。
IE, Edge は、CSS 2 での text-decorationプロパティ(ショートハンドになる前)に対応しており、text-decoration-lineプロパティには未対応です。
(参考:Can I use 2019年3月記)

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

【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プロパティを使います。これらは順次記事にします。

text-decoration-line: 指定なし( = none) text-decoration-line: underline text-decoration-line: overline text-decoration-line: line-through text-decoration-line: blink text-decoration-line: underline overline text-decoration-line: underline overline line-through

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

<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の値)」。文字色を変えればラインの色も同じになります。

text-decoration-line: underline

text-decoration-line: overline

text-decoration-line: line-through

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

ユーザーは、下線があれば「リンク(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プロパティを使おう。
このプロパティを使えば、文字と装飾ラインを違う色にできます。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2019/07 | 08
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.