蛍光ペンCSS

記事のテキストを強調したいときにオススメなのがマーカーの装飾をする方法です。
この記事ではCSSで蛍光ペンで線を引いたような表現をする方法を解説します。色のパターンやオススメのカラー、線の幅の調整、スクロールに合わせて動くアニメーションなどのサンプルを用意!そのままコピペで使えます。

基本的な指定

backgroundを指定して装飾します

色と太さを指定するだけでそれっぽい表示にできます。
太さは%で指定しますが詳しい方法は下記にまとめています。

サンプルではmarkタグに指定

この記事のサンプルではmarkタグに対してCSSを指定しています。

classを指定して使う場合などは置き換えてください。

文字を太字にする

装飾する文字は太字にするのがオススメです!
マーカー装飾をする箇所は強調したいと思いますので、よりハッキリさせることができます。

通常の太さの文字の場合
太い文字の場合

「font-weight」を指定しましょう。

角を丸める

通常の場合
角を丸めた場合

「border-radius」を指定して角を丸めます。線が太い場合や濃いめの色の場合に少しやわらかくすることができます。

線の太さ(幅)を指定する

基本の指定方法

70%指定のマーカーサンプル

下記が70%を指定した場合のCSSです。

%の数字を変えることで太さを変えることができます。

太さごとのサンプル

指定%表示
95%95%指定のマーカーサンプル
90%90%指定のマーカーサンプル
85%85%指定のマーカーサンプル
80%80%指定のマーカーサンプル
75%75%指定のマーカーサンプル
70%70%指定のマーカーサンプル
65%65%指定のマーカーサンプル
60%60%指定のマーカーサンプル
55%55%指定のマーカーサンプル
50%50%指定のマーカーサンプル
45%45%指定のマーカーサンプル
40%40%指定のマーカーサンプル
35%35%指定のマーカーサンプル
30%30%指定のマーカーサンプル
25%25%指定のマーカーサンプル
20%20%指定のマーカーサンプル
15%15%指定のマーカーサンプル
10%10%指定のマーカーサンプル
5%5%指定のマーカーサンプル
0%0%指定のマーカーサンプル

60%~75%くらいが使いやすいと思います。サイトのフォントやデザインによっても合うかは変わってくるため、調整してみてください。

オススメのカラー

実際の蛍光ペンでもお馴染みのカラーである、黄色、ピンク、青の3色があれば基本的にいいと思います。
その3色の中でオススメなカラーをいくつか紹介します。

オススメの黄色系マーカー

カラーコードサンプル
#fff799黄色系サンプルマーカー1
#ffe28c黄色系サンプルマーカー2
#fff799黄色系サンプルマーカー3

オススメのピンク系マーカー

カラーコードサンプル
#ffadadピンク系サンプルマーカー1
#ff9393ピンク系サンプルマーカー2
#ff7f7fピンク系サンプルマーカー3

オススメの青系マーカー

カラーコードサンプル
#c1e0ff青系サンプルマーカー1
#9eceff青系サンプルマーカー2
#7fbfff青系サンプルマーカー3

使い方の注意!こんな表示は見にくい

目への刺激が強い

こんな文字は読みにくい

これは強い黄色(#ffff00)に最大の太さ(0%)を指定した場合です。文字も通常の太さのため読みやすいとは言えません。

文字の色まで追加!

赤を追加!こんな文字は読みにくい

安っぽい情報商材のセールスレターでやっている人をたまに見かけます。
強調のために黄色い背景と合わせて文字を赤くしてしまうパターン。よくないのは見ての通りです。

使いすぎ

文章の中でマーカーを使いすぎていると、どこが重要な箇所かわからなくなります。

カラフルにしてしまう

文章の中で様々なカラーマーカーを多用してしまうとゴチャゴチャしてしまいます。
目的にあわせて基本的には1色にしておくといいでしょう。

まとめ

テキストを装飾するのにマーカー(蛍光ペン風)はとても使いやすいです。文章の内容も重要ではありますが、ユーザーが必要な箇所を探しやすくするために強調するべきところの表示を変えてあげる必要があります。使いすぎたり、色が多すぎると逆にわかりにくいので注意しましょう。オススメのカラーは黄色、ピンク、青で基本1色にしておくのがいいです!

この記事を書いた人

鳥井 慎太郎
鳥井 慎太郎
Web事業家/ブロガー
毎日楽しい。 個人開発(Webサービス、ゲームアプリ)