文章を強調する点を、現時点で一番綺麗にCSSで書く方法 | ホームページ制作・Webマーケティング

2019.03.13 #コーディング

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

フロントエンド

Webでも紙でもよく見かける↓のような点。
文章を強調する点
正式には圏点、傍点、脇点などと呼ばれるこの点ですが、コーディングで再現しようとすると
意外とうまくいかなかったりします。

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

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

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

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

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

<!-- HTML -->
<p>
  <span>キ</span><span>ー</span><span>ワ</span><span>ー</span><span>ド</span>
</p>

キーワード

/* CSS */
span {
position: relative;
padding-top: 0.2em;
}
span::before {
position: absolute;
content: "";
width: 0.2em;
height: 0.2em;
border-radius: 50%;
background-color: #000;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}

/* CSS */

span {

position: relative;

padding-top: 0.2em;

}

span::before {

position: absolute;

content: "";

width: 0.2em;

height: 0.2em;

border-radius: 50%;

background-color: #000;

top: 0;

left: 50%;

transform: translate(-50%, 0);

}

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

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

/* CSS */
span::before {
position: absolute;
content: "・";
top: 0;
left: 50%;
transform: translate(-50%, 0);
font-size: 1em;
}

/* CSS */

span::before {

position: absolute;

content: "・";

top: 0;

left: 50%;

transform: translate(-50%, 0);

font-size: 1em;

}

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

丸の大きさや色も自由自在なので、一番綺麗にデザインを再現できるのではないでしょうか。
5大ブラウザ（Chrome、IE、Firefox、Edge、Safari）ごとの崩れも起きません！（※最新版のみ検証）
これならディレクターやデザイナーに文句を言われることもないでしょう。

デザインの再現度はコーダー次第。
制作はみんな仲良く進めたいものですね。

WEBでのお困りごとは
SPCにお任せください！