こんにちは！このあいだ、北海道の親戚が送ってくれたジンギスカンのあまりの美味さに感動したシュンヤです！
（油がまったくしつこくなくて、お腹の限界まで食べちゃいました・・・。）
さて、今回はCSSの話。
注意を引きたかったり、注目してほしい文章の上についている「・」などの黒い点。
よく漫画や小説などで見かけますよね。
今回紹介する【text-emphasis-style】プロパティを使うことで、様々な種類の点を文章に付けることができるのですが、
とよく分かっていない方も少なくないでしょう。というわけで今回は、そんな方に向けて
・text-emphasis-styleの基本的な使い方
・text-emphasis-styleの応用的な使い方
の３本立てで解説していきます。
わかりやすく説明していくので、CSSを学び始めたばかりの初心者さんはぜひ最後までご覧ください。
text-emphasis-styleプロパティとは
text-emphasis-styleプロパティの読み方
text-emphasis-styleは【テキスト-エンファシス-スタイル】と読みます。
日本語に訳すと【文章-強調-型】と言う意味。
ちなみに、HTMLの＜em＞タグもemphasisの略ですが、こちらは文字を斜体にして強調する効果があります。
text-emphasis-styleプロパティの説明
text-emphasis-styleプロパティは、文字の上に付ける圏点（けんてん）の種類を指定できるプロパティです。
圏点とは傍点（ぼうてん）とも言い、強調したかったり注意を引きたい文章の上につける”・”などの記号のこと。
日本を始め、主にアジア圏内で使われる表現であり、英語などに使われることはほぼありません。
text-emphasis-styleプロパティを使うことで、黒い点だけでなくさまざまな種類にアレンジできるので、次で詳しく説明します。
text-emphasis-styleプロパティの値
text-emphasis-styleのプロパティの値は次のとおりです。
| 値名 | 説明 |
|---|---|
| none（初期値） | 圏点なし |
| filled | 圏点を黒抜きにする |
| open | 圏点を白抜きにする |
| dot | 点 |
| sesame | ゴマ |
| circle | 丸 |
| double-circle | 二重丸 |
| triangle | 三角形 |
この他にも、任意の一文字を指定することもできます。
例えば🍎を圏点にしたい場合は、”（ダブルクォーテーション）で、”🍎”←このように文字を囲みましょう。
また、＜filled＞と＜open＞は他の値と合わせて使うことができます。
（例えば、filled circleで●、open circleで◯など。）
text-emphasis-styleプロパティの対応ブラウザ
text-emphasis-styleの対応ブラウザは次のとおりです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| Internet Explorer | 未対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
なお、FirefoxとSafari以外のブラウザでtext-emphasis-styleを使う場合は、ベンダープレフィックス（接頭辞）をつけましょう。
ベンダープレフィックスとはCSSの拡張機能のようなものと覚えましょう。
CSSはいくつかのステップを経て仕様が確定され、正式に使えるようになります。
しかし、特定の文字をプロパティ名の前に記述することで、確定前でも実装することができるのです。
その特定の文字（GoogleChromeやSafariの場合は【-webkit-】）を、ベンダープレフィックス（接頭辞）と言います。
text-emphasis-styleプロパティの基本的な使い方
text-emphasis-styleプロパティの使い方
それではさっそく使い方を解説していきます。
ちなみに、圏点のサイズは自動でフォントの50%になります。
See the Pen
GRjzqBr by shunya (@shunya1031)
on CodePen.
CSSの適用方法【クラスセレクタ】について
CSSの適用方法【クラスセレクタ】について
今回CSSを適用させるのに採用した方法は【クラスセレクタ】と言う方法です。
同じクラス名（HTMLのclass属性に指定した値）をもつ全ての要素に、同じスタイルを適用させるセレクタのことで、．（ピリオド）に続いてクラス名を書きます。
CSSを適用させる方法はいくつかありますが、よく使う方法なので覚えておきましょう。
text-emphasis-styleの応用的な使い方
これまでtext-emphasis-styleの基本的な使い方を説明してきましたが、ここからは応用的な使い方について解説していきます。
圏点の種類と色の一括指定
通常１つのCSSに対して１つのデザイン適用されるところですが、ショートハンドプロパティである「text-emphasisプロパティ」を使うことで、圏点の種類と色を一括して指定することができます。
一括指定する際、記述する値の順番は関係なく、半角スペースで区切るだけです。
実際にスタイルとカラー、まとめて指定してみましょう。
See the Pen
eYdxzPx 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 | 左下 |
なお、日本語に圏点を付ける場合は、デフォルトで最適な場所に設定されるため、positionは基本的には使いません。
実際に使ってみよう
See the Pen
ZEpwOVV by shunya (@shunya1031)
on CodePen.
まとめ
いかがでしたか？今回は圏点の種類を指定できる【text-emphasis-style】プロパティの概要や使い方、ショートハンドプロパティで色とまとめて指定する方法などを解説しました。
圏点は英語などではほとんど使われていないためか、まだ一部のブラウザでは完全に対応していません。
しかし、日本では強調したい文章などによく使われる手法なので、これを機会にたくさん練習をして覚えましょう。
この記事が、あなたの役に立てれば嬉しいです。最後までご覧いただきありがとうございました。
参考文献：htmlクイックリファレンス
参考文献：MDN Ｗeb Ｄocs
