テキストに蛍光ペンで引いたようなラインを3STEPで作成する

2020年2月10日

仕上がりイメージ

天は人の上に人を造らず人の下に人を造らず」と言えり。 

テキストを強調させたい場合の方法として、「太字(bold)にする」「文字の色を変える」「下線を引く」というのがよくあります。

いずれも簡単なcssで表現できますが、今回は少し工夫して蛍光ペンで引いたようなラインを作ってみます。

文字と重なる下線を引く

cssで下線を引く場合、通常では「text-decoration:underline;」を使用します。しかし、これでは文字の下に下線が引かれ、線が文字と重なりません。

html

htmlは全て共通です。

<p>「<span class="marker">天は人の上に人を造らず人の下に人を造らず</span>」と言えり。</p>

css

.marker {
  text-decoration:underline;
  text-decoration-color: #ffcff5;
}

また、「border-bottom」で下線を引く方法もありますが、この場合も線を太くできますが文字の下に下線が引かれ、線が文字と重なりません。
「padding-bottom」で下線の位置を下げる事はできるのですが、上げる事ができません(しかもご覧のように下の行にかかってしまいます※本来下線を引いているのは「文字の下に下線が引かれ」の部分)。

css

.marker {
  border-bottom: 20px solid #ffcff5;
}

これらはどちらも、今回の目的を充たす物ではありません。

文字にかかる下線を引きたい場合は、「background」にグラデーション(linear-gradient)」と透明を指示する値「transparent」を使用します。グラデーションの上半分を透明に指定する事で、文字にかかった下線を表現できます。

css

.marker {
  background: linear-gradient(transparent 50%, #ffcff5 50%);
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

ひとまずこれだけで完成しますが、これで終えるのも味気ないので、linear-gradientとtransparentについてもう少し詳しく見てみたいと思います。

linear-gradientについて詳しく調べる

linear-gradientは背景色などにグラデーションをかける事ができます。

最もシンプルな記述は~で、上から開始し、下へグラデーションしていきます。

css

.mark {
  background:linear-gradient(#0000ff, #ff0000);
  color:white; /*テキストの視認性を上げるためホワイトにしています*/
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

また、指定色のグラデーションの開始地点を指定する事ができます。下記のように指定すると50%地点からグラデーションが開始されます。

css

.mark {
  background:linear-gradient(#0000ff 50%, #ff0000 100%);
  color:white;
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

グラデーション方向を指定する事もできます。「to right」と指定することで左から右へのグラデーションとなります。同様に「to left」「to top」「to bottom(デフォルト)」と指定できます。

css

.mark {
  background:linear-gradient(to right,#0000ff, #ff0000);
  color:white;
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

2色だけでなく、3色以上でもグラデーションが作れます。

css

.mark {
  background:linear-gradient(#0000ff, #ff0000, #ffff00);
  color:white;
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

角度を指定する事で、斜め方向へのグラデーションが作れます。

css

.mark {
  background:linear-gradient(45deg,#0000ff, #ff0000);
  color:white;
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

さて、前振りが長くなりましたが、ここからが今回使用したcss設定になります。
まず、グラデーションの開始・終了を50%に指定することで、グラデーションなしの2トーンの背景色が作れます。

css

.mark {
  background:linear-gradient(#0000ff 50%, #ff0000 50%);
  color:white;
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

さらに、開始点の色を「transparent」に指定する事で、上半分の背景色が透明にできます。

css

.mark {
  background:linear-gradient(transparent 50%, #ff0000 50%);
}

出来あがった物

天は人の上に人を造らず人の下に人を造らず」と言えり。

このようにして、「下半分だけに色を付けた背景」を作り、この色を調整する事で。蛍光ペンで引いたような下線が再現できます。

いろんな色のマーカーを作ってみる

実際の蛍光ペンの色を参考に色を作ってみました。
実際の物はもう少し鮮やかだったりしますが、あまり色味が強いとテキストがかえって見づらくなるので、抑えめに作っています。

ご参考までにどうぞ。

天は人の上に人を造らず人の下に人を造らず」と言えり。

天は人の上に人を造らず人の下に人を造らず」と言えり。

天は人の上に人を造らず人の下に人を造らず」と言えり。

天は人の上に人を造らず人の下に人を造らず」と言えり。

天は人の上に人を造らず人の下に人を造らず」と言えり。

天は人の上に人を造らず人の下に人を造らず」と言えり。

天は人の上に人を造らず人の下に人を造らず」と言えり。

css

.marker_red {
  background: linear-gradient(transparent 50%, #ffcff5 50%);
}
.marker_blue {
  background: linear-gradient(transparent 50%, #ccf0ff 50%);
}
.marker_yellow {
  background: linear-gradient(transparent 50%, #e3ff91 50%);
}
.marker_orange {
  background: linear-gradient(transparent 50%, #ffe2d3 50%);
}
.marker_green {
  background: linear-gradient(transparent 50%, #caffe2 50%);
}
.marker_purple {
  background: linear-gradient(transparent 50%, #decfff 50%);
}
.marker_gray {
  background: linear-gradient(transparent 50%, #d9d9d9 50%);
}

本コードは「テキストを目立たせたい」という目的で使用するので、cssにfont-weight:bold;を追加した方がより強調されるかもしれません

【参考】太字にもしてみた

天は人の上に人を造らず人の下に人を造らず」と言えり。