文章を強調する点を、現時点で一番きれいにCSSで書く方法

ブログ

2019.03.13 コーディング

文章を強調する点を、現時点で一番綺麗にCSSで書く方法

Webでも紙でもよく見かける↓のような点。

文章を強調する点

正式には圏点、傍点、脇点などと呼ばれるこの点ですが、コーディングで再現しようとすると
意外とうまくいかなかったりします。

 

ネットで探してみると下記のような方法が見つかります。

  • CSSの「text-emphasis」プロパティを使う
  • CSSの「ruby」プロパティを使う
  • CSSの「background」プロパティを使い、背景として点の画像を敷く
  • 文字ごと画像にしてしまう

などなどいくつか方法が出てきますが、それぞれ下記のような問題点があります。

  • CSSの「text-emphasis」:IEやEdgeは対応していない
  • CSSの「ruby」:ブラウザによって見た目が異なる
  • CSSの「background」:色やサイズを変更したい場合に面倒
  • 文字ごと画像:文字・色・サイズを変更したい場合に面倒

 

そこで、現時点で一番筆者がおすすめの方法は
該当文字を<span>タグで囲い、CSSの「:before擬似要素」で点を挿入。
CSSの「position」プロパティなどを使い位置調整する、というものです。

コードは下記の通り

何も難しいことはしてません!

 

疑似要素に対するCSSは下記でも大丈夫です。

点をどのように再現するかですね。その辺はお好みで。

 

丸の大きさや色も自由自在なので、一番綺麗にデザインを再現できるのではないでしょうか。

5大ブラウザ(Chrome、IE、Firefox、Edge、Safari)ごとの崩れも起きません!(※最新版のみ検証)

これならディレクターやデザイナーに文句を言われることもないでしょう。

 

デザインの再現度はコーダー次第。

制作はみんな仲良く進めたいものですね。

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら