【48-1】ライン装飾をしない対象を決める text-decoration-skip

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

text-decoration-skipプロパティは、text-decoration で付く装飾ラインの「スキップする(ラインを引かない)」対象を指定します。

text-decoration-skipプロパティは、Text Decoration Module Level 3 勧告候補で一度は仕様に登場しましたが、Level 4 に先送りされました。
Text Decoration Module Level 3 は現時点では勧告候補、Level 4 は初回の草案(First Public Working Draft)です。
というわけでtext-decoration-skipプロパティは、ブラウザでの実装も部分的だったり、勧告までに仕様が変わる可能性大ですが、一応書いておきます。(2019年7月記)

参考:
Text Decoration Module Level 4 | W3C First Public Working Draft
text-decoration-skip - CSS | MDN

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

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

text-decoration-skipプロパティの値
キーワード objectsがデフォルト値。
none、spaces、leading-spaces、trailing-spaces、edges、box-decoration
(この他 ink という値も Level 3 の時にあったのですが、これは Level 4 で text-decoration-skip-inkプロパティになるんだそうです)
グローバル値 text-decoration-skip: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-decoration-skip: initial; 継承した親の値を解消しデフォルト値に戻す
text-decoration-skip: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 する 適用できる要素 すべての要素

それぞれのキーワードは、以下の意味があります。

objects
デフォルト値です。
画像やインラインブロックには、そのマージンボックスも含めて ライン装飾がスキップされます。
none
ライン装飾は何もスキップしません(切れ目なくラインが付く)
spaces
空白(spaces)にライン装飾が付きません。
「半角スペース」「タブ文字」や、letter-spacing・word-spacingプロパティでできた空白も含まれます。
leading-spaces
先頭の空白(spaces)にライン装飾が付きません。(空白については spaces と同じ)
trailing-spaces
末尾の空白(spaces)にライン装飾が付きません。(空白については spaces と同じ)
edges
ライン装飾の開始と終了が、対象のエッジからわずかに内側になります。
これは、2つ並んだ別の下線がくっつかないように表示できます。(中国語だとくっつかないのが大事なんだって)
box-decoration
ボックスのマージン・ボーダー・パディング領域のライン装飾をスキップします。

複数の値を指定できます

値の構文はこうなっています。
none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

[ ] は「ひとまとまり」の意味。
|| は「少なくとも1つ、複数可、順不同」の意味。
| は「どっちか1つだけ」の意味。
(構文の読み方について詳しくはこちら→ 値の定義構文 - CSS | MDN

ということで、noneは1個しか書けません。
leading-spaces と trailing-spaces は両方書いてもいいけど、spaces と一緒に使えないということですね。
値を複数書く場合は、いつもの通り「半角スペース」区切りで並べます。

こんなかんじです↓

text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: objects spaces;  /*順不同*/
text-decoration-skip: objects leading-spaces trailing-spaces;  /*順不同*/
text-decoration-skip: objects edges;  /*順不同*/
text-decoration-skip: objects leading-spaces edges box-decoration;  /*順不同*/

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

text-decoration-skipプロパティの値を指定してみます。
<ins>要素で試しています。

今のところ表示するブラウザはあんまり無くて、Chrome と Opera が「objects」の値に反応します。「objects」はインラインブロックなどのマージンボックスごとラインがスキップされます。
(Chrome と Opera は、ほかに「ink」という値にも反応しますが、この値は text-decoration-skip-inkプロパティの値になる予定なので、ここでは省略しています)
(参考:Can I use 2019年7月記)

text-decoration-skip: 未指定(= objects)  先頭にスペース  途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース 

text-decoration-skip: none  先頭にスペース 途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース 

text-decoration-skip: spaces  先頭にスペース 途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース 

text-decoration-skip: leading-spaces  先頭にスペース 途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース 

text-decoration-skip: trailing-spaces  先頭にスペース 途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース 

text-decoration-skip: edges  先頭にスペース 途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース 

text-decoration-skip: box-decoration  先頭にスペース 途中でスペースインラインブロック そして、ここから別のins要素で末尾にスペース 

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

<div class="mihon">
<p>
<b>text-decoration-skip: 未指定(= objects)</b>
<ins> 先頭にスペース  途中でスペース<span>インラインブロック</span>
そして、</ins><ins>ここから別のins要素で末尾にスペース </ins></p>
<p>
<b>text-decoration-skip: none</b>
<ins class="sample1"> 先頭にスペース 途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample1">ここから別のins要素で末尾にスペース </ins></p>
<p>
 <b>text-decoration-skip: spaces</b>
 <ins class="sample2"> 先頭にスペース 途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample2">ここから別のins要素で末尾にスペース </ins></p>
<p>
 <b>text-decoration-skip: leading-spaces</b>
 <ins class="sample3"> 先頭にスペース 途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample3">ここから別のins要素で末尾にスペース </ins></p>
<p>
 <b>text-decoration-skip: trailing-spaces</b>
 <ins class="sample4"> 先頭にスペース 途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample4">ここから別のins要素で末尾にスペース </ins></p>
<p>
 <b>text-decoration-skip: edges</b>
 <ins class="sample5"> 先頭にスペース 途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample5">ここから別のins要素で末尾にスペース </ins></p>
<p>
 <b>text-decoration-skip: box-decoration</b>
 <ins class="sample6"> 先頭にスペース 途中でスペース<span>インラインブロック</span>
そして、</ins><ins class="sample6">ここから別のins要素で末尾にスペース </ins></p>
</div>


<style>
.mihon {
	margin:1em 0;
	border:solid 1px #ccc;
	padding:1em 1.4em;
	}
.mihon p {font-size:1rem; margin:0 0 1em}
.mihon p:last-child {margin-bottom:0}
.mihon b {display:block; margin:0 .5em; color:#579961}
.mihon span {
	display:inline-block;
    margin:0 .5em}
.sample1 {
	-webkit-text-decoration-skip:none; /*-webkit- は Safari用です*/
	text-decoration-skip:none}
.sample2 {
	-webkit-text-decoration-skip:spaces;
	text-decoration-skip:spaces}
.sample3 {
	-webkit-text-decoration-skip:leading-spaces;
	text-decoration-skip:leading-spaces}
.sample4 {
	-webkit-text-decoration-skip:trailing-spaces;
	text-decoration-skip:trailing-spaces}
.sample5 {
	-webkit-text-decoration-skip:edges;
	text-decoration-skip:edges}
.sample6 {
	-webkit-text-decoration-skip:box-decoration;
	text-decoration-skip:box-decoration}
</style>

次回予告

今回の text-decoration-skipプロパティは 実装しているブラウザが少ないので、どんな指定ができるのかよくわからないですね。(仕様も変わるかもしれないし)

まあとにかく、次回は 今回もちらっと出てきた text-decoration-skip-inkプロパティを見てみましょう。
このプロパティも Text Decoration Module Level 4 で まだ草案段階ですけどね。
これは、文字の「上や下にはみ出た部分」にライン装飾が引かれるときに、ラインが文字にくっつく(そのまま横切る)か、そこをスキップするか、を指定します。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

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