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

──ダッシュ2つのやつのサムネイル

──ダッシュ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を使った方法

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

コード

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

とダッシュでも可能です。

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