どうも！２歳になった娘が最近おぼえた「あとー（ありがとう）」を聞きたくて、ついお菓子をあげすぎて妻に怒られたシュンヤです・・・。
さて、今回はCSSの話。
文章で注意すべきところを示すために、文字の上についている点々ってよく見かけますよね。
あのデザインを設定できるのが【text-emphasisプロパティ】です。
しかも、ただの黒い点だけでなくさまざまな種類にアレンジできるのですが、
と、よく分からない人も少なくないでしょう。
というわけで今回は、そんな方に向けて
・text-emphasisプロパティの基本的な使い方
・似たデザインができるCSSプロパティの説明
について分かりやすく解説していきます。CSSを学び始めた初心者さんはぜひ最後までご覧ください。
text-emphasisプロパティとは
text-emphasisプロパティの読み方
text-emphasisは「テキスト-エンファシス」と読みます。
そのまま訳すと「文章-強調」という意味。
HTMLタグにも、emphasisを略した＜em＞タグがありますが、こちらは文字を斜体にし、文章に強調の意味を持たせる効果があります。
text-emphasisプロパティの説明
text-emphasisは文字に圏点（けんてん）を付けたり、圏点の色を変えることができるプロパティです。
圏点とは傍点（ぼうてん）とも言い、注意をすべきところ、または強調の意味を持たせたい文字の上に付ける”・”などの記号のことを言います。
1文字ごとに１圏点をつけることが一般的なルールで、主にアジア圏内で使われているようですね。
text-emphasisはショートハンドプロパティ
通常、cssプロパティは1つのデザインに1つの値を指定するところ、text-emphasisは【ショートハンドプロパティ】といい、複数のデザインを一括して指定することができます。
一括して指定することができるのは、以下の２つのプロパティです。
| プロパティ名 | 説明 |
|---|---|
| text-emphasis-style | 圏点の種類に関するデザイン |
| text-emphasis-color | 圏点の色に関するデザイン |
ちなみに、ショートハンドプロパティで記述する値に、順番は関係ありません。
それぞれの値を「半角スペース」で区切るだけです。
一つ一つ分けて記述することもできますが、一般的には、コードの記述量が少なくて済むショートハンドを使うことの方が多いでしょう。
text-emphasisプロパティの値
text-emphasisはショートハンドプロパティなので、先ほど説明した２つのプロパティに準じた値になります。
表にすると次のとおりです。
text-emphasis-style
| 値名 | 説明 |
|---|---|
| none（初期値） | 圏点なし |
| filled | 圏点を黒抜きにする |
| open | 圏点を白抜きにする |
| dot | 点 |
| sesame | ゴマ |
| circle | 丸 |
| double-circle | 二重丸 |
| triangle | 三角形 |
ちなみに、filled【黒抜き】とopen【白抜き】は、それぞれの圏点と合わせて使うことができます。
（例えば、 filled circleで黒抜きの丸、open circleで白抜きの丸など。）
また、🍎など好きな1文字を圏点にすることも可能で、その際は”（ダブルクォーテーション）で文字を囲みます。
text-emphasis-color
| 値名 | 説明 |
|---|---|
| transparent（初期値） | 色なし（透明） |
| 色 | カラーネーム・#RRGGBB・RGB・RGBA |
色について簡単に解説すると、赤にしたいときは【red】と記述する【カラーネーム】のほかに、R（赤）、G（緑）、B（青）を基準として３〜６桁の英数字で表す方法があります。
色の種類はたくさんあって、一つ一つ覚えるのは大変なので、カラーの早見表サイトなどを参考にしましょう。「原色大辞典」
text-emphasisプロパティの対応ブラウザ
text-emphasisの対応ブラウザは次のとおりです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 部分対応 |
| Edge | 部分対応 |
| Firefox | 完全対応 |
| nternet Explorer | 未対応 |
| Opera | 部分対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 部分対応 |
| Android版Chrome | 部分対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 部分対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 部分対応 |
なお、firefoxやsafari以外のブラウザでは、CSSを記述する際にベンダープレフィックス（接頭辞）をあわせて書く必要があります。
しかし、ベンダープレフィックスをCSSプロパティに合わせて記述することで、仕様の確定前でも使えるようになるのです。
CSSの拡張機能のようなものと覚えましょう。
ちなみに、GoogleChromeやSafari、OperaでCSSを実装させる際のベンダープレフィックス（接頭辞）は【-webkit-】です。
text-emphasisプロパティの基本的な使い方
text-emphasisプロパティの使い方
それではさっそく使い方を解説していきます。
ちなみに、圏点の大きさはフォントの50%となります。
See the Pen
OJRrzrq by shunya (@shunya1031)
on CodePen.
カンタンでしたね。こうして際立たせることで、注意を引く文章をつくることができます。
text-emphasisと似たデザインができるtext-decoration
これまで圏点（けんてん）の設定ができるtext-emphasisの説明をしてきましたが、ここでは似たデザインができるプロパティの紹介をします。
text-decorationの説明
text-decorationは「テキスト–デコレーション」と読み、文章にアンダーラインなどの装飾的な線を実装することができるプロパティです。
ちなみにtext-emphasisとおなじ【ショートハンドプロパティ】で、線の種類や場所、色などをまとめて指定することができます。
text-decorationの基本的な使い方
text-decorationで一括指定できるプロパティは次の３つです。
| プロパティ名 | 説明 |
|---|---|
| text-decoration-line | 線の場所（上・下・取消しなど） |
| text-decoration-style | 線の種類（一本線・波線・点など） |
| text-decoration-color | 線の色 |
今回は、全部使ってみましょう。
See the Pen
gOwZoyq by shunya (@shunya1031)
on CodePen.
まとめ
いかがでしたか？今回は、text-emphasisの概要と使い方、似たデザインができるCSSプロパティについて解説しました。
あまり使うことがないように思われますが、文字が強調されることによって、意外にも文章にメリハリがつきます。
知っておいて損はないプロパティですので、これを機会にたくさん練習して覚えましょう。
この記事が、あなたのお役に立てれば嬉しいです。
最後までご覧いただきありがとうございました。
参考文献：htmlクイックリファレンス
参考文献：MDN Web Docs
