日本語の文章で一部を強調したいとき、太字や下線を使うと本文から浮いてしまう——そんな場面で使えるのが圏点（傍点）です。文字の脇に小さな点を打つ、書籍でおなじみのあの表現を、CSS の text-emphasis プロパティで実現できます。この記事では圏点の形・色・位置を決める4つのプロパティの書き方と、太字をやめて圏点に置き換える実践的な使い方、行間や継承でつまずきやすい点を、動かせるコード付きで解説します。
目次
日本語の強調に圏点という選択肢
Web ページで文章の一部を目立たせるとき、多くの場合は太字にするか、色を変えるか、下線を引くかのどれかを選びます。ただ日本語の組版では昔から別の方法が使われてきました。強調したい文字の脇に、ゴマのような小さな点をひとつずつ打つ圏点（傍点、脇点とも呼びます）です。小説や新聞、教科書でも見かける表現で、太字ほど強く主張せず、下線のように文の流れを断ち切らない、控えめで上品な強調になります。
圏点が特に力を発揮するのは縦書きです。縦書きの本文に下線を引くと文字の右か左に線が走ることになり、読みづらくなりますが、圏点なら行の脇に点が並ぶだけなので自然に馴染みます。横書きでも、明朝体の本文でしっとり見せたいページや、太字が多すぎて効果が薄れている記事では、圏点に置き換えるだけで印象がかなり変わります。
CSS には、この圏点を扱うためのプロパティが4つ用意されています。形を決める text-emphasis-style、色を決める text-emphasis-color、そのふたつをまとめて書ける一括指定の text-emphasis、そして打つ位置を決める text-emphasis-position です。まずは一括指定の基本形から見ていきます。
text-emphasis の基本の書き方
text-emphasis は text-emphasis-style と text-emphasis-color の一括指定です。もっとも短い書き方は、形を表すキーワードをひとつ書くだけです。
/* 塗りつぶしの点を打つ。もっとも基本的な形 */
.em {
text-emphasis: filled dot;
}
/* 個別指定で書くとこうなる（上と同じ意味） */
.em {
text-emphasis-style: filled dot;
text-emphasis-color: currentColor; /* 色を省略したときの既定値 */
}指定した要素の中のテキストに、1文字ずつ圏点が打たれます。ここで押さえておきたいのが、text-emphasis は継承するプロパティだという点です。見た目を変えるプロパティなので text-decoration と似た感覚で扱いがちですが、text-decoration が継承せず要素全体にまとめて装飾を引くのに対し、text-emphasis は子孫要素にも値が受け継がれます。段落に指定すれば、その中のリンクや <em> にも同じ圏点が付くということです。
逆に言えば、段落の中の一部分だけに圏点を打ちたいときは、その範囲を <span> などのインライン要素で囲んでクラスを付ける必要があります。<p> や <div> のようなブロック要素に指定すれば、中のテキストすべてに点が付いてしまいます。
<!-- 一部だけに圏点を打つには span で囲む -->
<p>この操作は<span class="em">取り消せません</span>のでご注意ください。</p>なお圏点の大きさは、ルビと同じくフォントサイズのおよそ 50% です。自分で font-size を調整することはできないので、点を小さくしたい・大きくしたいという要求には、本文のフォントサイズか圏点の形（後述の dot と circle など）で応えることになります。
text-emphasis-style で圏点の形を選ぶ
圏点の形は、塗りつぶしか中抜きかを表すキーワード（filled / open）と、記号の種類を表すキーワード（dot / circle / double-circle / triangle / sesame）の組み合わせで指定します。順番は問われないので filled sesame でも sesame filled でも構いません。組み合わせで実際に描かれる記号は次のとおりです。
| 記号のキーワード | filled（塗りつぶし） | open（中抜き） |
|---|---|---|
dot | • （U+2022）小さな点 | ◦ （U+25E6）小さな白丸 |
circle | ● （U+25CF）大きな丸 | ○ （U+25CB）大きな白丸 |
double-circle | ◉ （U+25C9）二重丸 | ◎ （U+25CE）中抜きの二重丸 |
triangle | ▲ （U+25B2）三角 | △ （U+25B3）白三角 |
sesame | ﹅ （U+FE45）ゴマ点 | ﹆ （U+FE46）白ゴマ点 |
filled と open を省略した場合は filled とみなされます。つまり text-emphasis: sesame; は text-emphasis: filled sesame; と同じです。反対に filled や open だけを書いて記号を省略した場合は、書字方向によって既定の形が変わります。横書きでは circle、縦書きでは sesame が使われます。日本語の慣習に沿った振る舞いになっているわけです。
迷ったときの目安としては、横書きの本文では小さくて主張しすぎない dot、縦書きの本文では書籍と同じ見た目になる sesame を選ぶと落ち着きます。circle や triangle は点が大きく、見出しやキャッチコピーなど文字サイズの大きい箇所で効果的です。
キーワードのほかに、好きな文字を圏点にする <string> 形式も使えます。text-emphasis: "★"; のように引用符で囲んで書くと、その文字が圏点として並びます。指定できるのは1文字で、2文字以上の文字列はブラウザーによって切り詰められたり無視されたりします。最後に、圏点を付けないことを表す none（初期値）があります。継承で降りてきた圏点を子孫で打ち消すときに使います。
実際に並べて比べてみましょう。CSS タブの値を書き換えると、プレビューがその場で変わります。
<ul class="samples">
<li><span class="mark filled-dot">桜が咲きました</span><span class="label">filled dot</span></li>
<li><span class="mark open-dot">桜が咲きました</span><span class="label">open dot</span></li>
<li><span class="mark filled-circle">桜が咲きました</span><span class="label">filled circle</span></li>
<li><span class="mark open-circle">桜が咲きました</span><span class="label">open circle</span></li>
<li><span class="mark filled-double">桜が咲きました</span><span class="label">filled double-circle</span></li>
<li><span class="mark open-double">桜が咲きました</span><span class="label">open double-circle</span></li>
<li><span class="mark filled-triangle">桜が咲きました</span><span class="label">filled triangle</span></li>
<li><span class="mark open-triangle">桜が咲きました</span><span class="label">open triangle</span></li>
<li><span class="mark filled-sesame">桜が咲きました</span><span class="label">filled sesame</span></li>
<li><span class="mark open-sesame">桜が咲きました</span><span class="label">open sesame</span></li>
<li><span class="mark str">桜が咲きました</span><span class="label">"★"（文字列）</span></li>
</ul>
.samples {
margin: 0;
padding: 0;
list-style: none;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-size: 18px;
/* 圏点は行の上に描かれるので、行間に余裕を持たせる */
line-height: 2.4;
}
.samples li {
display: flex;
align-items: baseline;
gap: 16px;
border-bottom: 1px dashed #e2e2e2;
}
.label {
font-family: ui-monospace, monospace;
font-size: 12px;
color: #777;
}
/* filled は塗りつぶし、open は中抜き */
.filled-dot { text-emphasis: filled dot; }
.open-dot { text-emphasis: open dot; }
.filled-circle { text-emphasis: filled circle; }
.open-circle { text-emphasis: open circle; }
.filled-double { text-emphasis: filled double-circle; }
.open-double { text-emphasis: open double-circle; }
.filled-triangle { text-emphasis: filled triangle; }
.open-triangle { text-emphasis: open triangle; }
/* sesame（ゴマ点）は縦書きの日本語で使われる形 */
.filled-sesame { text-emphasis: filled sesame; }
.open-sesame { text-emphasis: open sesame; }
/* 好きな1文字を圏点にすることもできる */
.str { text-emphasis: "★"; }
同じ「点」でも dot と sesame では印象がかなり違うことが分かるはずです。sesame はゴマを縦に置いたような形で、縦書きにしたときに文字の脇にきれいに並びます。
text-emphasis-color で圏点だけ色を変える
text-emphasis-color は圏点の色を指定するプロパティで、初期値は currentColor、つまりその要素の文字色と同じ色です。何も指定しなければ本文と同じ色で点が打たれるので、ふだんは意識する必要がありません。
本文とは別の色にしたいときは、一括指定の中に色を書き足すか、個別のプロパティで指定します。一括指定では形のキーワードと色を並べて書きます。
/* 一括指定に色を足す。形と色を並べて書く */
.em {
text-emphasis: filled dot #e0407f;
}
/* 個別に書く場合。色だけ後から上書きすることもできる */
.em {
text-emphasis-style: filled dot;
text-emphasis-color: #e0407f;
}
/* テーマカラーを CSS 変数で持っているなら、そのまま渡せる */
.em {
text-emphasis: filled sesame var(--accent);
}本文は黒のまま圏点だけをアクセントカラーにすると、文字を色文字にするより読みやすさを保ったまま目線を誘導できます。ただし色だけで意味を伝えるのは避けたいところなので、圏点の色は「気づきやすくする補助」と考え、重要な情報は文章そのもので伝わるようにしておきましょう。
text-emphasis-position で打つ位置を決める
圏点を文字の上下どちらに打つか、縦書きのときは右左どちらに打つかを決めるのが text-emphasis-position です。over / under が横書きのときの位置、right / left が縦書きのときの位置に対応していて、over right のように組み合わせて指定できます。
| 値 | 効果 |
|---|---|
auto | 初期値。横書きでは文字の上、縦書きでは文字の右に圏点を描く |
over | 横書きのとき、文字の上に描く |
under | 横書きのとき、文字の下に描く |
right | 縦書きのとき、行の右側に描く |
left | 縦書きのとき、行の左側に描く |
日本語では、横書きなら文字の上、縦書きなら行の右側というのが慣習で、これは初期値の auto（従来の書き方では over right）と一致します。そのため日本語のページでは、位置をわざわざ指定する場面はそれほど多くありません。指定が要るのは、ルビと圏点がぶつかるときや、あえて下側・左側に打ちたいときです。
ここで注意したいのが、text-emphasis-position は一括指定の text-emphasis には含まれないことです。形や色と違って位置だけは別扱いで、text-emphasis を書いても位置の値はリセットされません。位置を変えたいときは必ず text-emphasis-position を単独で書きます。一括指定でまとめて上書きしたつもりが位置だけ前の値のまま残る、という事故を避けられます。
縦書きで試してみましょう。1段落目は既定の右側、2段落目は text-emphasis-position: over left; で左側に打っています。
<div class="tategaki">
<p>春はあけぼの。やうやう白くなりゆく山ぎは、<span class="em">すこしあかりて</span>、紫だちたる雲のほそくたなびきたる。</p>
<p class="left">夏は夜。月のころはさらなり、<span class="em">やみもなほ</span>、螢の多く飛びちがひたる。</p>
</div>
.tategaki {
/* 縦書きにする */
writing-mode: vertical-rl;
height: 260px;
padding: 16px;
border: 1px solid #ddd;
background: #fffdf8;
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-size: 17px;
/* 縦書きでは圏点が行の右側に出るので、行間に余裕が要る */
line-height: 2.4;
}
.tategaki p {
margin: 0 0 0 8px;
}
/* 縦書きの日本語は sesame（ゴマ点）が慣習 */
.em {
text-emphasis: filled sesame;
}
/* 既定は右側。over left にすると反対側に打たれる */
.left .em {
text-emphasis-position: over left;
}
ルビと圏点が重なる場合
圏点は行の外側、ちょうどルビが置かれるのと同じ場所に描かれます。そのため <ruby> でふりがなを振った文字に圏点も付けようとすると、同じ側で場所を取り合うことになります。どちらを優先するかは中身しだいですが、片方を消してしまうのが分かりやすい対処です。
/* ふりがなを優先する。ルビのある部分では圏点を出さない */
ruby {
text-emphasis: none;
}
/* 逆に圏点を優先する。強調部分のルビを表示しない */
em rt {
display: none;
}圏点を打ちたい範囲にルビ付きの文字が混ざっているだけなら、text-emphasis-position で圏点を反対側（横書きなら under、縦書きなら left）に逃がす手もあります。ただし日本語として見慣れない位置になるので、まずは「同じ文字にルビと圏点を重ねない」構成を検討するほうが素直です。
太字をやめて圏点で強調する
実務でいちばん出番が多いのは、<strong> の見た目を圏点に置き換えるパターンです。<strong> は「重要である」という意味を示す要素で、その意味は見た目とは独立しています。つまりマークアップは <strong> のままにして、CSS で font-weight: normal; に戻し、代わりに圏点を打てば、意味を保ったまま日本語の組版らしい強調にできます。
明朝体の本文では特に効果が分かりやすい方法です。日本語の明朝体は太字を持たないフォントも多く、ブラウザーが機械的に太らせた文字は輪郭がぼやけて見えることがあります。圏点なら書体の見た目を崩さずに強調できます。下のデモでは、前半が <strong> をゴマ点に置き換えた例、後半が <span> で囲んだ一部分に色付きの圏点を打った例です。
<div class="doc">
<p class="lead">申込みの締切は<strong>三月三十一日</strong>です。期日を過ぎた場合は<strong>受付できません</strong>ので、あらかじめご了承ください。</p>
<p class="accent">設定ファイルを書き換えたら、<span class="em">必ず再起動</span>してください。</p>
</div>
.doc {
font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
font-size: 17px;
/* 圏点のぶんだけ行間を広げておく */
line-height: 2.2;
}
/*
* 太字をやめて圏点で強調する書き方。
* strong の意味はそのままに、見た目だけを日本語の組版に寄せる。
*/
.lead strong {
font-weight: normal;
text-emphasis: filled sesame;
}
/* 色を本文と変える。1つ目が style、2つ目が color */
.accent {
color: #333;
}
.accent .em {
text-emphasis: filled dot #e0407f;
}
見出しに使うのも相性が良い使い方です。見出しはもともと文字が大きいので、circle や double-circle のような大きめの記号でもうるさくならず、キャッチコピーのような雰囲気を出せます。ただし圏点は1文字ずつ点が並ぶ表現なので、長い文にかけると全体が点で埋まって逆に読みにくくなります。本当に強調したい数文字に絞るのが、きれいに見せるコツです。
圏点が思ったとおりに出ないとき
圏点がまったく表示されない
まず疑うのは、形（text-emphasis-style）を指定できていないケースです。text-emphasis-style の初期値は none なので、色だけを text-emphasis-color: red; と書いても、描く記号がないため何も表示されません。色を変えたいときは形とセットで指定してください。
値の書き間違いも起こりがちです。double-circle をハイフン無しで書いた、"★" の引用符を忘れた、といった場合は宣言ごと無効になり、やはり何も出ません。開発者ツールの Styles パネルでその宣言に取り消し線が入っていないかを見るのが手早い切り分けになります。
指定先の要素が間違っていることもあります。圏点はテキストに対して描かれるものなので、テキストを含まない要素に指定しても何も起きません。<p> の外側にある <div> に書いた場合は継承で届きますが、隣り合う別の要素に書いていないか確認しましょう。
強調したい部分以外にも点が付いてしまう
text-emphasis は継承するプロパティなので、親要素に指定すると子孫のテキストすべてに圏点が付きます。段落や記事全体を囲む要素に書いてしまい、本文が点だらけになるのがよくある失敗です。圏点を打つ範囲は <span> や <strong> のようなインライン要素で絞り込むのが基本になります。
親要素に指定せざるを得ない事情があるなら、点を付けたくない子孫で text-emphasis: none; と書いて打ち消します。前述のとおりルビだけ除外したい場合の ruby { text-emphasis: none; } も同じ考え方です。
行が詰まって圏点が上の行に重なる
圏点は文字の外側、行と行のあいだの空間に描かれます。仕様上は圏点のためのスペースが足りなければ行の高さが広げられることになっていますが、line-height を小さめの固定値にしていると、点が上の行の文字に近づいて窮屈に見えたり、読みづらくなったりします。圏点を使う段落では line-height を 2 前後まで広げておくと安心です。
縦書きの場合は横方向の行間、つまり line-height が行の左右の間隔になります。こちらも余裕がないと隣の行と圏点がぶつかるので、同じように広めに取っておきます。
文字の間隔が広がって見える
半角英数字のように幅の狭い文字に圏点を打つと、圏点の幅に引っぱられて字間が広がったように見えることがあります。全角の日本語であれば文字の幅に対して圏点が十分小さいので気になりませんが、英字混じりの文や、circle のような大きい記号、"★" のような自前の文字を使ったときに目立ちます。
対処としては、圏点を打つ範囲を日本語の部分だけに限定する、dot や sesame のような小さい記号に変える、といった方法があります。そもそも圏点は日本語の組版のための表現なので、英字中心の文で無理に使わないという判断も十分ありです。
空白やスペースに点が付かない
これは不具合ではなく仕様どおりの動作です。圏点は空白や制御文字には描かれません。「取り消せ ません」のように単語のあいだにスペースが入っている箇所では、そこだけ点が抜けて見えますが、正しい挙動なので気にする必要はありません。逆に、点を意図的に抜きたい位置があるなら、そこで要素を分けて text-emphasis: none; を当てる方法を使います。
まとめ
text-emphasis は text-emphasis-style と text-emphasis-color の一括指定で、filled / open と dot / circle / double-circle / triangle / sesame の組み合わせ、または引用符で囲んだ1文字で圏点の形を決めます。色を省略すると文字色（currentColor）と同じになり、位置は text-emphasis-position で別に指定します。位置だけは一括指定に含まれない点を覚えておくと迷いません。
実際に使うときは、継承するプロパティであることを意識して <span> や <strong> で範囲を絞り、line-height に余裕を持たせる。この2点を押さえておけば大きくは外しません。太字に頼りがちだった強調を圏点に置き換えるだけで、日本語のページはぐっと読みやすく、落ち着いた見た目になります。