text-emphasis-color:テキストに付加する圏点、傍点、脇点の色を指定する
初期値 | currentcolor |
適用対象 | 全ての要素 |
継承 | しない |
アニメーション | <color>値 |
対応ブラウザ | caniuseで確認 |
text-emphasis-colorプロパティの説明
text-emphasis-color
は、テキストに付加する圏点、傍点、脇点の色を指定します。圏点(けんてん)、傍点(ぼうてん)、脇点(わきてん)とは、日本語の文章で文字の強調を行うときに、文字の上や脇に付加する装飾的な点のことです。
圏点に使用する記号を変えるには、text-emphasis-style
を使用します。これらの値は、ショートハンド・プロパティのtext-emphasis
で一括操作できます。
text-emphasis-colorに指定できる値
- <color>
- 圏点の色を指定する値です。初期値は
currentcolor
です。
text-emphasis-colorの使い方とサンプル
text-emphasis-color
プロパティの構文は以下の通りです。
CSS
/* 初期値 */
text-emphasis-color: currentcolor;
/* <color>値 */
text-emphasis-color: cyan;
text-emphasis-color: magenta;
text-emphasis-color: #f00;
text-emphasis-color: #ff0000;
text-emphasis-color: rgb(0, 153, 255);
text-emphasis-color: rgba(0, 153, 255, 0.7);
text-emphasis-color: transparent;
/* グローバル値 */
text-emphasis-color: inherit;
text-emphasis-color: initial;
text-emphasis-color: revert;
text-emphasis-color: unset;
text-emphasis-colorの実例
それでは実際にtext-emphasis-color
プロパティの書き方を見ていきましょう。以下の例は、段落の中の特定の文字列に対して圏点を付加した時の表示です。
ここでは、text-emphasis-style
とtext-emphasis-color
を分けて表記していますが、一般的にはtext-emphasis
を使う場面の方が多いでしょう。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 1rem;
background: #eee;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.samp_box > section {
overflow: auto;
padding: 0 1rem 1rem;
background: #fff;
}
section > p {
margin: 1rem 0 0;
}
section > div {
margin: .5rem 0 0;
font-size: 0.875rem;
}
.te_1 {
text-emphasis-style: filled;
text-emphasis-color: black;
}
.te_2 {
text-emphasis-style: open double-circle;
text-emphasis-color: #03a;
}
.te_3 {
text-emphasis-style: filled sesame;
text-emphasis-color: rgb(255, 0, 0);
}
.te_4 {
text-emphasis-style: '★';
text-emphasis-color: hsl(330, 100%, 63%);
}
HTML
<div class="samp_box">
<section>
<p>圏点を<span class="te_1">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: filled;<br>
text-emphasis-color: black;<br>
</div>
</section>
<section>
<p>圏点を<span class="te_2">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: open double-circle;<br>
text-emphasis-color: #03a;<br>
</div>
</section>
<section>
<p>圏点を<span class="te_3">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: filled sesame;<br>
text-emphasis-color: rgb(255, 0, 0);<br>
</div>
</section>
<section>
<p>圏点を<span class="te_4">重要な部分</span>に表示します。</p>
<div>
text-emphasis-style: '★';<br>
text-emphasis-color: hsl(330, 100%, 63%);<br>
</div>
</section>
</div>
縦書きの文章に圏点を表示させる
小説のような縦書きの文書で圏点はよく使われます。それをウェブページで再現するには、いくつかのCSSプロパティを記述する必要があります。詳しい内容はtext-emphasis
で解説します。ページ下部の縦書き形式のサンプルを参照して下さい。
text-emphasis-colorに関連するCSSプロパティ
テキスト関連 | |
---|---|
text-align | ボックスに含まれる内容の横位置の揃え方を指定する |
text-align-last | ボックスに含まれる内容の最後の行を揃える位置を指定する |
text-combine-upright | 一文字分の空間に挿入する文字の組み合わせを指定する |
text-decoration | 文字の装飾線に関する値を一括で指定する |
text-decoration-color | 文字に加えられた装飾線の色を指定する |
text-decoration-line | 文字に加えられた装飾線の種類を指定する |
text-decoration-skip-ink | 装飾線が文字を通過する祭の処理を指定する |
text-decoration-style | 文字に加えられた装飾線の形状を指定する |
text-decoration-thickness | 文字に加えられた装飾線の太さを指定する |
text-emphasis | テキストに付加する圏点、傍点、脇点に関する値を一括で指定する |
text-emphasis-color | テキストに付加する圏点、傍点、脇点の色を指定する |
text-emphasis-position | テキストに付加する圏点、傍点、脇点の位置を指定する |
text-emphasis-style | テキストに付加する圏点、傍点、脇点の記号を指定する |
text-indent | テキストの一行目に挿入するインデントの幅を指定する |
text-justify | テキストの行端揃えに対して均等割り付けの方法を指定する |
text-orientation | 縦書きモードの文字の向きを指定する |
text-overflow | 行からテキストが溢れている状態の表現方法を指定する |
text-shadow | 文字に影(ドロップシャドウ)を付ける |
text-transform | テキストの大文字・小文字の表記を指定する |
text-underline-position | 文字の下に引かれる装飾線の位置を指定する |