• HOME > 
  • CSS > 
  • CSSのtext-emphasisの使い方【圏点(けんてん)...

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

投稿日:

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

カテゴリー記事のアイキャッチ画像
広告
広告

text-emphasisプロパティとは?

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

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

圏点の表示例

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

text-emphasisの書き方

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

text-emphasisの書き方

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

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

HTML

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

CSS

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

プレビュー

テキストの文字を強調する
リンク先のサムネイル
CSSのベンダープレフィックスとは?【初心者にもわかりやすく解説

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

スタイルの種類

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

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

filled黒抜き例:ダミーテキスト
open白抜き例:ダミーテキスト
none表示しない(初期値)例:ダミーテキスト
dot例:ダミーテキスト
sesame読点例:ダミーテキスト
circle例:ダミーテキスト
double-circle二重丸例:ダミーテキスト
triangle三角形例:ダミーテキスト

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

HTML

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

CSS

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

プレビュー

テキストの文字を強調する

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

HTML

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

CSS

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

プレビュー

テキストの文字を強調する

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

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

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

HTML

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

CSS

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

プレビュー

テキストの文字を強調する

まとめ

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

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

広告
広告

関連する記事

サムネイル

CSSのみでスムーススクロールを実装する【scroll-be……

2024年08月01日
スムーススクロールはCSSだけで実装できる? これまでスムーススクロールはJavaScriptで実装するものと思い込んでいたのですが、先日ふとしたきっかけで、C […]
サムネイル

CSSのinline-flexの使いどころ【flexによる横……

2024年05月29日
inline-flexはCSSのdisplayプロパティの値の一つで、横並びレイアウトを作ることができる「flex」にインライン効果を持たせた性質があります。
サムネイル

CSSのセレクターで前方一致や部分一致を使って指定する方法

2024年05月16日
CSSでは属性の値を前方一致や部分一致でセレクターに指定できます。IDやクラス以外のhrefといった属性値であれば指定できるので、例えばリンク先ごとに処理を変えることも可能です。
サムネイル

CSSでテーブルの先頭行や先頭列を固定する方法【sticky……

2024年04月12日
CSSのpositionプロパティの「sticky」を使えば、CSSだけでテーブルの行も列も簡単に固定することができるのでご紹介します。情報量の多い表を作る場合は、スクロールした時に項目名などの行や列は固定させておいたほうが見やすくなります。
サムネイル

CSSのwhite-spaceプロパティの使い方【半角スペー……

2024年03月07日
SSのwhite-spaceは、テキストにおける半角スペース・改行・タブの扱いと折り返しの有無を設定するプロパティです。
サムネイル

CSSのメディアクエリでスマホでのホバーの挙動の対策を行う【……

2023年10月01日
最終更新日:2023年09月28日
要素をタップしたときにホバー時のスタイルが適用され続けるという経験はありませんか?CSSだけで簡単にスマホでの疑似要素「hover」の挙動の対策を行う方法をご紹介します。
サムネイル

CSSの疑似クラス「:focus」の使い方【focus-wi……

2023年05月01日
最終更新日:2023年05月31日
CSSでは疑似クラスである「:focus」を用いることで、フォーカス時のスタイルを設定することが可能です。一方「:focus-within」は、その要素自体もしくは子要素にフォーカスがある状態で有効になります。