Home » ★CSSリファレンス

★CSSリファレンス

text-emphasis-style …… テキスト傍点のスタイルを指定する

Google Chrome（-webkit-）
Safari（-webkit-）
Firefox
Opera（-webkit-）
広告



text-emphasis-styleプロパティは、テキスト傍点のスタイルを指定する際に使用します。

傍点とはテキストの各文字の隣に付ける強調記号のことで、日本語などの東アジア言語の文書で伝統的に行われています。

text-emphasis-styleプロパティの値のうち、filled と open は傍点を塗りつぶかどうかを指定するキーワードです。
filled は傍点を塗りつぶし、open は傍点を中空にします。

filled または open を省略すると filled となります。
また、 filled または open のみを指定すると横書きモードでは circle 、縦書きモードでは sesame となります。 

text-emphasis-style: filled;	//'●'（縦書きでは'﹅'）
text-emphasis-style: open;	//'○'（縦書きでは'﹆'）

text-emphasis-style: dot;	//'•'
text-emphasis-style: circle;	//'●'
text-emphasis-style: double-circle;	//'◉'
text-emphasis-style: triangle;	//'▲'
text-emphasis-style: sesame;	//'﹅'
text-emphasis-style: 'A';	//'A'

text-emphasis-style: triangle filled;	//'▲'
text-emphasis-style: triangle open;	//'△'

■値

none
傍点なし（初期値）
filled
傍点を無地の塗りつぶしにする
open
傍点を塗りつぶし無しの中空にする
dot
ドット（小さな円）を傍点として表示。塗りつぶしは’•’、中空は’◦’
circle
サークル（大きな円）を傍点として表示。塗りつぶしは’●’、中空は’○’
double-circle
二重円を傍点として表示。塗りつぶしは’▲’、中空は’△’
triangle
三角形を傍点として表示。塗りつぶしは’◉’、中空は’◎’
sesame
ゴマ点を傍点として表示。塗りつぶしは’﹅’、中空は’﹆’
任意の1文字
任意の1文字を傍点として表示。複数文字を指定しても2文字目以降は無視される

■初期値・適用対象・値の継承

初期値
none
適用対象
すべての要素
値の継承
する

■使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

p.sample1 {text-emphasis-style: none;}
p.sample2 {text-emphasis-style: filled;}
p.sample3 {text-emphasis-style: open;}
p.sample4 {text-emphasis-style: dot;}
p.sample5 {text-emphasis-style: circle;}
p.sample6 {text-emphasis-style: double-circle;}
p.sample7 {text-emphasis-style: triangle;}
p.sample8 {text-emphasis-style: sesame;}
p.sample9 {text-emphasis-style: 'A';}

p.sample10 {text-emphasis-style: dot open;}
p.sample11 {text-emphasis-style: circle open;}
p.sample12 {text-emphasis-style: double-circle open;}
p.sample13 {text-emphasis-style: triangle open;}
p.sample14 {text-emphasis-style: sesame open;}

HTMLソース

<p class="sample1">text-emphasis-style: none; を指定。</p>
<p class="sample2">text-emphasis-style: filled; を指定。</p>
<p class="sample3">text-emphasis-style: open; を指定。</p>
<p class="sample4">text-emphasis-style: dot; を指定。</p>
<p class="sample5">text-emphasis-style: circle; を指定。</p>
<p class="sample6">text-emphasis-style: double-circle; を指定。</p>
<p class="sample7">text-emphasis-style: triangle; を指定。</p>
<p class="sample8">text-emphasis-style: sesame; を指定。</p>
<p class="sample9">text-emphasis-style: 'A'; を指定。</p>
<br>
<p class="sample10">text-emphasis-style: dot open; を指定。</p>
<p class="sample11">text-emphasis-style: circle open; を指定。</p>
<p class="sample12">text-emphasis-style: double-circle open; を指定。</p>
<p class="sample13">text-emphasis-style: triangle open; を指定。</p>
<p class="sample14">text-emphasis-style: sesame open; を指定。</p>

↓↓↓

ブラウザ上の表示

text-emphasis-style: none; を指定。

text-emphasis-style: filled; を指定。

text-emphasis-style: open; を指定。

text-emphasis-style: dot; を指定。

text-emphasis-style: circle; を指定。

text-emphasis-style: double-circle; を指定。

text-emphasis-style: triangle; を指定。

text-emphasis-style: sesame; を指定。

text-emphasis-style: ‘A’; を指定。

text-emphasis-style: dot open; を指定。

text-emphasis-style: circle open; を指定。

text-emphasis-style: double-circle open; を指定。

