スタイルシート(CSS)を使って文字を強調する方法にはいくつかありますが、CSS3では強調として使える装飾に「傍点(圏点)」も加わりました。テキストの上に点を描くことで強調できます。傍点の色は自由に指定でき、形も丸形や三角形や読点(ゴマ)型などから選択できます。
テキストの上に点を打つ「傍点(圏点)」を使って文字を強調できるCSS3
CSSで表現できる「テキストの強調方法」というと、太字で表示したり、文字色を赤色にしたり、下線を引いたり、背景色を使って蛍光ペンでマーキングしたように見せたり……といった装飾がよく使われてきたでしょうか。単にそうするくらいしか強調する方法がなかったとも言えますが(まあ充分ですけども)。
CSS3では、日本語文の強調方法として使われてきた傍点(圏点)も表示できます。
丸(ドット)で傍点を打つほか、二重の円・三角形・ゴマなどでの傍点も描画できます。
以下のサンプルを、傍点の表示対応ブラウザで閲覧すると、赤丸や青丸などの傍点が見えるはずです。
このように傍点が打てます。傍点には自由に色を付加できます。文字の上に色の付いた点が見えるでしょう。
本稿執筆時点ではまだ表示可能なブラウザに制限があります。Firefox・Safariでは表示可能です。Chrome・Operaでも表示可能ですが、ベンダープレフィックス「-webkit-」を付ける必要があります。残念ながら、IEやEdgeでは表示できません。
傍点(圏点)を打つtext-emphasisプロパティの書き方
このような傍点を指定する方法はとても簡単で、以下のようにtext-emphasisプロパティを使うだけです(※本来は1行だけで済みますが、ここではベンダープレフィックス「-webkit-」を付加した行も加えています)。
CSSソース
strong {
-webkit-text-emphasis: filled circle red;
text-emphasis: filled circle red;
}
上記のCSSソースでは、strong要素に対する装飾として、
- 塗りつぶし形状に「塗りつぶし」(filled)を選択
- 傍点の形状に「円」(circle)を選択
- 傍点の色に「赤色」(red)を指定
という傍点を付加しています。
実際にHTMLに適用してみるとこのように傍点が打たれます。
赤色で塗りつぶされた円形の傍点が表示されているはずです。(対応ブラウザで見た場合は)
傍点(圏点)の形状や塗りつぶしのパターンと配色は様々に指定できる
text-emphasisプロパティで描ける傍点の形状は、丸形だけではありません。以下のような複数の選択肢が用意されています。
- 塗りつぶしの形状には、以下の2種類が指定できます。
filled(塗りつぶし)と、open(塗りつぶさない)
- 傍点の形状には、以下の各形状が指定できます。
circle(円)、double-circle(二重円)、dot(点)、triangle(三角形)、sesame(ゴマ)
- 色は、CSSでの色指定が使えます。
ゴマ型は「セサミ」ですが、スペルは「sesami」ではなく「sesame」なので注意しましょう。(^_^;)
傍点(圏点)の形状や塗りつぶしパターンの表示例1
例えば以下のようにCSSソースを書くと、塗りつぶさない(open)三角形(triangle)で青色(blue)の傍点が表示できます。
CSSソース
strong {
-webkit-text-emphasis: open triangle blue;
text-emphasis: open triangle blue;
}
これを適用してみると、
例えばこのように三角形の傍点になります。
塗りつぶさないパターンだと薄めに見えるので、強調したい度合いに応じて選ぶと良いかも知れません。
塗りつぶしの有無と形状がいろいろ選べるので、単なる「太字」などとは違って、その場のデザインなどに合わせた(目立つ)強調方法にできるかもしれません。
傍点(圏点)の形状や塗りつぶしパターンの表示例2
さらに以下のようにCSSソースを書くと、塗りつぶす(filled)ゴマ(sesame)で紫色(#cc000cc)の傍点が表示できます。
CSSソース
strong {
-webkit-text-emphasis: filled sesame #cc00cc;
text-emphasis: filled sesame #cc00cc;
}
これを適用してみると、
例えばこのようにゴマの傍点になります。
ゴマというよりも読点「、」っぽいですけどもね。(^_^;)
円形・二重丸・三角形などの形状の中では、このゴマ型が一番目に付きそうな気がします。
このtext-emphasisプロパティは、本記事の初版執筆時点(2014年頃)では、Webkit系ブラウザでしか表示できなかった上、傍点の形状としてsesame(ゴマ)を指定した場合は何も表示されないなどの未実装が多々ありました。しかし、最近では対応ブラウザも増え、様々な形状でちゃんと傍点を表示できるようになりました。まだ、Edgeで表示できない点が残念ですが。^^;
今後、各ブラウザのCSS3サポートが進めば、新たな強調手段として活用できるようになってくるでしょうね。