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

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

text-decoration-styleプロパティは、そのまんま「テキストをデコレーションするためのラインのスタイル」を指定します。

ブラウザデフォルトでは、テキストのライン装飾の「スタイル」は 実線(solid) です。これを 波線(wavy) やら 点線(dotted) に変えたりできるってやつです。

text-decoration-styleプロパティは、Chrome, Firefox, Opera は対応。
Safari(iOS Safari も含む)は一部の値に未対応。そしてベンダープレフィックス「-webkit-」が必要です。

IE, Edge は、CSS2 の text-decorationプロパティ(ショートハンドになる前)に対応しており、text-decoration-styleには未対応です。
(参考:Can I use 2019年3月記)

テキストデコレーション関連のプロパティtext-decoration ショートハンドプロパティでまとめて指定することができます。今回も含めてテキスト デコレーション関連のプロパティの記事が続き、最後にショートハンドでの書き方をまとめます。

【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-style - CSS | MDN

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

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

text-decoration-styleプロパティの値
キーワード solidがデフォルト値。
double、dotted、dashed、wavy
グローバル値 text-decoration-style: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-decoration-style: initial; 継承した親の値を解消しデフォルト値に戻す
text-decoration-style: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない
ただし「継承」ではなく ボックスツリーによる 「伝播(propagated)」はします。
親要素に指定すれば、子要素にも装飾は付きます。
適用できる要素 すべての要素

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

text-decoration-styleプロパティの値「solid、double、dotted、dashed、wavy」を使ってみます。
最初のほうにも書いたけど、IE, Edge, Safari 以外のブラウザで見てみてください。

<a>要素のブラウザデフォルトスタイル

<a>要素の underline のスタイル変更(double)

<ins>要素のブラウザデフォルトスタイル

<ins>要素の underline のスタイル変更(wavy)

<del>要素のブラウザデフォルトスタイル

<del>要素の line-through のスタイル変更(dashed)

<s>要素のブラウザデフォルトスタイル

<s>要素の line-through のスタイル変更(dotted)

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

<div class="mihon">
<p><a href="#pt2">&lt;a&gt;要素のブラウザデフォルトスタイル</a></p>
<p><a href="#pt2" class="sample1">&lt;a&gt;要素の underline のスタイル変更(double)</a></p>
<p><ins>&lt;ins&gt;要素のブラウザデフォルトスタイル</ins></p>
<p><ins class="sample2">&lt;ins&gt;要素の underline のスタイル変更(wavy)</ins></p>
<p><del>&lt;del&gt;要素のブラウザデフォルトスタイル</del></p>
<p><del class="sample3">&lt;del&gt;要素の line-through のスタイル変更(dashed)</del></p>
<p><s>&lt;s&gt;要素のブラウザデフォルトスタイル</s></p>
<p><s class="sample4">&lt;s&gt;要素の line-through のスタイル変更(dotted)</s></p>
</div>

<style>
.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em 1.4em;
	}
.mihon p {
	font-size:1rem;
	line-height:2.8;
	margin:0}
a.sample1 {
	-webkit-text-decoration-style:double;
	text-decoration-style:double}
ins.sample2 {
	-webkit-text-decoration-style:wavy;
	text-decoration-style:wavy}
del.sample3 {
	-webkit-text-decoration-style:dashed;
	text-decoration-style:dashed}
s.sample4 {
	-webkit-text-decoration-style:dotted;
	text-decoration-style:dotted}
</style>

ベンダープレフィックス「-webkit-」を付けた text-decoration-style の指定もしています。(24,27,30,33行目)
Safari はdouble(二重線)や wavy(波線)は「-webkit-」を付けることで反応するようです。dashed(破線)dotted(点線)はダメみたい。
Safari では、対応できない値は デフォルトの実線で表示されます。

IE, Edge は CSS2 での text-decorationプロパティ(ショートハンドになる前)にのみ反応します。
ですので、未対応のブラウザには実線とデフォルトカラーでライン装飾を表示できるように指定を工夫する必要があります。
その書き方は次回の text-decorationショートハンドプロパティでまとめます。

次回予告

ということで次回は ショートハンドプロパティになった text-decoration を使って、これまでの「line」「color」「style」の値をまとめて指定しましょう。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
08 | 2019/09 | 10
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 - - - - -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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