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

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

text-decoration ショートハンドプロパティは、
text-decoration-line
text-decoration-color
text-decoration-style

の値をまとめて指定することができます。

上記3つのプロパティの記事はこちらです。

【47-1】テキストのライン装飾の種類を決める text-decoration-line
【47-2】テキストのライン装飾の色を決める text-decoration-color
【47-3】テキストのライン装飾を波線にもできる text-decoration-style
【47-4】text-decorationショートハンドプロパティでまとめて指定 ←今日はココ

text-decorationプロパティは CSS 2まではショートハンドではありませんでした。
値は text-decoration-line の値(none、underline、overline、line-through、blink)のみ。

それが CSS 3(Text Decoration Module Level 3 )から、新しくtext-decoration-line、text-decoration-color、text-decoration-styleプロパティができて、text-decorationプロパティショートハンドプロパティになりました。

text-decorationショートハンドプロパティは、Chrome, Firefox, Opera は対応。
Safari(iOS Safari も含む)は、ベンダープレフィックス「-webkit-」付きで対応。ただし text-decoration-styleの一部の値には未対応です。

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

本日のINDEX
  1. text-decorationショートハンドのルール
    1. text-decoration は伝播し、指定は追加される
    2. CSS 2 の書き方も併用する
  2. text-decorationショートハンドの指定サンプル

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

text-decorationショートハンドのルール

どのショートハンドでも同じですが、ショートハンドで省略された値は「デフォルト値」になります。

その他の注意点は以下の2点です。

text-decoration は伝播し、指定は追加される

親要素に指定された text-decorationは、子要素のインライン要素では外すことができません。
例えば、下のようなソースコードで、

<p>アンダーライン <span>デコレーション無し</span></p>

<style>
p {text-decoration: underline;}
span {text-decoration: none;}
</style>

プレビューはこのように、<span>要素のアンダーラインは無くなりません。

アンダーライン デコレーション無し

<span>要素に新しいラインを指定すれば、

p {text-decoration: underline;}
span {text-decoration: overline;}

プレビューはこのように、<span>要素のラインが追加されます。

アンダーライン オーバーライン

CSS 2 の書き方も併用する

CSS2 での text-decorationプロパティ(ショートハンドになる前)に対応しているブラウザは、text-decoration-line の値(none、underline、overline、line-through、blink)のみが text-decorationプロパティで指定できます。

CSS 3 での書き方(複数の値を「半角スペース」で区切って指定)をすると、CSS 2 対応のブラウザでは無視されます。

ですので、下記のように text-decorationショートハンドプロパティの記述の前に、CSS 2 での text-decorationプロパティの記述もしておくのがベストな指定だそうです。

a {
    color: #0ff;
    text-decoration: underline; /*css2での指定*/
    text-decoration: red dotted underline; /*css3での新しい指定(CSS2対応ブラウザは無視)*/
}

text-decorationショートハンドの指定サンプル

ショートハンドでの指定サンプルです。

<a>要素の underline の指定

<ins>要素の underline の指定

<del>要素の line-through の指定

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

<div class="mihon">
<p><a href="#pt2" class="sample1">&lt;a&gt;要素の underline の指定</a></p>
<p><ins class="sample2">&lt;ins&gt;要素の underline の指定</ins></p>
<p><del class="sample3">&lt;del&gt;要素の line-through の指定</del></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 {
	text-decoration:underline;
	-webkit-text-decoration:underline skyblue solid;
	text-decoration:underline skyblue solid}
ins.sample2 {
	text-decoration:underline;
	-webkit-text-decoration:underline overline #b8e600 wavy;
	text-decoration:underline overline #b8e600 wavy}
del.sample3 {
	text-decoration:line-through;
	-webkit-text-decoration:line-through hsla(0,100%,45%,0.5) double;
	text-decoration:line-through hsla(0,100%,45%,0.5) double}
</style>

次回予告

テキストデコレーションに関するプロパティは、まだいくつか残っているのですが、ここで一旦区切ります。

で、次回から2回ほど HTMLの要素について書きます。
HTML5.1 から実装された <picture>要素を放置しているので、これを書きたいのですが、その前に <img>要素について まとめておきたいと思います。

次回は <img>要素について。
HTML5.1で追加された「srcset属性」を使って複数の画像ファイルを指定し、条件に合わせてブラウザに画像を選ばせることができるようになったので、とても便利です。

その後で、また CSS に戻ります。
その時はテキストデコレーション繋がりで text-decoration-skipプロパティをやる予定です。

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

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

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

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

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この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.