この記事は、そんな方に向けて書いています。
どうも！２歳になった娘のイヤイヤ期が始まり、子育ての難しさを早くも実感しているシュンヤです！（成長の証なので嬉しくもあるのですが・・・やっぱり大変です。）
さて、今回はCSSの話。
強調したかったり、注意を引きたい文章の上や横についている「・」や「、」などの点をデザインできる【text-emphasis】プロパティ。
このプロパティに【text-emphasis-position】プロパティを併せて使うことで、点の位置も変えることができるのです。
今回は、そんな【text-emphasis-position】プロパティについてもっと詳しく知りたいCSS初心者さんに向けて、
・text-emphasis-colorプロパティの基本的な使い方
の２本立てで分かりやすく解説していきます。
あまりメジャーなプロパティではありませんが、これを機会にぜひ覚えましょう。
目次
text-emphasis-positionプロパティとは
text-emphasis-positionプロパティの読み方
text-emphasis-positionは【テキスト-エンファシス-ポジション】と読みます。
日本語に訳すと【文章-強調-位置】と言う意味。
ちなみにemphasisはHTMLの＜em＞タグの略でもありますが、このタグには文字をイタリック体（斜体）にして、検索エンジンに対して強調の意味を伝える効果があります。
text-emphasis-positionプロパティの説明
text-emphasis-positionプロパティは、圏点（けんてん）の位置を指定できるプロパティです。
圏点とは傍点（ぼうてん）とも呼ばれ、強調させたい箇所、または注意を引きたい文章の上につける記号のことを言います。
よく小説や漫画などで見かける表現方法ですよね。
圏点は主にアジア圏内で見られる表現で、英語などに使うことはほとんどありません。
text-emphasis-positionプロパティの値
text-emphasis-positionのプロパティの値は次のとおりです。
| 値名 | 説明 |
|---|---|
| over right（初期値） | 右上 |
| over left | 左上 |
| under right | 右下 |
| unde left | 左下 |
ちなみに、日本語は自動で最適な場所に圏点が設置されるため、日本語に【text-emphasis-position】を使って位置を調節する必要はまずありません。
また、先ほど言ったように英語に使うこともほぼないので、【text-emphasis-position】はCSSの中でもトップクラスにマイナーな部類に入るプロパティでしょう。
text-emphasis-positionプロパティの対応ブラウザ
text-emphasis-positionの対応ブラウザは次のとおりです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 未対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
なお、FirefoxやSafari以外のブラウザでtext-emphasis-positionを使うときは、必ずベンダープレフィックス（接頭辞）をつける必要があります。
CSSは「草案段階」から始まり、いくつかのステップを踏んで開発が進みます。 最終的には勧告（仕様確定）をもって正式に使えるようになるのですが、GoogleやSafariなどのブラウザ開発側（ベンダー）が開発した拡張子をCSSプロパティと合わせて記述することで、仕様確定前でも使えるようになるのです。 拡張子はプロパティの前に付ける必要があり、頭に付ける言葉のことを接頭辞（プレフィックス）と言うため、２つを合わせてベンダー(製造元)プレフィックス(接頭辞)。 ベンダープレフィックスはブラウザごとに異なり、例えば、GoogleChromeやSafariの場合は【-webkit-】を頭に記述します。
text-emphasis-positionプロパティの基本的な使い方
text-emphasis-positionプロパティの使い方
それではさっそく使い方を解説していきます。必ずベンダープレフィックスを記述することを忘れないようにしましょう。
まずは「text-emphasis」プロパティを使って、圏点の種類と色の指定をしてから、位置を調節します。
ちなみに、圏点のサイズは自動でフォントの50%になります。
＜over right＞の場合
See the Pen
position_1 by shunya (@shunya1031)
on CodePen.
＜over left＞の場合
See the Pen
position_2 by shunya (@shunya1031)
on CodePen.
＜under right＞の場合
See the Pen
position_3 by shunya (@shunya1031)
on CodePen.
＜under left＞の場合
See the Pen
position_4 by shunya (@shunya1031)
on CodePen.
一つずつ解説しましたが、おそらく右と左で差はないように見えると思います。
そもそも最適な場所をブラウザが判別し、自動で点をつけてくれるので、使うとしたら上か下くらいでしょう。
text-emphasisプロパティの解説
上記のコードでは、圏点の種類と色を指定できる「text-emphasis」プロパティを併せて使っています。
このプロパティは「ショートハンドプロパティ」と言い、特定のプロパティを一括して指定することができるのです。
「text-emphasis」プロパティで一括指定できるプロパティは「style」と「color」の２つ。
参考までに、それぞれの値を掲載しておきますね。
ちなみに、「position」もまとめて指定できそうですが、別々に記述する必要があります。
text-emphasis-style
| 値名 | 説明 |
|---|---|
| none（初期値） | 圏点なし |
| filled | 圏点を黒抜きにする |
| open | 圏点を白抜きにする |
| dot | 点 |
| sesame | ゴマ |
| circle | 丸 |
| double-circle | 二重丸 |
| triangle | 三角形 |
ちなみに、”（ダブルクォーテーション）で好きな一文字を囲むことで、その文字を圏点にすることも可能です。
text-emphasis-color
| 値名 | 説明 |
|---|---|
| transparent（初期値） | 色なし（透明） |
| 色 | カラーネーム・#RRGGBB・RGB・RGBA |
色について簡単に解説すると、カラーネーム（青にしたいならblueと記述する）のほかに、R（赤）、G（緑）、B（青）を基準として３〜６桁の英数字で表す方法があります。
色の種類はたくさんあるので、カラーの早見表サイトなどを参考にしてラクをしましょう。「原色大辞典」
まとめ
いかがでしたか？今回は圏点の位置を指定できる「text-emphasis-position」プロパティの概要や使い方を解説しました。
値の説明の時にも言いましたが、日本語に圏点を付ける場合はデフォルトで最適な場所に設置されるし、英語ではそもそも圏点を使わないため、「position」を使って位置を変える機会は本当に少ないでしょう。
しかし、CSSについて学習を進めている方であれば、マイナーなプロパティも知識として覚えておくことが大切です。
そうした知識の積み重ねが、あなたのCSSスキル向上につながることでしょう。
この記事が、あなたのお役に立てれば嬉しいです。
最後までご覧いただきありがとうございました。
参考文献：htmlクイックリファレンス
参考文献：MDN Ｗeb Ｄocs
