文章を強調する点を、現時点で一番綺麗に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デザイナー必読！】 Photoshopレイヤー整理整頓術一覧へ戻るモバイルアプリ『Adobe Photoshop Fix』で画像の修正をしてみた＞

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

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

CONTACT

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

この記事のあとによく読まれている記事

プログラマーになろうとしている人へ伝えた･･･

コーダーのための競技プログラミング入門

VPSって何？

コーダー・ディレクター必見！サイトのデバ･･･

WordPressのフックを使いこなして･･･

three.jsで地球と月を回してみた

CONTACT