CSSで文字の上に傍点（圏点）を付ける方法

​2026年11月10日​CSS​HTML,日本語組版

強調したい文字の上に傍点（圏点）を付けるには、CSS の text-emphasis プロパティを使います。記号はブラウザーが文字ごとに描くので、HTML に記号を書き足す必要はありません。日本語の傍点らしい「﹅」の形にするなら、text-emphasis: sesame と形を書きます。

em 要素に text-emphasis を付ける

強調の意味を持つ <em> に付けると、HTML はそのままで傍点になります。

<p>これは<em>大事</em>な話です。</p>

em {
  font-style: normal;
  text-emphasis: sesame;
}

検証環境の Chromium では、<em> の font-style は何も書かないと italic でした。斜体にならないように、font-style: normal も書いておきます。

画面に傍点が出ても、文字列は変わりません。上の HTML の段落を選択して取り出した文字列（getSelection().toString()）は「これは大事な話です。」で、傍点の記号は入っていませんでした。

MDN の text-emphasis のページにあるとおり、text-emphasis は形の text-emphasis-style と色の text-emphasis-color をまとめて書くプロパティで、子の要素に引き継がれます。検証環境でも、親の段落に付けると中の <span> にも傍点が付き、<span> に text-emphasis: none を書くと、そこだけ消えました。

形を書かないと、横書きでは小さな点になる

形は、記号の名前と、塗りつぶし（filled）か中抜き（open）かを組み合わせて選びます。filled か open かは省けて、省くと filled になります。

検証環境で、32px の文字に付けた記号の大きさを測ると、次のようになりました。

注意したいのは、形を省いて filled だけを書いたときです。CSS の仕様と MDN では、横書きなら circle（●）、縦書きなら sesame（﹅）になると書かれています。検証環境の Chromium 153 では、横書きのとき計算値が dot になり、幅 4px の小さな点が付きました。縦書きでは sesame でした。どのブラウザーでも同じ形にしたいときは、形の名前まで書いておくと確実です。

記号は好きな文字にもできます。text-emphasis: "✓" のように、引用符で囲んだ1文字を書きます。MDN の text-emphasis-style のページには、2文字以上を書かないように、と書かれています。検証環境で "foo" と書くと、描かれた記号は "f" と同じ大きさで、「f」だけが付きました。

色は、text-emphasis: sesame #d85878; のように形の後ろに書くか、text-emphasis-color で指定します。書かなければ、文字と同じ色です。

句読点やかっこ、空白には付かない

文の一部をまとめて囲んでも、句読点やかっこには傍点が付きません。

検証環境では、次のように分かれました。

• 付いた文字：漢字とかな、英字、数字、長音の「ー」、「#」「%」「&」「@」
• 付かなかった文字：「、」「。」「「」「」」「！」「？」「・」「〜」と半角の空白

CSS の仕様では、空白などの区切りの文字と、Unicode で句読点に分類される文字には、圏点を描かないと決められています。「#」「%」「&」「@」などは句読点に分類されますが、例外として描く文字の一覧に入っています。検証環境の結果は、この決まりのとおりでした。

行の間隔が狭いと、その行だけ広がる

MDN の text-emphasis-position のページにあるとおり、場所が足りないときは、ルビと同じように行の高さが広がります。

検証環境で、16px の文字で4行になる段落の3行目に傍点を付け、line-height ごとに、傍点を付けた文字の上端の位置（ページの上端から）を比べました。

line-height: 1 では、傍点のある行だけ前の行との間が 8px 空き、行の間隔がそろわなくなりました。本文の line-height が 1.8 程度あれば、この大きさの文字では行の位置は変わりませんでした。見出しのように行の間隔を詰めている所に付けるときは、表示を確かめておくと安心です。

下に付ける、縦書きで左に付ける

傍点の位置は text-emphasis-position で変えます。text-emphasis では変わらないので、別に書きます。

em {
  text-emphasis: sesame;
  text-emphasis-position: under;
}

検証環境では、何も書かないと横書きでは文字の上、under にすると文字の下に付きました。縦書き（writing-mode: vertical-rl）では、何も書かないと文字の右に付き、over left にすると左に付きました。

MDN のページでは、初期値は auto と書かれていますが、互換性データでは Chrome、Edge、Safari は auto に対応していません。検証環境の Chromium でも CSS.supports('text-emphasis-position', 'auto') は false で、auto と書いた指定は無視されました。CSS Text Decoration Level 3 の仕様では、初期値は over right（横書きで上、縦書きで右）です。MDN のページにも、日本語ではこの位置が望ましいと書かれています。ほかの場所で変えた位置をこの位置に戻したいときは、auto ではなく over right と書きます。

ルビのある文字に傍点を付けると、傍点はルビのさらに上に付きました。上の画像の右側のように、ルビのある文字とない文字で、傍点の高さがずれます。CSS の仕様にも、ルビと同じ側に付くときは、ルビの外側に置くと書かれています。仕様には、ルビと重なる文字では傍点を消したいときの書き方の例として、ruby { text-emphasis: none; } でルビのある文字の傍点を消す方法も載っています。

ルビの文字（「ぼう」）そのものには、傍点は付きませんでした。検証環境の Chromium では、親の段落に text-emphasis を書いても、<rt> の text-emphasis-style の計算値は none のままでした。

対応しているブラウザー

互換性データでは、接頭辞なしの text-emphasis に対応しているのは、Chrome 99、Edge 99、Firefox 46、Safari 7（iOS 版も 7）からです。Chrome 25〜98 と Edge 79〜98 は -webkit-text-emphasis だけに対応しています。検証環境の Chromium 153 では、-webkit-text-emphasis だけを書いても傍点が付きました。古い Chrome も対象にするなら、MDN の例のように両方を書いておきます。

em {
  font-style: normal;
  -webkit-text-emphasis: sesame;
  text-emphasis: sesame;
}