二倍ダーシ――隙間問題タイトル画像

 さて、次をご覧いただきましょう。

 何だと思いますか。ちなみに漢数字の“一”ではありません。

「ならダッシュだろ?」と思われたあなた、ご理解が早い。

 もう一度、今度は名前と文字コード(Unicode)付きでご紹介しましょう。

  • — EMダッシュ(U+2014)
  • ― ホリゾンタルバー(U+2015)
  • ─ 罫線素片(U+2500)

 同じような線に見えて、実際にはそれぞれ違うものなのですねぇ。

 それでは今度は、先程の横棒たちを、同じ文字同士でふたつ並べてみましょう。

  • —— EMダッシュ(U+2014)
  • ―― ホリゾンタルバー(U+2015)
  • ── 罫線素片(U+2500)

 みなさんのごらんの環境で、どのように表示されましたでしょうか。

 2本の横棒の間には、スキマがありますか? それとも2本の横棒がつながって、綺麗な1本線に見えたり、したでしょうか?

二倍ダーシ、とは

 “二倍ダーシ”という言葉があります。

 本などを読んでいると、特に小説などに多いですが、ちょうど長さにして二文字分くらいの長さの“線”が、よく出てくると思います。

 縦書きの本なら縦線。横書きの本なら横線です。

 使われ方は様々です。

 例えば「、(読点)」よりは長いけれど「……(三点リーダー)」よりは短い“間”を表す記号として。

(例)わたしはちょっと迷った後――彼を追いかけることにした。

 他には、()……つまり括弧の代わりとして使うこともあります。

(例)夕食の支度をしていると、ミケ――うちの飼い猫のことだ――のミャアミャアという鳴き声が聞こえてきた。

 作家さんのスタイル次第ですが、小説の登場人物の心の声を表現するとき、段落の頭につけたりもします。

(例)太郎は腕組みして考えた。
   ――何か変だぞ。なんだあの態度は。おれに隠し事でもしてるのではないか?

 というような感じです。

 さて、そういった二倍ダーシを表現するための記号が、前述の棒線たちなのです。同じ棒線を2本続けることによって、二倍ダーシを表すのです。

 ですが……どうでしたでしょう?

 上に表示された各二倍ダーシは、あなたのPCで、スマホで、その他端末のディスプレイで、本のそれのような美しい一本線となっていたでしょうか。

 多分ですけれど、

・Windows環境では、
 EMダッシュ … スキマあり
 ホリゾンタルバー … スキマなし
 罫線素片 … スキマほぼなし

・Mac環境では、
 EMダッシュ … スキマなし
 ホリゾンタルバー … スキマあり
 罫線素片 … スキマほぼなし

・iosでは、
 EMダッシュ … スキマなし
 ホリゾンタルバー … スキマあり
 罫線素片 … スキマほぼなし

 だったのではないでしょうか?

 私自身の手持ちの端末で確認できるものの、スクリーンショットを撮ってきました。

二倍ダーシ――隙間表示テストwindows

二倍ダーシ――隙間表示テストmac

二倍ダーシ――隙間表示テストios

二倍ダーシ――隙間表示テストfire

 Androidがないのがアレですが、FireはAndroidと同じ? なのかな? ともあれこんな感じです。

 実際のところこれはOSではなくフォントの問題のようですが、各OSに入っているフォントってバラバラですよね。

 よって必然的に、このような差異が現れます。

 ともあれ、これらを見比べてみますと……罫線素片なら、どの環境でも安定して、綺麗な一本線になっているように見えます。

罫線素片で二倍ダーシを表すのは邪道

 すわ、なるほど罫線素片なら綺麗な二倍ダーシが描けるのか、さっそく辞書登録だ! とあせってはいけません。

 実はこの罫線素片という記号、その名の通り枠や表を作る罫線として使用するものであって、二倍ダーシのために使うものではないのです。

