★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; を指定。

広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
50 users signed up
もっと表示する