三点リーダがブラウザで文字の下側に揃って表示されてしまう時のcss解決方法

三点リーダとは、いわゆる中黒「・」が3つ並んで1文字分になっている記号のこと。
ウェブサイトを作成していて、テキストで見た時はきちんと文字の上下中央に表
示されているが、HTMLコーディングしてブラウザで表示すると、何故か文字の下
側にピリオドが並んだよう(「…」こんな感じ)に表示されてしまう。

その原因はフォントの指定にある。

例えば

body {
font-family: Verdana,'MS Pゴシック','メイリオ',sans-serif;
}

の指定では三点リーダは中央に表示されない。

解決方法は、三点リーダに対してスタイルシートを適用すること。
最小限度は該当する欧文書体を指定してやるだけで良いが、古いIEにも対応させ
るには、以下の指定がおススメ。

HTML

<span class="santen">…</span>

CSS

.santen {
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリ
オ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
}
 

デジタルゲートがお手伝い

ホームページをリニューアルしたい、スマホ対応にしたい、デザインそのままで機能だけ追加したい、更新だけ代行して欲しい。サイトを運営したいけど誰に相談したらいいか分からない。そんな時はお気軽にお問い合わせください。

スポンサーリンク