「~しました。」など日本語の句点は、単なる小さな丸ですが、「゜」や「◦」を使ったらおかしいですよね。

 もし日本語をよくわからない外国人が、「~でした゜」とか「~です◦」なんて使ってたら「日本語ナメとんのか(怒)」って感じになりますよね。

 罫線素片の場合、それら○と違ってぱっと見の見分けはつきませんので、別に使ったところで誰かから文句を言われるようなことはないでしょうが、間違いは間違い、邪道は邪道なのです。

 SEO的にも、いい影響はないでしょう(まあこの程度で悪い影響があるとも思えませんが…)。

じゃあどうすりゃいいのさ

 ということになりますが、いくつか選択肢があります。

スキマを気にせず、EMダッシュかホリゾンタルバーを使用する。

 多くの人々がとっておられる方法です。

 本当に気にしてない場合もあるでしょうし、本当は気になっているんだけど、やむを得ないものと考えあきらめている、という場合もあるでしょう。

 また前述の通り、Windowsならホリゾンタルバー、MacならEMダッシュを使えば隙間が発生しませんので、複数環境のチェックを行っていない方なら、スキマ問題そのものに気付いてない、ということもあるかも知れません。

 ともあれ、スキマ……美観を気にしないのであれば、無難な方法であるでしょう。

邪道を気にせず、罫線素片を使う。

 先程申しましたとおり、罫線素片は意識的に観察しない限り、EMダッシュやホリゾンタルバーとの明確な区別はつきません。

 ですので、罫線素片をふたつ並べて二倍ダーシを作ったところで、別に誰にもツッコまれやしないと思います。

 ひょっとすると勘のいい人間が、

「おやおや~、この二倍ダーシ、な~んか怪しいぞぉ~」

 なんて思い、

 https://www.marbacka.net/msearch/tool.php#chr2enc(外部サイト)

 みたいなサイトに文字をコピペしてコードを調べ、

「U+2500! こいつ、二倍ダーシに罫線素片使ってやがるwww バカにしたろwwww 叩いたろwwwww」

 などと鬼の首と取ったかのように得意になって、あなたへの攻撃を開始する……なんてことがありえないとは申しませんが、それはさすがに“Never say never”の世界でしょう。

(ネバーセイネバー = 絶対にないとは言い切れない = 逆にいえばほとんどありえない)

 常識的に考えて……いませんよ、そんな酔狂かつ性格の悪いやつ(人様の二倍ダーシの文字コードを調べる“まで”なら、私、結構やってますが…)。

 また罫線素片で二倍ダーシを作るのが間違いで邪道だからといって、別に誰かに迷惑をかけるわけでも、損害を与えるわけでもありません。

 もし知らずに罫線素片で二倍ダーシを作り、後で真実を知るようなことになったら後悔するかも知れませんが、邪道を承知の上でやるならかまやしないと思います。

 実際むかしから密かに行われてきた裏技ではあるのですから。

そもそも二倍ダーシを使わない。

 という考え方もあります。

 微妙な間を表現したいなら「…」三点リーダーを一文字だけ使ってもいいでしょう。

 括弧はそのとおり()を使えばいいですし、人の心の声を表す場合でも()でいいでしょう。

「それじゃあどうしても美観を損ねる。気に喰わない! もちろんスキマの空いた二倍ダーシも気に入らない!」

 というようなら、最初から“微妙な間”や“()”が必要にならないよう、文章の書き方を工夫する、という発想もあるでしょう。

ちょっとめんどくさい私のやり方

二倍ダーシ「――」に"letter-spacing"を設定しよう

 さて、そうこういう私自身のやり方ですが、基本的には「そもそも二倍ダーシを使わない」とまではいかないまでも「極力使わないようにする」方針をとっています。

 個人的には、特にこのブログ記事程度のようなちょっとしたエッセイ・コラム的文章であるなら、無理に二倍ダーシを使う必要性はあまり感じていません。

 ただどうしても使いたくなった場合……少々めんどくさいひと工夫により、比較的美しく作法的にも問題ない(はず)の二倍ダーシを表現しています。

 先程……

 いくつか例文を出しましたね。

(例)わたしはちょっと迷った後――彼を追いかけることにした。

(例)夕食の支度をしていると、ミケ――うちの飼い猫のことだ――のミャアミャアという鳴き声が聞こえてきた。

