【text-emphasis-color】初心者でもわかる!圏点の色の変更方法を解説

text-emphasis-colorの詳しい情報や実際の使い方を知りたい!

この記事は、そんな方に向けて書いています。

どうも!最近、YouTubeで真冬のソロキャンプ動画にハマっているシュンヤです!
(降り積もる雪・・・、暖かいテントの中で飲むキンキンのビールが最高にうまそう・・・。)

さて、今回はCSSの話。

文章を強調したり注意を引くために、文字の上に付いている「・」などの点。

よく小説や漫画などで見かけるこのデザインは、【text-emphasis-style】プロパティを使うことで指定できます。

また、【text-emphasis-color】プロパティを併せて使うことで、点の色を変えることもできるのです。

今回は、そんな【text-emphasis-color】プロパティについて知りたいCSS初心者さんに向けて、

・text-emphasis-colorプロパティの概要
・text-emphasis-colorプロパティの基本的な使い方
・text-emphasis-colorプロパティの応用的な使い方

の3本立てで分かりやすく解説していきます。ぜひ最後までご覧ください。

text-emphasis-colorプロパティとは

text-emphasis-colorプロパティの読み方

text-emphasis-colorは【テキスト-エンファシス-カラー】と読みます。

日本語に訳すと【文章-強調-色】と言う意味。

emphasisはHTMLの<em>タグの略でもありますが、このタグには文字を斜体にして強調の意味を持たせる効果があります。

text-emphasis-colorプロパティの説明

text-emphasis-colorプロパティは、圏点(けんてん)の色を指定できるプロパティです。

圏点とは傍点(ぼうてん)とも言い、強調したかったり注意を引きたい文章の上につける”・”や”、”などの記号のこと。

小説や漫画などにはよく見られる表現方法で、日本を始め主にアジア圏で使われています。

text-emphasis-colorプロパティの値

text-emphasis-colorのプロパティの値は次のとおりです。

値名 説明
transparent(初期値) 色なし(透明)
カラーネーム・#RRGGBB・RGB・RGBA

色について簡単に解説すると、カラーネーム(青にしたいならblueと記述する)のほかに、R(赤)、G(緑)、B(青)を基準として3〜6桁の英数字で表す方法があります。

色の種類はたくさんあるので、一つ一つ覚えようとするのはとっても大変。

カラーの早見表サイトなどを参考にしてラクをしましょう。「原色大辞典」

text-emphasis-colorプロパティの対応ブラウザ

text-emphasis-colorの対応ブラウザは次のとおりです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 未対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

なお、text-emphasis-colorをFirefoxやSafari以外で使う場合は、ベンダープレフィックス(接頭辞)を必ずつけましょう。

MEMO「ベンダープレフィックスとは?」

CSSはいくつかのステップを経て開発が進み、最終的には勧告(仕様確定)をもって正式に採用されます。
しかし、GoogleやSafariなどのブラウザ側(ベンダー)が開発した接頭辞(プレフィックス)を使うことで、仕様が確定される前でもそのCSSを使うことができるようになるのです。(例えば、GoogleChromeやSafariのプレフィックスは【-webkit-】)

簡単にいうと、ベンダープレフィックスとはCSSの拡張機能のようなものと覚えましょう。

text-emphasis-colorプロパティの基本的な使い方

text-emphasis-colorプロパティの使い方

それではさっそく使い方を解説していきます。必ずベンダープレフィックスを記述することを忘れないようにしましょう。

ちなみに、圏点のサイズは自動でフォントの50%になります。

まずは「text-emphasis-style」で点の種類を指定し、色を指定しましょう。コードは下記のとおりです。

See the Pen
dyOPgQL
by shunya (@shunya1031)
on CodePen.

上記のコードでつかった「text-emphasis-style」プロパティの値を、参考までに掲載しておきますね。

 

値名 説明
none(初期値) 圏点なし
filled 圏点を黒抜きにする
open 圏点を白抜きにする
dot
sesame ゴマ
circle
double-circle 二重丸
triangle 三角形

この他にも、”(ダブルクォーテーション)で任意の一文字を囲むことで、その文字を圏点として指定することもできます。

 

text-emphasis-colorの応用的な使い方

これまでtext-emphasisの基本的な使い方を説明してきましたが、ここからは応用的な使い方について解説していきます。

圏点の種類と色の一括指定

先ほどのコードを使った例では、「style」と「color」を別々に指定しましたが、「text-emphasis」プロパティを使うことで、圏点の種類と色を一括して指定することができます。

「text-emphasisプロパティ」はショートハンドプロパティと言い、特定のプロパティをまとめて指定できるのです。

それぞれの値を半角スペースで区切るだけでOKなので、実際にやってみましょう。

See the Pen
color_2
by shunya (@shunya1031)
on CodePen.

今回紹介したものだけではなく、ショートハンドプロパティにはいくつも種類があります。

別々に記述しても問題はありませんが、一般的にはコードの記述量が少ないショートハンドプロパティを使うことが一般的でしょう。

圏点の場所を変える【text-emphasis-position】

圏点は初期設定では最適な場所に自動で置かれますが、「text-emphasis-position」を併せて記述することで、任意の場所に設置することができます。

positionは「text-emphasis」プロパティには含まれないため、別々に記述しましょう。

text-emphasis-positionの値

値名 説明
over right(初期値) 右上
over left 左上
under right 右下
unde left 左下

 

実際に使ってみよう

コードは下記のとおりです。

See the Pen
color_3
by shunya (@shunya1031)
on CodePen.

まとめ

いかがでしたか?今回は圏点の色を指定できる【text-emphasis-color】プロパティの概要や使い方、ショートハンドプロパティで色とまとめて指定する方法などを解説しました。

圏点を使うことで、伝えたいことがグッと目立つ文章を書くことができます。

また圏点の色を変えることで、フォントの色や背景にマッチさせることもできるのです。

あまりメジャーなプロパティではありませんが、これを機会に学習し、あなたのCSSスキルの向上に役立てていただければ嬉しいです。

最後までご覧いただきありがとうございました。

参考文献:htmlクイックリファレンス 
参考文献:MDN Web Docs