テキストの上に点を打つ「傍点(圏点)」を使って文字を強調できるCSS3

CSSで表現できる「テキストの強調方法」というと、太字で表示したり、文字色を赤色にしたり、下線を引いたり、背景色を使って蛍光ペンでマーキングしたように見せたり……といった装飾がよく使われてきたでしょうか。単にそうするくらいしか強調する方法がなかったとも言えますが(まあ充分ですけども)。
CSS3では、日本語文の強調方法として使われてきた傍点(圏点)も表示できます。
丸(ドット)で傍点を打つほか、二重の円・三角形・ゴマなどでの傍点も描画できます。

以下のサンプルを、傍点の表示対応ブラウザで閲覧すると、赤丸や青丸などの傍点が見えるはずです。

本稿執筆時点ではまだ表示可能なブラウザに制限があります。Firefox・Safariでは表示可能です。Chrome・Operaでも表示可能ですが、ベンダープレフィックス「-webkit-」を付ける必要があります。残念ながら、IEやEdgeでは表示できません。

傍点(圏点)を打つtext-emphasisプロパティの書き方

このような傍点を指定する方法はとても簡単で、以下のようにtext-emphasisプロパティを使うだけです(※本来は1行だけで済みますが、ここではベンダープレフィックス「-webkit-」を付加した行も加えています)。

strong {
	-webkit-text-emphasis: filled circle red;
   text-emphasis: filled circle red;
}

上記のCSSソースでは、strong要素に対する装飾として、

• 塗りつぶし形状に「塗りつぶし」(filled)を選択
• 傍点の形状に「円」(circle)を選択
• 傍点の色に「赤色」(red)を指定

という傍点を付加しています。

赤色で塗りつぶされた円形の傍点が表示されているはずです。(対応ブラウザで見た場合は)

傍点(圏点)の形状や塗りつぶしのパターンと配色は様々に指定できる

text-emphasisプロパティで描ける傍点の形状は、丸形だけではありません。以下のような複数の選択肢が用意されています。

• 塗りつぶしの形状には、以下の2種類が指定できます。
  • filled(塗りつぶし)と、
  • open(塗りつぶさない)
• 傍点の形状には、以下の各形状が指定できます。
  • circle(円)、
  • double-circle(二重円)、
  • dot(点)、
  • triangle(三角形)、
  • sesame(ゴマ)
• 色は、CSSでの色指定が使えます。

ゴマ型は「セサミ」ですが、スペルは「sesami」ではなく「sesame」なので注意しましょう。(^_^;)

傍点(圏点)の形状や塗りつぶしパターンの表示例1

例えば以下のようにCSSソースを書くと、塗りつぶさない(open)三角形(triangle)で青色(blue)の傍点が表示できます。

strong {
	-webkit-text-emphasis: open triangle blue;
   text-emphasis: open triangle blue;
}

これを適用してみると、

塗りつぶさないパターンだと薄めに見えるので、強調したい度合いに応じて選ぶと良いかも知れません。
塗りつぶしの有無と形状がいろいろ選べるので、単なる「太字」などとは違って、その場のデザインなどに合わせた(目立つ)強調方法にできるかもしれません。

傍点(圏点)の形状や塗りつぶしパターンの表示例2

さらに以下のようにCSSソースを書くと、塗りつぶす(filled)ゴマ(sesame)で紫色(#cc000cc)の傍点が表示できます。

strong {
	-webkit-text-emphasis: filled sesame #cc00cc;
   text-emphasis: filled sesame #cc00cc;
}

これを適用してみると、

ゴマというよりも読点「、」っぽいですけどもね。(^_^;)
円形・二重丸・三角形などの形状の中では、このゴマ型が一番目に付きそうな気がします。

このtext-emphasisプロパティは、本記事の初版執筆時点(2014年頃)では、Webkit系ブラウザでしか表示できなかった上、傍点の形状としてsesame(ゴマ)を指定した場合は何も表示されないなどの未実装が多々ありました。しかし、最近では対応ブラウザも増え、様々な形状でちゃんと傍点を表示できるようになりました。まだ、Edgeで表示できない点が残念ですが。^^;
今後、各ブラウザのCSS3サポートが進めば、新たな強調手段として活用できるようになってくるでしょうね。

(更新日：2017年07月10日)