(例)太郎は腕組みして考えた。
   ――何か変だぞ。なんだあの態度は。おれに隠し事でもしてるのではないか?

 この例文における二倍ダーシ、綺麗な一本線になっていますよね?

 なぜでしょう? 罫線素片を使ったのでしょうか。

 違います。この二倍ダーシはU+2015ホリゾンタルバーです。

 さっき画像でお目にかけた表示例においては、ホリゾンタルバーという記号、二倍ダーシにするとMacでは隙間が空いてしまいましたね?

 Mac環境の方、どうでしょう? 綺麗な一本線に、なっているのではありませんか(なってなかったらショックですが…)?

 これはどうしているのかというと、ちょっと面倒くさいけど単純です。

 該当部分のhtmlタグを、

 <span style="letter-spacing:-2px;">――</span>

 としているのです。

 htmlやcssのことを基礎から説明すると膨大なことになりますので割愛しますが……

 ごくシンプルに説明すると、これは「――」に対し、

「おまえらの間にあるスキマを2px分縮めろ」

 という命令を出しているということになります。

 このやり方を取る場合、EMダッシュよりホリゾンタルバーを使うほうがベターのようです。

 またスクリーンショットを取ってきましたので見てみましょう。

 before・afterが比較しやすいよう、装飾(letter-spacing:-2px;)なし版もあわせてご覧ください。after(装飾あり版)のほうには、各二倍ダーシに、"letter-spacing:-2px;"をつけています。

 

二倍ダーシ隙間表示テストmac2

 Macの場合、ホリゾンタルバーはスキマがつながって綺麗に表示されていますね。

 一方、EMダッシュと罫線素片は(画像だとちょっとわかりにくいですが)重なり合った部分が点のようになって、逆に醜くなっています。

 

二倍ダーシ隙間表示テストwindows2

 Windowsの場合、ホリゾンタルバー、綺麗です。罫線素片も、綺麗です。

 けどEMダッシュ。"letter-spacing:-2px;"しても、まだスキマがあるじゃないか!

二倍ダーシ隙間表示テストios2

 iosは一見どれも綺麗です。

 けれども、やはりEMダッシュの重なり合った部分が、よく見れば点のようになってしまっています。

 

二倍ダーシ隙間表示テストfire2

 これも一見、すべて綺麗です。

 ですがこれも拡大してみると……EMダッシュと罫線素片の重なり合った部分が、うっすらとですが点のように見えます。

 どの環境でも無難なのは、U+2015ホリゾンタルバーです。

 ホリゾンタルバーに"letter-spacing:-2px;"を設定する……これなら罫線素片を使うことなく(多分)多くの環境で綺麗な二倍ダーシが表現できているはずです。

 字間が縮まりますので、正確には全角文字2文字分よりちょっとだけ短くなってしまうのですけれど、その程度は気にしなくてもいいでしょう。

 デメリットとしては、“――”ひとつひとつに前述のhtmlを設定しなくてはなりませんので、ちょっと(かなり)めんどうという点でしょうか。

 この設定は“――”ひとつひとつに対して行わねばなりません

 面倒だからといって“――”だけでなく文章全体にこのスタイルを設定すると、

全文が――こんな感じに――ちょっと窮屈に

 表示されてしまいます。

効率的に"letter-spacing"を設定するには?

 まあやりようはいろいろです。

 私の場合、このようなブログ記事でもいったんはエディタソフトにて書いておりますので、その置き換え機能を利用して単なる“――”を、“<span class="ls-">――</span>”に置き換えるという形を取っています。

(クラス"ls-"に、スタイルシート側で"letter-spacing:-2px;"を設定しています。
 <span style="letter-spacing:-2px;">――</span>よりちょっと短くなりますし、他にも後述の理由があります)

 これなら簡単ですし、ひと手間ですみます。

 またワードプレス(このブログはワードプレスです)の記事投稿画面で二倍ダーシを追加したくなったときのため、“<span class="ls-">――</span>”を「2だーし」という読みで辞書登録しています。

 「2だーし」と打って変換キーを押せばいいので、これも簡単です。

 またワードプレスには「AddQuicktag」というプラグインがあって、これを使うと、

