cssや画像を使って作る – 蛍光ペンでマーカーを引いたような効果

文字の大きさや色は変えずに強調したい部分を作るときに使う方法の一つとして、蛍光ペンでマーカー線を引いたような効果をつける方法があります。
cssで作る。背景画像を用いる。…など、方法はいくつかありますので、それぞれサンプルを作ってまとめてみました。

1.background: linear-gradient を使う

css3の background: linear-gradient を使って作る方法。
蛍光ペンでアンダーラインっぽく塗っているように魅せることができます。

最近では、この方法が一番多く取り上げられていますね。
css3を用いるため、当然ですがIEの古いバージョンでは効きません。
ベンダープレフィックスをつけても、iphoneだとsafariでもChromeでも効かないんですけど、これって対応してないんですかね？

サンプルページを表示

<p>明日も深夜からの雨が続き、お昼ごろまでは<strong>傘必須</strong>です。<br>
雨はいったん上がるものの、その後は雨が降ったり止んだりして、<br>
<strong>ザッと強まる可能性もあるので、1日中注意が必要です。</strong></p>

strong {
  background: linear-gradient(transparent 40%, #FFB96D 40%);
}

2.:beforeと:after を使って両端に斜線をつける

1.のパターンの両サイドに変形した三角形を追加して斜線を追加しました。
蛍光ペンの先っぽを斜めに倒して線を引いたような表現にしました。

変形した三角形は:beforeと:afterを使って作っています。
<strong>で挟んだ文字が大きくなると、:beforeと:afterがラインとズレてしまうので、注意が必要です。

こちらも1.と同様にIEの古いバージョンでは効きません。

サンプルページを表示

strong {
  background: linear-gradient(transparent 40%, #FFB96D 40%); 
  position: relative;
}

strong:before {
	content: "";
	width: 0;
	height: 0;
	border-bottom: 16px solid #FFB96D;
	border-left: 6px solid transparent;
	position: absolute;
	bottom: 0;
	left: -6px;
}

strong:after {
	content: "";
	width: 0;
	height: 0;
	border-top: 15px solid #FFB96D;
	border-right: 6px solid transparent;
	position: absolute;
	bottom: 0;
	right: -6px;
}

3.background-color を使う

昔からの使われている方法の一つ。
background-color をそのまま使っているので、蛍光ペンで文章全体を塗っている感じになりますね。

サンプルページを表示

strong {
  background-color: #FFB96D;
}

4.画像 を背景として使う

こちらも昔からの方法の一つ。
background-imageを使い、タグで挟んだ部分を背景として画像で塗っています。
背景画像をgifにして透過をさせてしまえば、ブラウザ依存を気にせず使えます。

画像全部に色をつけるのではなく、下1/3くらいに色をつけ、それ以外は透過させるのが、蛍光ペンでアンダーラインっぽく塗っているように魅せるポイントですね。

サンプルページを表示

strong {
	background-image: url("../image/img_marker.gif");
}

今回、頻繁に使われている方法をまとめてみました。
css3を使ったり擬似要素を使ったりしている部分があるので、どうしてもブラウザ依存が出てしまいます。
対応ブラウザに沿って、使う方法を切り分けしていくのが最適だと思います。