アンダーラインやハイライト以外のテキスト装飾を使いたいなす…
それなら文字の上に点をつけて一味違うテキストにしよう！！
どうも〜！なるなるです！
シンプルなLP作成やブログでちょっと変わった装飾をしたい時ってありますよね！
よく見かける装飾は、
- 太字
- アンダーライン
- イタリック
- 赤文字
- ハイライト
などですかね！
もちろん先ほどの装飾は汎用性も高くていつもお世話になっているんですけど、少し変わった装飾をしたいって時ありますよね！
今回はあまり知られていないテキストの上に点をつけられるCSSプロパティ「text-emphasis」の使い方を、テキスト装飾の重要性を含めてご紹介します！
もくじ
text-emphasisとは
text-emphasisは、CSS3で導入されたショートハンドプロパティで文字の上に点(圏点)を付けて特定のテキストを強調するCSSです！
text-emphasisは、text-emphasis-styleとtext-emphasis-colorを一度に設定します。
次の章で詳しく解説しますが、2つのプロパティは以下のように使用します！
| text-emphasis-style | 点(圏点)の形の設定 |
| text-emphasis-color | 点(圏点)の色の設定 |
それでは早速text-emphasisを使い方に行きましょう！
●ショートハンドって？
複数のCSSプロパティを一つのプロパティで表現する方法で、この方法を使うとコードが簡潔になり、時間とスペースを節約することができます。
text-emphasisの使い方
text-emphasisの記述方法はとてもシンプルで、まずはデモを見てみましょう！
See the Pen text-emphasis-style by naryutaro (@naryutaro) on CodePen.
上記のコードの<p>タグで囲まれたテキストの上に赤色の塗りつぶされた点(圏点)が追加されてますね。
先ほどご紹介した、text-emphasis-styleとtext-emphasis-colorをご紹介します！
text-emphasis-style
text-emphasis-styleプロパティは、テキストの上部に配置される点(圏点)の形を設定します。
このプロパティの値として指定できるオプションは次のとおりです！
| 値 | 説明 |
| none | 圏点を使用しない。 |
| filled | 塗りつぶされた円 |
| open | 開いた円 |
| dot | 塗りつぶされた点 |
| circle | 開いた点 |
| double-circle | 二重の円 |
| triangle | 塗りつぶされた三角形 |
| sesame | ゴマのような形 |
上記のプロパティは下記にまとめておきます！
See the Pen text-emphasis-style by naryutaro (@naryutaro) on CodePen.
その他に文字列を使用してカスタムの点(圏点)を作成することもできます！
text-emphasis-color
text-emphasis-colorプロパティは、点(圏点)の色を設定できます。
background-colorなどと同じで好きなカラーコードを設定できるので、自由に設定してください！
対応ブラウザと使用上の注意
古いブラウザやIEでなければ基本的に対応しているので、使っても問題ないです！
ですが万が一表示されない場合は、下記のリンクから確認してください！
みんな大好きCaniuseです！笑
https://caniuse.com/?search=text-emphasis
使用上の注意として、点(圏点)は英語の文章ではあまり使われていないですよね。
トンマナを考えると、英語ではアンダーバーやハイライトを使う方が無難かなと僕は考えてます！
テキストが重要な理由
1.可読性と理解の向上
テキスト装飾をすることによってコンテンツが読みやすく、理解しやすくなりますよね。
先ほどの太字、イタリック体、下線などで重要な部分を強調し、目に入れてほしい情報をわかりやすくすることはとても重要です。
2.SEO(検索エンジン最適化)
適切なテキスト装飾するとSEOにも効果的です！
HTMLも関係してきますが、
- 見出しタグ（H1、H2など）
- 太字タグ(strong)
- リンクタグ(a)
など適切なタグを使用することで、検索エンジンがコンテンツの構造と重要なキーワードを理解するのに役立ちます。
まとめ
text-emphasisプロパティはいかがでしたか！
僕は以前、広告に使用するLPの参考を探している時にこのプロパティ見て「お〜〜」となったのを覚えてます。笑
もちろんポジションのabsoluteでも同様のことはできますが、こちらはコード1行で実装できるので是非使ってみてください。
ちなみにtext-emphasis-positionという点(圏点)の場所を横や下に配置できるプロパティもありますが、ほぼ使用することはないと思ってるので割愛しました。笑
それではあなたもwebデザイナーになるなる〜！
