対談記事等でよく見かける長い横棒(2つ繋がったダッシュ)の出し方を学んだ

久しぶりにWebについて勉強したのでそのメモ書きです。

タイトルの意味、少しわかりにくいですかね。

こういうやつのことです。

1文字目の単語の前に長い横棒と余白が付いています

1文字目の単語の前に長い横棒と余白が付いています

 

下記サイトを見ていただくとより分かりやすいかと思います。

【スペイン経由 東京オリンピック行き】田中陽子再起のチャレンジ最終章が始まる。<〜初の海外挑戦に向けて〜 田中陽子選手インタビュー〉 | サッカー馬鹿 勝村大輔
〜初の海外挑戦を前に〜 田中陽子選手インタビュー――まずは自身初の海外挑戦までの経緯、そこに至るまでの気持ちの変化などをお聞かせください。(田中) スペインへの憧れは以前から持っていました。本当は今シーズン終了後にと考えていましたが、今シーズ…

対談記事やインタビュー記事で、インタビュアーと取材対象者どちらの発言なのかを分かりやすくするために色を付けたり太字にしたりと装飾されます。

今回のテーマ・横棒+余白もその方法のひとつですね。

 

これがかっこよくて自分でも使ってみたいなと思って、やり方を調べてみました。

対談記事を書く予定はないのですが。

 

まず長い横棒は一般的に「2倍(または倍角)ダーシ(またはダッシュ)」と呼ばれ、全角の「―(ダッシュ)」を2つ繋げているそうです。

しかし、下記を見てもらえば分かりますが、ただ2つ繋げただけでは1つ目のダッシュと2つ目のダッシュの間に隙間ができて、全く1本の横棒には見えません。

――質問文の先頭に長い横棒を付けたい!

 

ではどうやって繋がって見えるようにしているのでしょうか?

こちらの記事が非常に勉強になりました。

──ダッシュ2つのやつ | ザリガニデザインオフィス
リード文などの頭につける、ダッシュを2つ重ねたやつ、倍角ダッシュという名前らしいのですが、HTMLでダッシュを2つ続けても間が途切れてしまいます。その上、半角や全角、伸ばし棒、ダッシュっぽい記号もたくさんあります。どうすれば2つつながったのが書けるのか検証しました。
二倍ダーシ「――」スキマ問題! WEB上で綺麗に表示するためのベストな方法は?
小説などでお馴染み「――」こと二倍ダーシ。しかしWEB上でそれをやろうとすると、みっともないスキマが出来てしまうことがあります。あのスキマはなんなのか? なぜ発生したりしなかったりするのか? 防ぐ方法は? 考えます。

 

方法は大きく分けて2つあるようです。

1.<span style>というタグを使って、直接HTMLで装飾指定をする

<span style>はHTML上で直接CSSを適用する際に使い、<span>は一部だけに装飾したい場合に、装飾したい文章などをグループ化するために用いるそうです。

spanタグとは~htmlでの使い方についてまとめ
htmlを構築するためには様々なタグを使用します。 そして、たいていのタグは段落や見出しなどの意味を持ちますが、インライン要素である「sp...
HTMLのspanタグとは?基本的な使い方についてわかりやすく解説 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
HTMLのspanタグの意味がよくわからない spanタグの使い方がわからない 皆さんこんにちは!HTMLタグのレイアウト要素の違いを理解してspanタグをきちんと使えていますか?思うようなレイアウトにならないということが多発していませんか? 今日はspanタグを理解すると題して、spanタグの基本やdivタグやpタグ...
spanタグとは|コーディングのプロが作るHTMLタグ辞典
「SPAN」とは、単体では特に意味を持たないタグですが、~で囲った部分をインライン要素としてグループ化することができるタグです。グループ化することで、

 

CSSはHTMLとは別に記述するのがベターと習ったような。

CSSのことも分かりやすい記事を見つけたのでまた勉強します。

[初心者]CSSってなに?という質問にWEB歴10年の人が全力で答えてみる | ヨッセンス
WEBサイトやブログのデザインをいじろうと思ったときに突き当たるのが「CSS」という大きな壁です。今回はCSSというものを超わかりやすく噛み砕いて説明します。
CSSとは?これを読めば初心者でも必ずCSSが書ける!|Udemy メディア
今回はCSSとは何なのかについて解説します。豊富な画像と具体例で専門用語を使わずに解説しているのでCSS初心者にも安心の記事です。最後には、CSS体験というのもご用意しました。ぜひこの記事でCSSをマスターしてください。

 

冒頭の記事のHTMLを見てみると、この<span style>で装飾しているのが分かりました。

Chromeなら右クリック→「検証」、Firefoxは右クリック→「要素を調査」すると、そのサイトの裏側(HTML)がどうなっているかを見ることができます。

結果、

<span style=”letter-spacing:-.2em;width:2em;margin-right:.5em;”>――</span>

という風に指定しているのが判明。

