• CSS

CSSのtext-emphasisの使い方【圏点（けんてん）を表示】

投稿日:2023年01月16日（最終更新日:2023年03月10日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

text-emphasisプロパティとは？

text-emphasisは、文字を強調したいときに付け加える圏点（けんてん）を表示するプロパティです。

下の図で文字の上に表示されている黒い丸が「圏点（けんてん）」です。傍点（ぼうてん）と呼ばれることもあります。

text-emphasisでは、圏点のスタイル（形状）と色を自由に設定することが可能です。

text-emphasisの書き方

text-emphasisは次のように、スタイルと色の値を並べて記述して使用します。（色の記述は省略することができます）

ベンダープレフィックスが必要なブラウザもあるので注意

text-emphasisはすべてのブラウザが完全に対応しているわけではありませんので、実際に使用する際にはベンダープレフィックスを付ける必要があります。

<p>テキストの<span class="sample">文字</span>を強調する</p>

.sample{
    -webkit-text-emphasis:filled;/*Chrome用*/
    text-emphasis:filled;
}

ベンダープレフィックスについて詳しくはこちらのページをご覧ください。

CSSのベンダープレフィックスとは？【初心者にもわかりやすく解説

ベンダープレフィックスをプロパティの接頭辞として付与して記述することで、各ブラウザのベンダー（開発元）が開発した拡張機能のCSSを先行実装できるようになります。べンダープレフィックスにはブラウザごとの接頭辞が存在します...【もっと読む】

スタイルの種類

text-emphasisプロパティで表示する圏点は、二重丸や三角形などの形状を設定することが可能です。

スタイルとして用意されている値は次の通りで、「filled（黒抜き）」「open（白抜き）」と形状を組み合わせて設定します。

filled（黒抜き）とtriangle（三角形）を組み合わせると次のようになります。（色は赤を設定）

<p>テキストの<span class="sample">文字</span>を強調する</p>

.sample{
    -webkit-text-emphasis:filled triangle red;/*Chrome用*/
    text-emphasis:filled triangle red;
}

open（白抜き）とtriangle（三角形）を組み合わせると次のようになります。（色は赤を設定）

<p>テキストの<span class="sample">文字</span>を強調する</p>

.sample{
    -webkit-text-emphasis:open triangle red;/*Chrome用*/
    text-emphasis:open triangle red;
}

任意の文字や記号を圏点にする

text-emphasis-styleプロパティを使えば、前述の円や三角形以外でも任意の文字や記号を圏点として表示することが可能です。

下の例では、星マークを表示させています。色はtext-emphasis-colorを用いて指定します。

<p>テキストの<span class="sample">文字</span>を強調する</p>

.sample{
    -webkit-text-emphasis-style:"★";
    text-emphasis-style:"★";/*任意の記号*/
    -webkit-text-emphasis-color:red;
    text-emphasis-color:red;/*色*/
}

まとめ

以上が、text-emphasisプロパティの使い方です。

とても簡単に圏点を表示させることができますので、本文中に目立たせたい語句がある場合には活用してみてはいかがでしょうか？