WEBで二倍ダーシ(ダッシュ)の隙間を解消する
※ こちらはWEB上での表示について書いています。印刷する小説本などの原稿作成についてではありませんのでご注意下さい。
このサイトを作成したときの備忘録
- WEBでルビを表示させる
- WEBで三点リーダーが下に偏ってしまうのを解消する
- WEBで二倍ダーシ（ダッシュ）の隙間を解消する
上記の問題をHTML、CSSで解決する方法のまとめ。
ここでは3番目の二倍ダーシ（ダッシュ）についてまとめています。
二倍ダーシ（ダッシュ）の隙間を解消する
上の図のように連続する2つのダーシの間に隙間が空いてしまう場合があります。
こちらも三点リーダーのときのように、スタイルを設定することで解消することができます
。
二倍ダーシ<span class="dash">――</span>。
とHTMLを記述し、
.dash {
letter-spacing: -4px;
margin: 0 4px 0 2px;
font-family: Meiryo;
}
という風にCSSでスタイルを設定します。
letter-spacingで文字の間隔を指定します。さらに自分の場合は、前後の文字とダーシの間隔が詰まっているように感じられたので、marginで少し間隔を広げました。さらに日本語フォントを設定することで、短く表示されてしまっていたダーシの長さがいい感じになりました。
ご自分のサイトに合わせて数字の部分は適宜調整してください。
二倍ダーシ――
こちらも逐一設定するのが面倒ですが、プラグインAddQuicktagで多少は楽に設定できます。