【50-1】テキストの強調マークの種類を決める text-emphasis-style

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

強調マーク(emphasis mark)とは、日本語で「圏点(けんてん)」と言って、文章の重要な部分に 1文字ずつ「﹅」などを付けるアレです。

「emphasis(エンファシス)」は「強調・重点」と言った意味。

「圏点(けんてん)」以外に「傍点(ぼうてん)」「脇点(わきてん)」とも言います。
強調のために文字に点を打つのは日本語だけ(?)っぽいです。中国語などで文字に打つ点は発音(イントネーション)のためのものらしいです。

CSSで強調マーク(emphasis mark)「形(種類)」と「色」を指定できます。

今回はまず「形(種類)」を指定する text-emphasis-styleプロパティを使ってみよう。
﹅ とか ● とか ◉ とか好きな形を指定できます。

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

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

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

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

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

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

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

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

none
テキストに圏点を付けません。これがデフォルト
filled と open
filled は「中が塗りつぶされたスタイル(• ● ◉ ▲ ﹅)」
open は「輪郭だけのスタイル(◦ ○ ◎ △ ﹆)」
圏点の「種類のキーワード」と合わせて使います。
例:text-emphasis-style: circle open
どっちも指定せずに、種類のキーワードが指定されていれば、デフォルト値は filled(塗りつぶし)です。
dot
小さい丸。
filledなら「•(ユニコードで U+2022)」、openなら「◦(U+25E6)」
circle
大きい丸。
filledなら「●(U+25CF)」、openなら「○(U+25CB)」
filled か open しか指定されていない場合は、横書きモードなら この circle がデフォルトになります。
double-circle
二重丸。
filledなら蛇の目「◉(U+25C9)」、openなら「◎(U+25CE)」
triangle
三角。
filledなら「▲(U+25B2)」、openなら「△(U+25B3)」
sesame
ゴマ。
filledなら「﹅(U+FE45)」、openなら白ゴマ「﹆(U+FE46)」
filled か open しか指定されていない場合は、縦書きモードなら この sesame がデフォルトになります
'任意の文字列'
たいていは記号(*とか ★とか)で「1文字」だけ指定します。
(複数の文字を指定しても、ブラウザは2文字目以降を切り捨てて使ったり、文字列そのものを無視しても良いようになってます)

文字列なので、「' '(シングルクォート)」か「" "(ダブルクォート)」で囲んで使います。
この場合、filled・openは指定不可(指定するとエラーになります)。

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

text-emphasis-styleプロパティの値を使ってみます。

text-emphasis-style: 指定なし( = none) text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: filled text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: open text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: dot open text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: double-circle text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: triangle open text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: open sesame text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: "★" text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: 'けんてん' text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: 指定なし( = none) text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: filled text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: open text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: dot open text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: double-circle text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: triangle open text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: open sesame text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: "★" text-emphasis-style はテキストに圏点(けんてん)を付けます。

text-emphasis-style: 'けんてん' text-emphasis-style はテキストに圏点(けんてん)を付けます。

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

<div class="mihon">
<p>
<b>text-emphasis-style: 指定なし( = none)</b>
text-emphasis-style はテキストに<span>圏点(けんてん)</span>を付けます。</p>
<p>
<b>text-emphasis-style: filled</b>
text-emphasis-style はテキストに<span class="sample1">圏点(けんてん)</span>を付けます。</p>
<p><b>text-emphasis-style: open</b> <!--テキスト省略。sample2 で指定しています--> </p>
<p><b>text-emphasis-style: dot open</b> <!--テキスト省略。sample3 で指定しています--> </p>
<p><b>text-emphasis-style: double-circle</b> <!--テキスト省略。sample4 で指定しています--> </p>
<p><b>text-emphasis-style: triangle open</b> <!--テキスト省略。sample5 で指定しています--> </p>
<p><b>text-emphasis-style: open sesame</b> <!--テキスト省略。sample6 で指定しています--> </p>
<p><b>text-emphasis-style: "★"</b> <!--テキスト省略。sample7 で指定しています--> </p>
<p><b>text-emphasis-style: 'けんてん'</b> <!--テキスト省略。sample2 で指定しています--> </p>
</div>

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

<style>
.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}
.sample2 {
	-webkit-text-emphasis-style:open;
	text-emphasis-style:open}
.sample3 {
	-webkit-text-emphasis-style:dot open;
	text-emphasis-style:dot open}
.sample4 {
	-webkit-text-emphasis-style:double-circle;
	text-emphasis-style:double-circle}
.sample5 {
	-webkit-text-emphasis-style:triangle open;
	text-emphasis-style:triangle open}
.sample6 {
	-webkit-text-emphasis-style:open sesame;
	text-emphasis-style:open sesame}
.sample7 {
	-webkit-text-emphasis-style:"★";
	text-emphasis-style:"★"}
.sample8 {
	-webkit-text-emphasis-style:'けんてん';
	text-emphasis-style:'けんてん'}
    /* ↑ あえて4文字指定してみました。最初の1文字が使われるブラウザが多いようです*/
</style>

任意の文字列も指定できるのが面白いですね。
サンプルの最後では 'けんてん' と指定しましたが、大抵のブラウザでは最初の「け」が圏点として使われるようです。

次回予告

この「圏点」は、デフォルトでは「文字の色」と同じ色になります。
CSSで 圏点だけ文字色と違う色に変えることができます。
次回は、text-emphasis-colorプロパティを使って圏点の色を変えてみよう。

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

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

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

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

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

スポンサーリンク

コメントの投稿

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

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