「特定の文字列(htmlタグも含む)をボタンひとつで書き込める」

 という機能を、投稿画面へと追加することが出来ます。これを利用してもいいでしょう。

 なお置き換えに関しては、全記事を一括置き換え出来るプラグインとか、ワードプレスのテーマ設定をいじって、“――”を自動的に、
 “<span class="ls-">――</span>
 に置き換える方法等もあるようなのですが、私はこれらは使ったことがありませんし、多分問題が出るんじゃないかなと考えています。

 この記事や前回の記事で行ったような、紹介のためあえて「スキマ付き二倍ダーシ」を表示している部分などが、「スキマなし二倍ダーシ」に勝手に変えられてしまう、ということは起こってしまうでしょう。

 一括置き換えに関しては、行うなら記事ひとつぶんの範囲にとどめ、ひとつひとつ、表示がおかしくなってないかチェックしつつやっていくのが無難かと思います。

 逆にスタイルの設定方法については、

 <span style="letter-spacing:-2px;">――</span>

 のような直接記述より、先程紹介したような、

 <span class="ls-">――</span>

 クラス名を名付けた上でスタイルシートに設定記述、とするべきでしょう。

 各マシンや端末、ウェブブラウザ等の環境も日々進化、変化するもの。

 ひょっとしたらそのうち、“――”はブラウザサイドで自動的につなげてくれる…なんて機能の現れる日が来るかも知れません。

 もしそうなった場合、自身で行った"letter-spacing:-2px;"の設定は余計になものになりますし、逆にこれのせいで表示がおかしくなってしまう、という心配も出てきます。

 また進化する環境、ということなら、フォントのことも考えねばなりません。

 現在一般的に使われているフォントファミリーが古び、新しいフォントがメジャーになった未来。

 そろそろ我がサイトも新フォントに衣替えだ! と意気込んで、いざ変えてみたはいいけれど、

「このフォントではレタースペーシング-2pxでは足りない! まだスキマがある!」

 などということが起こりえる……かもしれません。

 そういうとき直接記述の場合は、ひとつひとつ手直しするか(膨大な手間となるでしょう)、前述した全記事一括置き換えプラグインに頼る他はなくなりますが、スタイルシート記述であれば、スタイルシートの該当箇所をちょっと書き換えてやるだけで一瞬にして解決します。

まとめ

 いかがでしたでしょう。

 せっかく書いた記事、せっかく書いた文章です。

 出来る限り美しい状態で読んでもらいたいのが人情というもの。

 みなさまのご参考になれば幸いです。

追記

 また最近では、上記とはちょっと違うものに変えました。

 「class="ls-"」に対するcss設定は、「letter-spacing:-2px;」だけでなく「margin:0 4px;」というのも付け加えています。

 すると――こんなふうにちょっと窮屈だったのが、

 このように――左右にちょっとのマージンが出来て、多少ゆとりある形に変わります。

 ただちょっと注意点があって、もし2倍ダーシではない、それをさらにつなげた「4倍ダーシ」とか「6倍ダーシ」を表現したかったとしましょう。

 ソースコードが、

 <span style="letter-spacing:-2px;">――</span><span style="letter-spacing:-2px;">――</span><span style="letter-spacing:-2px;">――</span>

 と「スキマなし二倍ダーシ」を三個連続させたような場合、

 ――――――

 という感じで多分つながって見えると思いますが、

 <span class="ls-">――</span><span class="ls-">――</span><span class="ls-">――</span>

 と「スキマなしかつ左右マージンありの二倍ダーシ」を連続させた場合、

 ――――――

 各二倍ダーシの間にスキマが出来てしまっていると思います。

 ですのでこの場合、6倍ダーシを実現したければ、

 <span class="ls-">――――――</span>

 こうしなくては、

 ――――――

 にはなりません。

 前述の、エディタによる置き換え機能とかを使うと、

 <span class="ls-">――</span><span class="ls-">――</span><span class="ls-">――</span>

 のような形が発生しやすいので注意が必要です。

追記2

 また「――」二倍ダーシだとちょっと短く感じられたので―――このような、いってみれば「3倍ダーシ」を使うことがデフォルトになりました。

【writer : doku】