2つの全角ダッシュ「――」について、

  • 「――」の文字間(letter-spacing)を.2emマイナスして(詰めて)
  • 「――」の幅(width)を2文字分に(これはよく分かりません)
  • 「――」の右に余白(margin)を.5em

にしてね、と指示しています。

ちなみに「1em」が1文字分だそう。

CSSのpxとemの違いについてのまとめ - ちゃんとしたブログ

「-.2em」「.5em」はそれぞれ0.2em、0.5emのこと(下記参照)。

値が 小数点以下の場合「0」を省略してもOK です。
例えば「padding : 0.3em」なら「padding : .3em」と書いても結果は同じです。
(見えるかな?「.3」と、小数点を残していますよ)

出典:ほんっとにはじめてのHTML5とCSS3:【7-1】CSSのサイズの単位について(em, %, px, rem の使い分け)

つまり2つのダッシュ同士を0.2文字分詰めて、2つめのダッシュの右側に0.5文字分の余白を入れるってことですね。

こんな風に書いていたんですね!

 

でも、(コピペするにしても)毎回<span style~>なんて長いのを書いたり入れたりするのは面倒。

そこに私のWebの先生からのお言葉。

あとその2倍ダーシ表現、ぱっと浮かぶのはbefore擬似要素で表現しそう。

before疑似要素・・・?

また知らない言葉です。

これが2つ目の方法。

2.before擬似要素で表現

この方に「before疑似要素って何ですか?」と聞くのは簡単ですが、自分で調べた方が身に付くのは体験からも分かっています。

大抵のことはインターネットで調べれば出てきますし、まずは人に聞く前に調べる癖は大切。

調べれば分かるようなことで相手の貴重な時間を奪わない。

聞くにしても、自分でここまでは調べたけどどうにも分からないというスタンスの方が相手も答えてあげたくなると思うんですよね。

色々調べて、こちらを参考にしました。

CSSの疑似要素とは?beforeとafterの使い方まとめ
CSSの疑似要素「:before」と「:after」の超便利な使い方を総まとめしました。具体的な表現例や「使うことにどんなメリットがあるのか」なども紹介しています。
【CSS初心者入門】classとは何?使い方も解説!
みなさんはCSSの学習をしていませんか? CSSを学習する時に「class」が使えることは基本となっています。 今回の記事ではclassの使い方を解説します!  目次1 classとは2 記述方法3 命名規則4 複数クラ ...

 

<span style>とbefore疑似要素で、やりたかったことができた!

――質問文の先頭に、2つ繋がった隙間なしの「―」&1文字目との間に少し余白が見えますか?(その1)

↑これは<span style>を使って直接HTMLで装飾を指定しました。

HTMLを見ると

<strong><span style=”letter-spacing: -.2em; width: 2em; margin-right: .5em;”>――</span>質問文の先頭に、2つ繋がった隙間なしの「―」&1文字目との間に少し余白が見えますか?(その1)</strong>

となっているかと思います。

 

質問文の先頭に、2つ繋がった隙間なしの「―」&1文字目との間に少し余白が見えますか?(その2)

↑これはbefore疑似要素を使っています。

interviewerというclassを設けてbefore疑似要素を付け、質問文をこのようにしました。

<p class=”interviewer”><strong>質問文の先頭に、2つ繋がった隙間なしの「―」&1文字目との間に少し余白が見えますか?(その2)</strong></p>

 

CSSはこのように記述。

/*質問文の文頭に2倍ダーシと少しの余白を入れる*/
p.interviewer::before {
content:”――”;
letter-spacing: -.2em;
width: 2em;
margin-right: .5em;
}

 

 

また、<span style>もbefore疑似要素も使わない、つまり装飾しないときには手打ちで全角ダッシュを2つ、半角スペースを1つ入れて書くとこうなります。

―― 質問文の先頭に、2つ繋がった隙間なしの「―」&1文字目との間に少し余白が見えますか?(その3)

これはこれでアリですね。

 

その1とその2は見た目は一緒ですが、書くときにラクなのと、裏側(HTML)を見たときにこちらの方がキレイに見えるという理由でその2の方が好きです。

今後対談記事を書く機会が来たら、その2方式でいきます。

 

長くなりましたが、またひとつ知識が付きました。

今日は本当に自分用のメモでした。

 

投稿者プロフィール
熊木 勇太

1987年生まれ。株式会社リバースジャパンのWeb担当として、ウェブサイト・SNSの更新、製品カタログ等の販促物制作、社内環境整備を担当。大学卒業後は印刷会社に入社。営業として様々な印刷物・Web制作に携わる。この体験から、企業が自ら情報発信して伝えることの大切さを感じ、リバースジャパン入社後はWebサイトリニューアルやSNSでの発信、パンフレット等の新規作成など情報発信に務めています。高校生の頃に鑑賞して以来、長岡花火が1年で最大の楽しみです。

熊木 勇太をフォローする
Web
リバースジャパン スタッフブログ