人気の記事

エックスサーバーでWordPressを削除する方法

エックスサーバーでWordPressを削除する方法

  • WordPress
  • ドメイン・サーバ
GitHub経由でPushしてxserverに自動デプロイする｜GitHub Actions

GitHub経由でPushしてxserverに自動デプロイする｜GitHub Actions

  • GitHub
【所要時間たった10分】誰でも簡単！WordPressを始める5ステップ｜エックスサーバー

【所要時間たった10分】誰でも簡単！WordPressを始める5ステップ｜エックスサーバー

  • WordPress
  • ドメイン・サーバ
『デジハリオンラインWebデザイナー講座』を受講した現役フリーランスの本音レビュー。後悔していることは？

『デジハリオンラインWebデザイナー講座』を受講した現役フリーランスの本音レビュー。後悔していることは？

  • フリーランス
当サイトは、一部記事に広告を含みます

【コピペ◎】CSSで強調したい文字の上に点をつける｜コード解説付き

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

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の部分で調整

以上です！

---

記事が気に入ったら、ぜひ応援いただけると更新がんばれます☕️

Buy Me A Coffee