text-emphasis-style: triangle open; を指定。

text-emphasis-style: sesame open; を指定。

■ベンダープレフィックスを付けた場合の使用例

スタイルシート部分は外部ファイル（sample.css）に記述。

p.prefix_sample1 {
	-webkit-text-emphasis-style: none;
	-moz-text-emphasis-style: none;
	-ms-text-emphasis-style: none;
}
p.prefix_sample2 {
	-webkit-text-emphasis-style: filled;
	-moz-text-emphasis-style: filled;
	-ms-text-emphasis-style: filled;
}
p.prefix_sample3 {
	-webkit-text-emphasis-style: filled;
	-moz-text-emphasis-style: filled;
	-ms-text-emphasis-style: filled;
}
p.prefix_sample4 {
	-webkit-text-emphasis-style: filled;
	-moz-text-emphasis-style: filled;
	-ms-text-emphasis-style: filled;
}
p.prefix_sample5 {
	-webkit-text-emphasis-style: filled;
	-moz-text-emphasis-style: filled;
	-ms-text-emphasis-style: filled;
}
p.prefix_sample6 {
	-webkit-text-emphasis-style: filled;
	-moz-text-emphasis-style: filled;
	-ms-text-emphasis-style: filled;
}
p.prefix_sample7 {
	-webkit-text-emphasis-style: triangle;
	-moz-text-emphasis-style: triangle;
	-ms-text-emphasis-style: triangle;
}
p.prefix_sample8 {
	-webkit-text-emphasis-style: sesame;
	-moz-text-emphasis-style: sesame;
	-ms-text-emphasis-style: sesame;
}
p.prefix_sample9 {
	-webkit-text-emphasis-style: 'A';
	-moz-text-emphasis-style: 'A';
	-ms-text-emphasis-style: 'A';
}

p.prefix_sample10 {
	-webkit-text-emphasis-style: dot open;
	-moz-text-emphasis-style: dot open;
	-ms-text-emphasis-style: dot open;
}
p.prefix_sample11 {
	-webkit-text-emphasis-style: circle open;
	-moz-text-emphasis-style: circle open;
	-ms-text-emphasis-style: circle open;
}
p.prefix_sample12 {
	-webkit-text-emphasis-style: double-circle open;
	-moz-text-emphasis-style: double-circle open;
	-ms-text-emphasis-style: double-circle open;
}
p.prefix_sample13 {
	-webkit-text-emphasis-style: triangle open;
	-moz-text-emphasis-style: triangle open;
	-ms-text-emphasis-style: triangle open;
}
p.prefix_sample14 {
	-webkit-text-emphasis-style: sesame open;
	-moz-text-emphasis-style: sesame open;
	-ms-text-emphasis-style: sesame open;
}

HTMLソース

<p class="prefix_sample1">text-emphasis-style: none; を指定。</p>
<p class="prefix_sample2">text-emphasis-style: filled; を指定。</p>
<p class="prefix_sample3">text-emphasis-style: open; を指定。</p>
<p class="prefix_sample4">text-emphasis-style: dot; を指定。</p>
<p class="prefix_sample5">text-emphasis-style: circle; を指定。</p>
<p class="prefix_sample6">text-emphasis-style: double-circle; を指定。</p>
<p class="prefix_sample7">text-emphasis-style: triangle; を指定。</p>
<p class="prefix_sample8">text-emphasis-style: sesame; を指定。</p>
<p class="prefix_sample9">text-emphasis-style: 'A'; を指定。</p>
<br>
<p class="prefix_sample10">text-emphasis-style: dot open; を指定。</p>
<p class="prefix_sample11">text-emphasis-style: circle open; を指定。</p>
<p class="prefix_sample12">text-emphasis-style: double-circle open; を指定。</p>
<p class="prefix_sample13">text-emphasis-style: triangle open; を指定。</p>
<p class="prefix_sample14">text-emphasis-style: sesame open; を指定。</p>

↓↓↓

ブラウザ上の表示

text-emphasis-style: none; を指定。

text-emphasis-style: filled; を指定。

text-emphasis-style: open; を指定。

text-emphasis-style: dot; を指定。

text-emphasis-style: circle; を指定。

text-emphasis-style: double-circle; を指定。

text-emphasis-style: triangle; を指定。

text-emphasis-style: sesame; を指定。

text-emphasis-style: ‘A’; を指定。

text-emphasis-style: dot open; を指定。

text-emphasis-style: circle open; を指定。

text-emphasis-style: double-circle open; を指定。

text-emphasis-style: triangle open; を指定。

text-emphasis-style: sesame open; を指定。

広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.