WEB

【CSS】傍点（テキストの上に点）をつける方法

N.T
 

強調したい文字の上に打つ点、傍点を付ける方法です。

目次

1.疑似要素を使用

画像3

メリット
・傍点の大きさ、位置を調整できる

デメリット
・1文字ごとに<span></span>で囲む必要があるので、傍点をつけるテキストが長い場合は大変…

▼実装サンプル

HTML

<p class="text01">テキストに
  <span class="emphasis01">傍</span>
  <span class="emphasis01">点</span>をつけて
  <span class="emphasis01">強</span>
  <span class="emphasis01">調</span>させる</p>

 

CSS

.emphasis01 {
  display: inline-block;
  position: relative;
}

.emphasis01::before {
  position: absolute;
  top: -0.5em;
  left: 50%;
  transform: translate(-50%, 0);
  color: #fa3c5a;
  font-size: 1.5em;
  content: "・";
}

！注意！
spanにdisplay: inline-block;の指定がないと、意図せず改行が入ったときに、傍点がずれてしまいます。

画像11

<縦書きの場合>

画像6

CSS

body {
  writing-mode: vertical-rl;
  /*縦書きにする*/
}

.emphasis01 {
  display: inline-block;
  position: relative;
}

.emphasis01::before {
  position: absolute;
  top: 50%;
  right: -50%;
  transform: translate(0, -50%);
  color: #fa3c5a;
  font-size: 1.5em;
  content: "・";
}

 

2.「text-emphasis」プロパティを使用

メリット
・傍点をつけたいテキストを一括<span></span>で囲むだけなので、傍点をつけるテキストが長くても問題なし！

デメリット
・傍点のサイズが調整できない。
サイズは自動でフォントの50%になります。
位置は、「text-emphasis-position」プロパティを使用し、横書きモードで上か下、縦書きモードで右か左と指定できますが、標準で最適な位置に設置されるので使うことはほぼ無いと思います。

▼実装サンプル
・値：dotの場合
画像3

HTML

<p class="text02">テキストに
  <span class="emphasis02">傍点</span>をつけて
  <span class="emphasis02">強調</span>させる</p>

 

CSS

.emphasis02 {
  text-emphasis: dot #fa3c5a;
  -webkit-text-emphasis: dot #fa3c5a;
}

 
 
・値：circleの場合

画像3

HTML

<p class="text03">テキストに
  <span class="emphasis03">傍点</span>をつけて
  <span class="emphasis03">強調</span>させる</p>

 

CSS

.emphasis03 {
  text-emphasis: circle #fa3c5a;
  -webkit-text-emphasis: circle #fa3c5a;
}

 
 
<縦書きの場合>
最適な位置に設置されるので、横書きの場合と書き方は同じです。

画像6

2-1.「text-emphasis」プロパティの値

「text-emphasis」プロパティは「●」「・」以外にも、複数の値が指定できます。

・値：sesame

画像7 
.emphasis04 {
  text-emphasis: sesame #fa3c5a;
  -webkit-text-emphasis: sesame #fa3c5a;
}

 
 
・値：double-circle

画像8 
.emphasis05 {
  text-emphasis: double-circle #fa3c5a;
  -webkit-text-emphasis: double-circle #fa3c5a;
}

openを一緒に指定すると白抜きになります

画像9 
.emphasis06 {
  text-emphasis: open double-circle #fa3c5a;
  -webkit-text-emphasis: open double-circle #fa3c5a;
}

 
 
・値：triangle

画像10 
.emphasis07 {
  text-emphasis: triangle #fa3c5a;
  -webkit-text-emphasis: triangle #fa3c5a;
}

 

2-2.ブラウザサポート状況

IE以外のブラウザでサポートされています。（2021年6月24日現在）
FirefoxやSafari以外のブラウザでは、ベンダープレフィックス「-webkit-text-」をつける必要があります。

画像11

▼text-emphasisのブラウザサポート状況 | Can I use
https://caniuse.com/?search=text-emphasis

2-3.参考サイト

こちらの記事を参考にさせていただきました。
▼text-emphasis | MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/CSS/text-emphasis

  

3.サンプルコード

<横書きモード>

<縦書きモード>

 

N.T
平日はコーディング、週末は子供と公園を走り回っています。
データ分析・AIの専門家集団 GRI

GRIへのお問い合わせはこちらから[データ分析・AIの専門家集団「GRI」と一緒に仕事をしませんか？ お問い合わせお待ちしております]

関連の記事