【50-2】テキストの強調マークの色を決める text-emphasis-color

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

text-emphasis-colorプロパティは、前回やった text-emphasis-styleプロパティで指定した「圏点」「色」を指定します。

text-emphasis-colorプロパティは、Firefox, Safari(iOS Safari も含む)は対応。
Chromeは、ベンダープレフィックス「-webkit-」付きで対応。
IE, Edge は未対応です。(参考:Can I use 2019年9月記)

強調マーク(emphasis mark)関連のプロパティは、text-emphasis ショートハンドプロパティで まとめて指定できます。下記のように記事を分けて掲載します。

【50-1】テキストの強調マークの種類を決める text-emphasis-style
【50-2】テキストの強調マークの色を決める text-emphasis-color ←今日はココ
【50-3】テキストの強調マークの種類と色のショートハンド text-emphasis
【51】テキストの強調マークの位置を決める text-emphasis-position

参考:
CSS Text Decoration Module Level 3 | W3C Editor's Draft
text-emphasis-color - CSS | MDN

text-emphasis-colorプロパティの値

text-emphasis-colorプロパティを指定しなければ、圏点の色はデフォルト(currentColor)で、文字色と同じになります。黒い文字なら圏点も黒。
圏点を文字と違う色に変えたいときに text-emphasis-colorプロパティで指定します。

text-emphasis-colorプロパティは「色」を指定するので「CSS の色指定」のルールで指定します。
CSS の色指定については、
[14-4] 色指定について(16進数, 色名, 10進数, HSL, accessibility)をご覧ください。

text-emphasis-colorプロパティの値
CSSの色指定 キーワード currentColor(文字色 =colorプロパティの値)がデフォルト値。
CSSの色指定のルールで指定します。
グローバル値 text-emphasis-color: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-emphasis-color: initial; 継承した親の値を解消しデフォルト値に戻す
text-emphasis-color: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 すべての要素

text-emphasis-colorプロパティの指定サンプル

text-emphasis-colorプロパティで圏点の色を変えてみました。

text-emphasis-style: filled;
text-emphasis-color:red;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: open;
text-emphasis-color:red;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: dot open;
text-emphasis-color:#f0f;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: double-circle;
text-emphasis-color:rgb(0,30,255);
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: triangle open;
text-emphasis-color:hsl(100,100%,25%);
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: open sesame;
text-emphasis-color:#39c6c6;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: "★";
text-emphasis-color:rgba(255,85,0,.7);
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: 'けんてん';
text-emphasis-color:#8400ff;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: filled;
text-emphasis-color:red;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: open;
text-emphasis-color:red;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: dot open;
text-emphasis-color:#f0f;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: double-circle;
text-emphasis-color:rgb(0,30,255);
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: triangle open;
text-emphasis-color:hsl(100,100%,25%);
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: open sesame;
text-emphasis-color:#39c6c6;
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: "★";
text-emphasis-color:rgba(255,85,0,.7);
text-emphasis-color は圏点(けんてん)に色を付けます。

text-emphasis-style: 'けんてん';
text-emphasis-color:#8400ff;
text-emphasis-color は圏点(けんてん)に色を付けます。

サンプルのHTMLはこちら。

<div class="mihon">
<p>
<b>text-emphasis-style: filled;<br>text-emphasis-color:red;</b>
text-emphasis-color は<span class="sample1">圏点(けんてん)に色</span>を付けます。</p>

<p><b>text-emphasis-style: open;<br>text-emphasis-color:red;</b>
  <!--テキスト省略。sample2 で指定しています--></p>
<p><b>text-emphasis-style: dot open;<br>text-emphasis-color:#f0f;</b>
  <!--テキスト省略。sample3 で指定しています--></p>
<p><b>text-emphasis-style: double-circle;<br>text-emphasis-color:rgb(0,30,255);</b>
  <!--テキスト省略。sample4 で指定しています--></p>
<p><b>text-emphasis-style: triangle open;<br>text-emphasis-color:hsl(100,100%,25%);</b>
  <!--テキスト省略。sample5 で指定しています--></p>
<p><b>text-emphasis-style: open sesame;<br>text-emphasis-color:#39c6c6;</b>
  <!--テキスト省略。sample6 で指定しています--></p>
<p><b>text-emphasis-style: "★";<br>text-emphasis-color:rgba(255,85,0,.7);</b>
  <!--テキスト省略。sample7 で指定しています--></p>
<p><b>text-emphasis-style: 'けんてん';<br>text-emphasis-color:#8400ff;</b>
  <!--テキスト省略。sample8 で指定しています--></p>
</div>

<div class="mihon v-rl"> <!--縦書きのブロック-->
 <!--上と同じ内容をコピペしています-->
</div>

サンプルのCSSはこちら。

.mihon {
	color:black;
	margin:1.5em 0;
	border:solid 1px #ccc;
	padding:.6em 1.4em;
	}
.mihon b {display:block; color:#579961; font-size:smaller}
.v-rl {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width:100%;
	height:28rem;
	-ms-writing-mode: tb-rl; /* for IE */
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
	overflow:auto}
.mihon p {font-size:1rem;margin:0 0 1em}
.mihon p:last-child {margin-bottom:0}
.sample1 {
	-webkit-text-emphasis-style:filled;
	text-emphasis-style:filled;
	-webkit-text-emphasis-color:red;
	text-emphasis-color:red}
.sample2 {
	-webkit-text-emphasis-style:open;
	text-emphasis-style:open;
	-webkit-text-emphasis-color:red;
	text-emphasis-color:red}
.sample3 {
	-webkit-text-emphasis-style:dot open;
	text-emphasis-style:dot open;
	-webkit-text-emphasis-color:#f0f;
	text-emphasis-color:#f0f}
.sample4 {
	-webkit-text-emphasis-style:double-circle;
	text-emphasis-style:double-circle;
	-webkit-text-emphasis-color:rgb(0,30,255);
	text-emphasis-color:rgb(0,30,255)}
.sample5 {
	-webkit-text-emphasis-style:triangle open;
	text-emphasis-style:triangle open;
	-webkit-text-emphasis-color:hsl(100,100%,25%);
	text-emphasis-color:hsl(100,100%,25%)}
.sample6 {
	-webkit-text-emphasis-style:open sesame;
	text-emphasis-style:open sesame;
	-webkit-text-emphasis-color:#39c6c6;
	text-emphasis-color:#39c6c6}
.sample7 {
	-webkit-text-emphasis-style:"★";
	text-emphasis-style:"★";
	-webkit-text-emphasis-color:rgba(255,85,0,.7);
	text-emphasis-color:rgba(255,85,0,.7)}
.sample8 {
	-webkit-text-emphasis-style:'けんてん';
	text-emphasis-style:'けんてん';
	-webkit-text-emphasis-color:#8400ff;
	text-emphasis-color:#8400ff}

次回予告

次回は、text-emphasis-styletext-emphasis-color を一括で指定するショートハンドプロパティ text-emphasisプロパティを使おう。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

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