cssでマーカーを引く方法と注意点!!

こんにちは。五平餅くんです。

WEBサイトでは、テキストにマーカーを引く場面って結構ありますよね。

こんな感じです。

一見簡単そうなマーカーですが、うっかりして良くないhtml&cssをかくと落とし穴にはまります(僕もはまりました)。

運が悪いと調べて時間を浪費してしまうことになりかねないので、

今回は「正しいhtml、cssでのマーカーの引き方」についてお話させていただきます！

cssでマーカーを引く方法

cssでマーカーを引く方法は非常に簡単です。baskgroundプロパティ一つでいけます。

<div id="content">
  <div class="inner">
    <p class="txt marker">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br />テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
    <p class="txt marker">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br />テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>
  </div>
</div>

.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

.txt {
  font-size: 16px;
}

/* マーカー */
.marker {
  background: yellow;
}

下のボタンから、上記コーディングのデモ表示ができます。

これでひとまずはマーカーが引けました。

でも何か違和感。。。

display: inlineを追加

その違和感はこの部分だと思います。

これでは、マーカーというよりボックスに近いですよね。

「ここの部分が不要」の部分を取り除いて、テキストに合わせてマーカーを引きたいですよね

以下のcssを追加すれば、ひとまず不要部分は切り落とせます。

/* マーカー */
.marker {
  background: yellow;
  /*追加*/
  display: inline;
}

上のcssを追加すると、このような表示になります(下の「デモを表示」ボタンをクリックしてください)。

ひとまず、先ほどの不要部分は切り落とせましたが、またおかしくなっています。

今度は一つ目の<p>と二つ目の<p>の間に改行がなくなってしまいました。

…いいかげん周りくどいので、答えです。

最終的なコード

<div id="content">
  <div class="inner">
    <p class="txt"><span class="marker">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br />テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</span></p>
    <p class="txt"><span class="marker">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br />テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</span></p>
  </div>
</div>

.inner {
  max-width: 800px;
  width: 97%;
  margin: 0 auto;
}

.txt {
  font-size: 16px;
}

/* マーカー */
.marker {
  background: yellow;
  /*やっぱり削除*/
  /* display: inline; */
}

最終的なコードのデモ表示は下のボタンから↓

display: inlineをやっぱり削除しました(本当に周りくどい！)。

ついでにhtmlの方で、<p>の中のテキストを<span>を囲み、<span>にclass=”marker”を指定。

こちらでちゃんとマーカーっぽくなりました。

解説

※とりあえず見た目が整えば良いという方は、ここは少し専門的になるので飛ばして構いません。

という訳で解説させていただきます。

実は結構多くのサイトが、マーカーのcssにdisplay: inlineを指定していました。

テキストの中の一部にマーカーを引くのならそれでも問題ないのですが、そのcssを書いていると、2つの文にマーカーを引きたい時には改行がなくなってしまいます。

原因は、inline要素が横並びになることです。

二つの<p>が横並びになったために、改行がなくなったのです。

また、一つ目のコードは、ブロック要素である<p>にマーカー引いています。

この時、display: inlineは指定していません。

この例では文が終わっているのにマーカーは続いてしまいました。

この原因は、ブロック要素が親要素いっぱいの幅となることです。

<p>はブロック要素なので、親要素いっぱいに幅が広がり、マーカーもそれに合わせて広がってしまったということです。

実はどちらの場合でも問題ない時もあるのですが、

一番確実なのは、ブロック要素(<h1>や<p>など)の中にインライン要素(<span>)を入れて、そこにマーカーを指定することです。

そうすればブロック要素で縦並びになりますし、inline要素に指定しているのでマーカーが親要素いっぱいに広がりません。

この指定方法なら、ほぼどんな場面でも正しくマーカーが引けると思います。

まとめ：マーカーは<span>に指定

というわけで、今回は以上になります。

ブロック要素の中にインライン要素、インライン要素にbackground: yellowという指定方法は確実です。

僕も一度やってしまいましたが、

うっかりブロック要素に指定したり、display: inlineを指定してしまうと使い勝手が悪くなるので注意してください。

最後まで読んでいただき、ありがとうございました。