text-emphasis:テキストに付加する圏点、傍点、脇点に関する値を一括で指定する
初期値 | 各プロパティの初期値 |
適用対象 | 全ての要素 |
継承 | しない |
アニメーション | 各プロパティの値に基づく |
対応ブラウザ | caniuseで確認 |
text-emphasisプロパティの説明
text-emphasis
は、テキストに付加する圏点、傍点、脇点に関する値を一括で指定します。圏点(けんてん)、傍点(ぼうてん)、脇点(わきてん)とは、日本語の文章で文字の強調を行うときに、文字の上や脇に付加する装飾的な点のことです。
text-emphasis
は、以下のプロパティを一括指定するショートハンド・プロパティです。
text-emphasisに指定できる値
- none
- 圏点を表示しません。
text-emphasis-style
の初期値です。 - filled
- 単色で塗りつぶさた記号を表すキーワードです。形状を表すキーワードと組み合わせて使用することもできます。
- open
- 中抜きの記号を表すキーワードです。形状を表すキーワードと組み合わせて使用することもできます。
- dot
- 小さな点の記号を表示します。
filled dot
であれば "•
"(U+2022)を、open dot
であれば "◦
"(U+25E6)となります。 - circle
- 大きな円の記号を表示します。
filled circle
であれば "●
"(U+25CF)を、open circle
であれば "○
"(U+25CB)となります。 - double-circle
- 二重丸の記号を表示します。
filled double-circle
であれば "◉
"(U+25C9)を、open double-circle
であれば "◎
"(U+25CE)となります。 - triangle
- 三角形の記号を表示します。
filled triangle
であれば "▲
"(U+25B2)を、open triangle
であれば "△
"(U+25B3)となります。 - sesame
- ゴマの記号を表示します。
filled sesame
であれば "﹅
"(U+FE45)を、open sesame
であれば "﹆
"(U+FE46)となります。 - <string>
- 圏点として表示させる記号を定義する値です。これを使用する場合は、単一の文字をクォーテーションで囲います。一文字以上は無効です。
- <color>
- 圏点の色を指定する値です。
text-emphasis-color
に該当します。初期値はcurrentcolor
です。
text-emphasisの使い方とサンプル
text-emphasis
プロパティの構文は以下の通りです。
CSS
/* 初期値 */
text-emphasis: none;
/* キーワード値 */
text-emphasis: filled;
text-emphasis: open;
text-emphasis: filled circle;
text-emphasis: open triangle;
/* <string>値 */
text-emphasis: '*';
text-emphasis: '@';
text-emphasis: '\2605';
/* キーワード + color */
text-emphasis: filled sesame gray;
text-emphasis: open triangle #666;
text-emphasis: '\2605' #f00;
/* グローバル値 */
text-emphasis: inherit;
text-emphasis: initial;
text-emphasis: revert;
text-emphasis: unset;
text-emphasisの実例
それでは実際に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 > h2 {
margin: 1rem 0 0;
font-size: 1rem;
font-weight: normal;
}
section > p {
margin: 1rem 0 0;
}
.te_1 {
text-emphasis: filled;
}
.te_2 {
text-emphasis: open double-circle;
}
.te_3 {
text-emphasis: filled sesame gray;
}
.te_4 {
text-emphasis: '★' #f00;
}
HTML
<div class="samp_box">
<section>
<h2>text-emphasis: filled;</h2>
<p>圏点を<span class="te_1">重要な部分</span>に表示します。</p>
</section>
<section>
<h2>text-emphasis: open double-circle;</h2>
<p>圏点を<span class="te_2">重要な部分</span>に表示します。</p>
</section>
<section>
<h2>text-emphasis: filled sesame gray;</h2>
<p>圏点を<span class="te_3">重要な部分</span>に表示します。</p>
</section>
<section>
<h2>text-emphasis: '★' #f00;</h2>
<p>圏点を<span class="te_4">重要な部分</span>に表示します。</p>
</section>
</div>
ウェブで縦書きの文章と圏点を表現する
小説のような縦書きの文書をウェブで表現してみましょう。もちろん、出版物の形式を厳密に再現しようとすると複雑なプロパティの指定が必要になりますが、最低限の仕組みであれば次のような記述で達成できます。
表示確認
CSS
.vtext_box {
overflow: auto;
width: 100%;
padding: 1rem;
background: #eee;
line-height: 1.5;
writing-mode: vertical-rl;
}
.vtext_box > section {
overflow: auto;
padding: 1rem 0 1rem 1rem;
background: #fff;
font-family: serif;
}
section > h1 {
margin: 0 1rem 0 0;
font-size: 1.5rem;
}
section > p {
margin: 0 1rem 0 0;
text-indent: 1em;
}
p > em {
font-style: normal;
text-emphasis: filled sesame;
}
HTML
<div class="vtext_box">
<section>
<h1>第一章</h1>
<p>私はこの文書を<em>何も考えず</em>に書き始めた。言葉は言の葉と言われるように積み重ねることで意味を織り成す。それは時間の矢と同じで、先へ読み進めることでしか達成できない。</p>
<p>もし去年の今ごろ、自分は何をしていたのだろうかと振り返れば、その思い出すという行為自体が時間の流れに乗っているのだ。</p>
<p><em>あなたが</em>、と言われて、あなたがあなたを意識した時、あなたは時間から少しだけ自由になれる。</p>
<p>さて、ここで少し考えてみよう。今あなたは時間を使って文章を読んでいる。読んでいる文章は単なる模様に過ぎないが、なぜそこから意味を読み取れるのだろうか。</p>
<p><em>文字は情報を可視化したものだから</em>、と言い切ってしまえば話は簡単だが、情報が<em>それそのもの</em>を指していると、なぜ分かるのだろうか。このあたりは哲学の領域である。興味を持ったら探求してみると良いだろう。</p>
<p>時間には空間が不可欠であるように、情報には認識が必要である。ならば、単に無意識的な時間を過ごすのではなく、空間の相互作用によって生まれるものが何か、突き止めようとする好奇心が情報の本質を理解することではないだろうか。</p>
</section>
<section>
<h1>第二章</h1>
<p>第二章は<em>ありません</em>。</p>
</section>
</div>
text-emphasisに関連する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 | 文字の下に引かれる装飾線の位置を指定する |