久しぶりにWebについて勉強したのでそのメモ書きです。
タイトルの意味、少しわかりにくいですかね。
こういうやつのことです。
1文字目の単語の前に長い横棒と余白が付いています
下記サイトを見ていただくとより分かりやすいかと思います。
対談記事やインタビュー記事で、インタビュアーと取材対象者どちらの発言なのかを分かりやすくするために色を付けたり太字にしたりと装飾されます。
今回のテーマ・横棒＋余白もその方法のひとつですね。
これがかっこよくて自分でも使ってみたいなと思って、やり方を調べてみました。
対談記事を書く予定はないのですが。
まず長い横棒は一般的に「2倍（または倍角）ダーシ（またはダッシュ）」と呼ばれ、全角の「―（ダッシュ）」を2つ繋げているそうです。
しかし、下記を見てもらえば分かりますが、ただ2つ繋げただけでは1つ目のダッシュと2つ目のダッシュの間に隙間ができて、全く1本の横棒には見えません。
――質問文の先頭に長い横棒を付けたい！
ではどうやって繋がって見えるようにしているのでしょうか？
こちらの記事が非常に勉強になりました。
方法は大きく分けて2つあるようです。
1.<span style>というタグを使って、直接HTMLで装飾指定をする
<span style>はHTML上で直接CSSを適用する際に使い、<span>は一部だけに装飾したい場合に、装飾したい文章などをグループ化するために用いるそうです。
CSSはHTMLとは別に記述するのがベターと習ったような。
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文字分だそう。
「-.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擬似要素で表現しそう。
また全角二つ繋げる手も、装飾を外したテキストで見るとアリだとも思う。— 海津 ハカセ｜HP・Webサイト・ブログ制作 (@exma_hakase) November 13, 2019
あとその2倍ダーシ表現、ぱっと浮かぶのはbefore擬似要素で表現しそう。
before疑似要素・・・？
また知らない言葉です。
これが2つ目の方法。
2.before擬似要素で表現
この方に「before疑似要素って何ですか？」と聞くのは簡単ですが、自分で調べた方が身に付くのは体験からも分かっています。
大抵のことはインターネットで調べれば出てきますし、まずは人に聞く前に調べる癖は大切。
調べれば分かるようなことで相手の貴重な時間を奪わない。
聞くにしても、自分でここまでは調べたけどどうにも分からないというスタンスの方が相手も答えてあげたくなると思うんですよね。
色々調べて、こちらを参考にしました。
<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方式でいきます。
長くなりましたが、またひとつ知識が付きました。
今日は本当に自分用のメモでした。
