この記事は、そんな方に向けて書いています。
どうも！最近、YouTubeで真冬のソロキャンプ動画にハマっているシュンヤです！
（降り積もる雪・・・、暖かいテントの中で飲むキンキンのビールが最高にうまそう・・・。）
さて、今回はCSSの話。
文章を強調したり注意を引くために、文字の上に付いている「・」などの点。
よく小説や漫画などで見かけるこのデザインは、【text-emphasis-style】プロパティを使うことで指定できます。
また、【text-emphasis-color】プロパティを併せて使うことで、点の色を変えることもできるのです。
今回は、そんな【text-emphasis-color】プロパティについて知りたいCSS初心者さんに向けて、
・text-emphasis-colorプロパティの基本的な使い方
・text-emphasis-colorプロパティの応用的な使い方
の３本立てで分かりやすく解説していきます。ぜひ最後までご覧ください。
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（青）を基準として３〜６桁の英数字で表す方法があります。
色の種類はたくさんあるので、一つ一つ覚えようとするのはとっても大変。
カラーの早見表サイトなどを参考にしてラクをしましょう。「原色大辞典」
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以外で使う場合は、ベンダープレフィックス（接頭辞）を必ずつけましょう。
CSSはいくつかのステップを経て開発が進み、最終的には勧告（仕様確定）をもって正式に採用されます。 簡単にいうと、ベンダープレフィックスとはCSSの拡張機能のようなものと覚えましょう。
しかし、GoogleやSafariなどのブラウザ側（ベンダー）が開発した接頭辞（プレフィックス）を使うことで、仕様が確定される前でもそのCSSを使うことができるようになるのです。（例えば、GoogleChromeやSafariのプレフィックスは【-webkit-】）
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 Ｗeb Ｄocs
