WebサイトやLPで、強調させたい文字の上に点々を付ける方法について。
わりとこういったデザインのWebサイトやLPがあるのですが、頻出でもないのでコードを覚えていられず・・・
いつもあれ？となるのでこちらに記載しておこうと思います✍️
いくつか方法はあると思うのですが、中でも使い勝手の良い方法を2つピックアップします。
- text-emphasisを使う方法：👈簡単に実装したい場合はこっち
- backgroundを使う方法：👈点の位置などにこだわりたい場合
前提：強調したい文字の上に点をつけるHTML
HTMLは下記のようなイメージ。
点をつけたい箇所をspanタグで囲いクラスを付与します。（今回は.u-dot）
Loading code...text-emphasisで強調したい文字の上に点をつける方法
Loading code...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で強調したい文字の上に点をつける方法
Loading code...- 点のサイズ：
.06emの部分で調整 - 点と文字の間の余白：
padding-topで調整 - 点の色：
redの部分で調整
以上です！
