【50-3】テキスト強調マークの種類と色のショートハンド text-emphasis

最終更新日:2019年12月10日  (初回投稿日:2019年11月13日)

text-emphasisプロパティは、text-emphasis-styletext-emphasis-color の値を 一括で指定します。

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

emphasis mark関連のプロパティは、このように記事を分けています。

【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 Candidate Recommendation
text-emphasis - CSS | MDN

text-emphasisショートハンドプロパティのルール

圏点の「種類」と「色」の値だけなので、けっこう簡単です。text-emphasis-style と text-emphasis-color で指定できる値を「半角スペース」区切りで並べるだけ。

他のショートハンドと同じように、省略した値はデフォルト値にリセットされます。

text-emphasis-style と text-emphasis-color は両方名前が長いので、text-emphasis でまとめるとラクですね。

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

text-emphasisプロパティで指定してみます。

text-emphasis: filled red; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: open red; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: dot open #f0f; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: double-circle rgb(0,30,255); text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: triangle open hsl(100,100%,25%); text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: open sesame #39c6c6; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: "★" rgba(255,85,0,.7); text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: 'けんてん' #8400ff; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: filled red; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: open red; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: dot open #f0f; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: double-circle rgb(0,30,255); text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: triangle open hsl(100,100%,25%); text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: open sesame #39c6c6; text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: "★" rgba(255,85,0,.7); text-emphasis は圏点(けんてん)の指定をまとめます。

text-emphasis: 'けんてん' #8400ff; text-emphasis は圏点(けんてん)の指定をまとめます。

サンプルのHTMLはこちら。

<div class="mihon">
<p>
<b>text-emphasis: filled red;</b>
text-emphasis は<span class="sample1">圏点(けんてん)</span>の指定をまとめます。</p>

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

次回予告

次回は、圏点がらみのプロパティ text-emphasis-positionを使ってみよう。
これは 強調マーク(emphasis mark = 圏点)の「位置」を指定します。
横書きなら「上」か「下」か、縦書きなら「右」か「左」かを指定できます。

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

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

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

「初心者ですがレンタルサーバーはどこがいい?」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーロリポップ!です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

スポンサーリンク

コメントの投稿

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

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
02 | 2024/03 | 04
- - - - - 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
Profile

yuki★hata

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

メールフォームはこちら

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