【初心者でもわかる】CSSで文字の上に点「・」をつけて強調させる方法

どうも7noteです。こ・ん・な・か・ん・じ・に文字の上に点をつける方法

2種類の方法で文字の上に付けていきたいと思います。

方法１： HTMLだけで行なう方法

index.html

<!-- HTMLだけで行なう方法 -->
<p><ruby>こ<rt>・</rt>ん<rt>・</rt>に<rt>・</rt>ち<rt>・</rt>は<rt>・</rt></ruby></p>

完成例

こ・ん・に・ち・は・

ただ、タグの意味に対して使い方が間違っているので非推奨です。
<ruby>は本来漢字等にルビを振るためにあるタグなので、装飾や強調として使う使い方はあまり正しい使い方ではありません。

方法2： CSSの疑似要素を使って作る方法

index.html

  <p class="dots"><span>こ</span><span>ん</span><span>に</span><span>ち</span><span>は</span></p>

style.css

.dots span {
  position: relative; /* 基準値とする */
}
.dots span::before {
  content: "・";       /* 文字の上に置くものを指定 */
  position: absolute; /* 相対位置とする */
  top: -1em;          /* 縦方向の表示位置を調整（-1emくらいがちょうどいいかんじ） */
  left: 0;            /* 横方向の表示位置を調整 */
}

サンプル

色を変えたり、「・」以外の文字や画像などでも可能です。

方法3： text-emphasisを使う

IE無視でもいいならこのプロパティが一番綺麗に実装することができます。

index.html

  <p class="dots">こんにちは</p>

style.css

p {
  text-emphasis: filled;
  -webkit-text-emphasis: filled;
}

こちらの方法の方が装飾としてCSSを利用したやり方なので、綺麗です。

※@scivolaさんに教えていただきました。ありがとうございます。

まとめ

見た感じHTMLだけでいけるからといってタグの意味にそぐわない作りをしていると、googleに嫌われるページになってしまう可能性があります。
装飾的な意味でつけるものはCSSで作るような意識をしてコーディングをやっていきましょう。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