はじめに

文章中で強調表示させたい場合の方法として、「太字（bold）にする」「文字の色を変える」「下線を引く」という方法がよくあります。

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

仕上がりイメージ

目次

本題の前に上手くいかない例

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

現象の再現（HTML）

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

現象の再現（CSS）

.test01 {
 　text-decoration:underline;
 　text-decoration-color: #ff0000;
}

現象の再現

また、border-bottomで下線を引く方法もあります。この場合では下線を太く設定できますが文字の下に下線が引かれ、線が文字と重なりません。

また、padding-bottomでは下線の位置を下げる事はできるのですが、上げる事ができません。

現象の再現（HTML）

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

現象の再現（CSS）

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

現象の再現

これら2つの方法はどちらも今回の目的に合った物ではありませんので、次から文字と重なる下線を引く方法を紹介します。

文字と重なる下線を引くには

文字にかかる下線を引きたい場合は、backgroundにグラデーションlinear-gradientと透明を指示する値transparentを使用します。

グラデーションの上半分を透明に指定する事で、文字にかかった下線を表現できます。

HTML

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

CSS

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

できあがったもの

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

linear-gradientについての詳しい説明

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

グラデーション方向を指示しない場合は、上から下へグラデーションしていきます。

まずは試しに青（#0000ff）から赤（#ff0000）へグラデーションしていく背景を作ってみます。

HTML

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

CSS

.ul_test {
 　background:linear-gradient( #0000ff , #ff0000 );
 　color:#fff; /*テキストの視認性を上げるため#fffで設定しています*/
}

できあがったもの

このように、特にグラデーションの指示をしない場合は、上から下へ徐々にグラデーションされていきます。

その他、グラデーションの開始位置をしていする事も可能です。

例えば下記のように指定すると上から50%までは青の単色で、50％地点から下方向にグラデーションが開始されます。

HTMLに変更は無いため割愛します。

CSS

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

できあがったもの

グラデーション方向を指定する事もできます。to rightと指定することで左から右へのグラデーションとなります。同様にto leftto topto bottomと指定できます。

試しに右から左方向へのグラデーションを作成してみます。

CSS

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

できあがったもの

斜め方向にもグラデーションをかける事ができます。

例えば下記のようにto right topと記述する方法の他に45degのように角度を指定する事もできます。

（斜め方向は見た目が分かりにくいので上下にpaddingを追加しました）

CSS

.ul_test {
　background:linear-gradient( to right top , #0000ff , #ff0000 );
　color:#fff;
　padding:20px 0;
}

できあがったもの

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

CSS

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

できあがったもの

さて、前振りが長くなりましたが、改めて今回使用したCSS設定についてSTEPごとに説明していきます。

linear-gradientを使ったマーカー表現について

まず、グラデーションの開始・終了位置をそれぞれ50％に指定することで、グラデーションしないの2トーンの背景色が作れます。

CSS

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

できあがったもの

次のステップで上半分を透明に設定します。

linear-gradientの上半分を透明にする

開始点に設定している色（#0000ff）をtransparentに変更する事で、上半分の背景色が透明にできます。

テキストカラーは黒に戻しました

CSS

.ul_test {
　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%);
}

できあがったもの

という訳で、テキストに蛍光ペンで引いたようなラインを作成する方法でした。