記事のテキストを強調したいときにオススメなのがマーカーの装飾をする方法です。
この記事ではCSSで蛍光ペンで線を引いたような表現をする方法を解説します。色のパターンやオススメのカラー、線の幅の調整、スクロールに合わせて動くアニメーションなどのサンプルを用意！そのままコピペで使えます。
Contents
基本的な指定
backgroundを指定して装飾します
1 | background: linear-gradient(transparent 太さ, 色, 太さ) |
色と太さを指定するだけでそれっぽい表示にできます。
太さは%で指定しますが詳しい方法は下記にまとめています。
サンプルではmarkタグに指定
この記事のサンプルではmarkタグに対してCSSを指定しています。
1 | <mark>markタグのテキストにマーカーを指定</mark> |
1 2 3 4 | mark { background: linear-gradient(transparent 70%, #fff799 70%); font-weight: bold; } |
classを指定して使う場合などは置き換えてください。
1 | <span class="mark">markタグのテキストにマーカーを指定</span> |
1 2 3 4 | .mark { background: linear-gradient(transparent 70%, #fff799 70%); font-weight: bold; } |
文字を太字にする
装飾する文字は太字にするのがオススメです！
マーカー装飾をする箇所は強調したいと思いますので、よりハッキリさせることができます。
通常の太さの文字の場合
太い文字の場合
1 | font-weight: bold; |
「font-weight」を指定しましょう。
角を丸める
通常の場合
角を丸めた場合
1 | border-radius: 4px; |
「border-radius」を指定して角を丸めます。線が太い場合や濃いめの色の場合に少しやわらかくすることができます。
線の太さ（幅）を指定する
基本の指定方法
70%指定のマーカーサンプル
下記が70%を指定した場合のCSSです。
1 2 3 4 | mark { background: linear-gradient(transparent 70%, #fff799 70%); font-weight: bold; } |
1 | <mark>70%指定のマーカーサンプル</mark> |
%の数字を変えることで太さを変えることができます。
太さごとのサンプル
| 指定% | 表示 |
|---|---|
| 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色があれば基本的にいいと思います。
その３色の中でオススメなカラーをいくつか紹介します。
オススメの黄色系マーカー
| カラーコード | サンプル |
|---|---|
| #fff799 | 黄色系サンプルマーカー1 |
| #ffe28c | 黄色系サンプルマーカー2 |
| #fff799 | 黄色系サンプルマーカー3 |
1 2 3 4 5 6 7 8 9 10 11 12 | mark.yellow1 { background:linear-gradient(transparent 70%, #fff799 70%); font-weight:bold; } mark.yellow2 { background:linear-gradient(transparent 70%, #ffe28c 70%); font-weight:bold; } mark.yellow3 { background:linear-gradient(transparent 70%, #ffdc00 70%); font-weight:bold; } |
オススメのピンク系マーカー
| カラーコード | サンプル |
|---|---|
| #ffadad | ピンク系サンプルマーカー1 |
| #ff9393 | ピンク系サンプルマーカー2 |
| #ff7f7f | ピンク系サンプルマーカー3 |
1 2 3 4 5 6 7 8 9 10 11 12 | mark.pink1 { background:linear-gradient(transparent 70%, #ffadad 70%); font-weight:bold; } mark.pink2 { background:linear-gradient(transparent 70%, #ff9393 70%); font-weight:bold; } mark.pink3 { background:linear-gradient(transparent 70%, #ff7f7f 70%); font-weight:bold; } |
オススメの青系マーカー
| カラーコード | サンプル |
|---|---|
| #c1e0ff | 青系サンプルマーカー1 |
| #9eceff | 青系サンプルマーカー2 |
| #7fbfff | 青系サンプルマーカー3 |
1 2 3 4 5 6 7 8 9 10 11 12 | mark.blue1 { background:linear-gradient(transparent 70%, #c1e0ff 70%); font-weight:bold; } mark.blue2 { background:linear-gradient(transparent 70%, #9eceff 70%); font-weight:bold; } mark.blue3 { background:linear-gradient(transparent 70%, #7fbfff 70%); font-weight:bold; } |
使い方の注意！こんな表示は見にくい
目への刺激が強い
こんな文字は読みにくい
1 2 3 | mark { linear-gradient(transparent 0%, #ffff00 0%); } |
これは強い黄色（#ffff00）に最大の太さ（0%）を指定した場合です。文字も通常の太さのため読みやすいとは言えません。
文字の色まで追加！
赤を追加！こんな文字は読みにくい
1 2 3 4 | mark { linear-gradient(transparent 0%, #ffff00 0%); color:#FF0000; } |
安っぽい情報商材のセールスレターでやっている人をたまに見かけます。
強調のために黄色い背景と合わせて文字を赤くしてしまうパターン。よくないのは見ての通りです。
使いすぎ
文章の中でマーカーを使いすぎていると、どこが重要な箇所かわからなくなります。
カラフルにしてしまう
文章の中で様々なカラーのマーカーを多用してしまうとゴチャゴチャしてしまいます。
目的にあわせて基本的には1色にしておくといいでしょう。
まとめ
テキストを装飾するのにマーカー（蛍光ペン風）はとても使いやすいです。文章の内容も重要ではありますが、ユーザーが必要な箇所を探しやすくするために強調するべきところの表示を変えてあげる必要があります。使いすぎたり、色が多すぎると逆にわかりにくいので注意しましょう。オススメのカラーは黄色、ピンク、青で基本1色にしておくのがいいです！
