ザリガニデザインオフィス

──ダッシュ2つのやつ

リード文などの頭につける、ダッシュを2つ重ねたやつ、倍角ダッシュという名前らしいのですが、HTMLでダッシュを2つ続けても間が途切れてしまいます。その上、半角や全角、伸ばし棒、ダッシュっぽい記号もたくさんあります。どうすれば2つつながったのが書けるのか検証しました。

ダッシュ関係の記号だけでも以下の様な種類があります。ダッシュ記号以外に「横棒」系の記号も含めています。「」内は文字参照

  • figure dash (‒)「‒」
  • en dash(–)「–」
  • em dash、全角ダッシュ(—)「—」
  • horizontal bar(―)「―」
  • ハイフン(‐)「‐」
  • ハイフンマイナス(-)「-」
  • 全角長音記号(ー)「ー」
  • 半角長音記号(ー)「ー」
  • マイナス(−)「−」

それぞれを2つ連続で書いても…

  • figure dash:‒‒
  • en dash:––
  • em dash、全角ダッシュ:——
  • horizontal bar:――
  • ハイフン:‐‐
  • ハイフンマイナス:–
  • 全角長音記号:ーー
  • 半角長音記号:ーー
  • マイナス:−−

つながりません。では2連続ダッシュはWEBではできないのでしょうか?色々探していると、できている事例が見つかったので解析してみるとその秘密が分かりました。

2つつなげるやつは、「ダッシュ」ではなく「罫線」。

──はい。ダッシュではないんです。「けいせん」と入力して変換される横棒なら2つつながります。この記事のタイトルやこの文頭に使われているのも罫線です。ただし罫線なので用法的は間違っていますし、セマンティックな考え方にも逆行します。見た目上は達成されますので、ダッシュを使って変に間が空いているよりは、クライアントにも文句は言われないと思います。

ダッシュを使って実現したい場合は、CSSを使えば可能です。letter-spacingをマイナスに設定すれば、

コード

<span style="letter-spacing: -0.2em;">——</span>

実際の表示

——

とダッシュでも可能ですが、少し面倒です。意味にこだわる場合はこちらでしょう。

余談ですが、上記の色々あるダッシュっぽい記号、それぞれに使い分けがあるらしいです。詳しくはwikiで。