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」プロパティなどを使い位置調整する、というものです。
コードは下記の通り
|
1 2 3 4 |
<!-- HTML --> <p> <span>キ</span><span>ー</span><span>ワ</span><span>ー</span><span>ド</span> </p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* 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は下記でも大丈夫です。
|
1 2 3 4 5 6 7 8 9 |
/* CSS */ span::before { position: absolute; content: "・"; top: 0; left: 50%; transform: translate(-50%, 0); font-size: 1em; } |
点をどのように再現するかですね。その辺はお好みで。
丸の大きさや色も自由自在なので、一番綺麗にデザインを再現できるのではないでしょうか。
5大ブラウザ（Chrome、IE、Firefox、Edge、Safari）ごとの崩れも起きません！（※最新版のみ検証）
これならディレクターやデザイナーに文句を言われることもないでしょう。
デザインの再現度はコーダー次第。
制作はみんな仲良く進めたいものですね。
この記事のあとによく読まれている記事
-
コーディング
-
コーディング
-
コーディング
-
コーディング
-
コーディング
-
コーディング
