WebサイトやLPで、強調させたい文字の上に点々を付ける方法について。

わりとこういったデザインのWebサイトやLPがあるのですが、頻出でもないのでコードを覚えていられず・・・
いつもあれ?となるのでこちらに記載しておこうと思います✍️
いくつか方法はあると思うのですが、中でも使い勝手の良い方法を2つピックアップします。
- text-emphasisを使う方法:👈簡単に実装したい場合はこっち
- backgroundを使う方法:👈点の位置などにこだわりたい場合
前提:強調したい文字の上に点をつけるHTML
HTMLは下記のようなイメージ。
点をつけたい箇所をspanタグで囲いクラスを付与します。(今回は.u-dot
)
<div>
<span className='u-dot'>こんな感じ</span>で文字の上に点をつける
</div>
text-emphasisで強調したい文字の上に点をつける方法
.u-dot {
text-emphasis: filled;
-webkit-text-emphasis: filled;
}
text-emphasisは縦書きや、点を文字の下につけることも可能です。
その場合にはtext-emphasis-position
を利用します✍️
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-position
- 点の色:
text-emphasis-color
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color - 点の種類:
text-emphasis-style
https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color
backgroundで強調したい文字の上に点をつける方法
.u-dot{
background: top left / 1em .5em repeat-x radial-gradient(circle, red .06em, rgba(0,0,0,0) .06em);
padding-top: .2em;
}
- 点のサイズ:
.06em
の部分で調整 - 点と文字の間の余白:
padding-top
で調整 - 点の色:
red
の部分で調整
以上です!