見出しなどで文字の上に強調の丸をつける方法！コピペOK！

Webdesign

2024.04.19

当サイトには広告が含まれる場合があります。

LPなどで、あしらいとして強調するために文字の上に丸をつけたい！
でも画像じゃなくてできるならcssでやりたい！
そんなお悩みを簡単に解決しちゃいます。

意外と見るデザイン！見出しやあしらいを画像でやるのはSEO的にも…

こんな方におすすめ
今回の完成イメージはこちら
まとめ

こんな方におすすめ

コーディング初心者の方
デザイン段階ではあまり深く考えずにつけたけどコーディングの仕方がわからない
できるだけ簡単にやりたい！

今回の完成イメージはこちら

このように文字の上に「ここが大事！」みたいな強調のあしらいを簡単につける方法をお伝えします。
ネットで調べるといろんな方法が出てきますが、
これが一番簡単な気がします！

①強調したい文字をspanタグで囲む

まずは、HTMLにて強調したい部分を<span>タグで囲み、クラスをつけます。
こちら今回クラスは、「dot-text」にしております。

 <div class="dot_sample">
    <p><span class="dot-text">特</span><span class="dot-text">別</span><span class="dot-text">限</span><span class="dot-text">定</span>キャンペーン</p>
</div>

例えば今回の場合、「特別限定」の上に丸(⚫︎)をつけたいので、
一文字ずつspanタグで囲んでいきます

②cssで位置調整

続いて、丸ぽちの部分をcssにて調整します。

.dot-text{
  position: relative;
}
.dot-text::before{
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: auto;
  content: "";
  padding-top: 10px;
  background: radial-gradient(circle 7px,#b5091f 50%,transparent 50%);

⚫︎親である、.dot-textを基準にするためにrelativeを指定します。

基本はこれだけで完成します！！！！！