にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

CSS3なら傍点(圏点)で文字を強調できる [CSS3,テキスト]

スタイルシート(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サポートが進めば、新たな強調手段として活用できるようになってくるでしょうね。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---