コロナ対策・電子書籍100冊半額クーポンで引きこもろう

CSSマーカー線(蛍光ペン風)の解説【42色のサンプル付き】

蛍光ペン風マーカー線CSS

この記事ではブログで使用する蛍光ペン風マーカー線について

  • ・「カラーの使い方」
  • ・「カラーが相手に与えるイメージ」
  • ・「線の太さによる印象の違い」
  • ・「フォントによる見え方の違い」

などをサンプルコードを使いながら細かく解説しています。

そんなのいいから、さっさとマーカー線を引きたいという方は、一番下にコピペで使えるカラー別コードを載せているので、目次から飛んでください。

ただしマーカー線1つでサイトのイメージが変わったり、センスが出てしまうのでカラーだけでなく、基本は押さえておくことをオススメします。

CSSマーカー線で使用するコードについて

当サイトでは、以下のコードでマーカー線を引いています。

HTML
copyする
<span class="marker">ここに文字を入れる</span>

カラーを増やす場合は、class名のmarkermarker1marker2と増やしていきます。

CSS
copyする
.marker { background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; }

上記コードだとこのようなマーカー線になります。

もう一つよく使われる<HTMLコード>がこちらです。

HTML
<strong class="marker">ここに文章</strong>

strongタグに<class>名をつけるタイプですね。

strongとは「重要」を意味するタグになります。

こうすることで見た目だけでなく、検索エンジンにも「この文章は重要です」と伝えることができます。

しかしこれだとマーカーを引いたところが全て重要になってしまうのです。

例えば記事を作成するに辺り、重要でなくてもマーカー線を引く場合はよくあります。

今回の記事でいえば、マーカー線を解説するにあたり、かなり使用しています。

では引いている箇所全てを検索エンジンに重要だと伝えたいのか?というと、そんなことはなく、あくまで読者(人間の動線)を意識して使っています。

なので個人的にはstrongタグ(重要)とマーカー線は別個にしておくことをオススメします。

補足

もう一つ「HTML5」では、<mark>というタグが追加され、<mark>ここに文章</mark>このようにタグで囲むとマーカー線と同じ装飾ができます。

そのまま使うと上記のように黄色い線がデフォルトです。(テーマ側で指定してある場合は違うカラーになります)

ただし、このタグも重要などの意味はなく、文章を目立たせる為だけにあります。「CSS」で背景カラーや線の太さを変更するのであれば、どちらのコードを使用しても同じです。

CSSマーカー線の太さサンプル20種

マーカー線において、線の太さにも気を使うと文章の印象はだいぶ変わります。

CSS
copyする
.marker { background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; }

マーカー線の太さは、上記コードの%部分で変更できます。

正確には、transparentの効果によって背景の一部を透明にし、カラーコード横ので高さを決めています。

なので、基本的に2つの「%」は揃え、数値が低いほど太く、高いほど細くなります。

以下の表に「0%」〜「95%」をサンプルとして載せたので、見比べてみてください。

補足

100%の場合は、線がないので95%までにしてあります。

マーカー線の太さサンプル1太さ0%のマーカー線太さ5%のマーカー線
マーカー線の太さサンプル2太さ10%のマーカー線太さ15%のマーカー線
マーカー線の太さサンプル3太さ20%のマーカー線太さ25%のマーカー線
マーカー線の太さサンプル4太さ30%のマーカー線太さ35%のマーカー線
マーカー線の太さサンプル5太さ40%のマーカー線太さ45%のマーカー線
マーカー線の太さサンプル6太さ50%のマーカー線太さ55%のマーカー線
マーカー線の太さサンプル7太さ60%のマーカー線太さ65%のマーカー線
マーカー線の太さサンプル8太さ70%のマーカー線太さ75%のマーカー線
マーカー線の太さサンプル9太さ80%のマーカー線太さ85%のマーカー線
マーカー線の太さサンプル10太さ90%のマーカー線太さ95%のマーカー線

こうして並べると、太すぎても、細すぎても違和感がありますよね。

使っているフォント種類やサイズによって、太さイメージも変わりますが、基本的には「65%〜80%」辺りをオススメします。

85%以上になると、細すぎるためマーカーが目立ちません。(当サイトのフォントだと80%でも細すぎます。)

60%以下になると、文字に被ってきて少し邪魔臭い印象です。

特に太いマーカー線は、カラーに気を使わないと読み手のストレスになります。

こんな感じで使っているサイトをよく見かけますが、目に刺激が強いですし、文字が細いので見にくいですよね。

黄色い背景に赤い文章はもっと、よくないパターンです。この文章イラっとしませんか?

もし太いマーカー線を引く場合は、border-radiusを使って角を少し丸くしたり、適切なカラーにすると同じ文章でも印象はだいぶ変わります。

先ほどと同じ黄色い背景の文章ですが、カラーを変えて、角に少し丸みを持たせています。文章に柔らかさが出てませんか?

CSS
copyする
.marker{ background: linear-gradient(transparent 0%, #fff799 0%); font-weight: bold; border-radius:6px; }

ちなみに、カラーコードの「%」を消すと、グラデーションのようなマーカー線になります。

CSS
.marker{ background: linear-gradient(transparent 0%, #fff799 ); font-weight: bold; }

CSSマーカー線上のフォントは太字にしよう

CSS
copyする
.marker { background: linear-gradient(transparent 0%, #c1e0ff 0%); font-weight: bold; }

font-weight:bold;を使うことによって、文字を太字にできます。

太字にする理由ですが、以下の文章を見比べてみてください。

AIが苦手とすることの1つに、異なる文脈や背景を組み合わせるクリエイティブ性があります。

AIが苦手とすることの1つに、異なる文脈や背景を組み合わせるクリエイティブ性があります

2つ目の文章の方が目に止まりますよね。

冒頭で説明した通り、マーカー線に「SEO的」な効果は全くなく、筆者が読んでもらいたい箇所を強調するためだけにあります。

なので、読者の目に止まる「太字」が効果的です。

CSSマーカー線のサンプル42色

さて前置きが長くなりましたが、ここから私の「オススメカラー」と「オススメしないカラー」合わせて42色のサンプルカラーコードを載せています。

カラーについての解説も少しだけしました。

補足

背景色は白であることが前提で線の太さは「75%」で統一、フォントは太字にしています。

オススメのレッド系マーカー線

サンプルカラー1

HTML
copyする
<span class="marker1">ここに文章</span>
style.css
copyする
/* マーカー線・赤 */ .marker1{ background:linear-gradient(transparent 75%, #ffadad 75%); font-weight:bold; }
サンプルカラー2

HTML
copyする
<span class="marker2">ここに文章</span>
style.css
copyする
/* マーカー線・赤 */ .marker2{ background:linear-gradient(transparent 75%, #ff9393 75%); font-weight:bold; }
サンプルカラー3

HTML
copyする
<span class="marker3">ここに文章</span>
style.css
copyする
/* マーカー線・赤 */ .marker3{ background:linear-gradient(transparent 75%, #ff7f7f 75%); font-weight:bold; }

白地に赤は、最も目を惹くカラーです。

「否定的」意味合いを含む文章に使うと効果的です。

私は、スピリチュアルや占いといったオカルトの類が大嫌いです。

なぜなら、それらの背景には必ずビジネスが絡んでいるからです。

補足

カラーによって意味を分けるのは、サイト内で何色か使う場合に限ります。

当サイトは、重要なところは赤いマーカー線一色で統一しています。

オススメしない赤系マーカー線

サンプルカラー4(#ff5151)

サンプルカラー5(#ff0000)

ここまで色が濃いと、マーカーに目がいってしまい文字が入ってこなくなります。

オススメのブルー系マーカー線

サンプルカラー6

HTML
copyする
<span class="marker4">ここに文章</span>
style.css
copyする
/* マーカー線・青 */ .marker4{ background: linear-gradient(transparent 75%, #c1e0ff 75%); font-weight: bold; }
サンプルカラー7

HTML
copyする
<span class="marker5">ここに文章</span>
style.css
copyする
/* マーカー線・青 */ .marker5{ background:linear-gradient(transparent 75%, #9eceff 75%); font-weight:bold; }
サンプルカラー8

HTML
copyする
<span class="marker6">ここに文章</span>
style.css
copyする
/* マーカー線・青 */ .marker6 { background: linear-gradient(transparent 75%, #7fbfff 75%); font-weight: bold; }

青は「肯定的」なことを強調させたい時に使いたいですね。

私はWEB解析が大好きです。

なぜなら、正しい検証をすれば必ず結果が出ることを知っているからです。

オススメしない青系マーカー線

サンプルカラー9(#007fff)

サンプルカラー10(#0000ff)

青は比較的目に優しいカラーですが、ここまで濃いと目の負担になります。

目がチカチカしませんか?

オススメのイエロー系マーカー線

サンプルカラー11

HTML
copyする
<span class="marker7">ここに文章</span>
style.css
copyする
/* マーカー線・黄色 */ .marker7{ background:linear-gradient(transparent 75%, #fff799 75%); font-weight:bold; }
サンプルカラー12

HTML
copyする
<span class="marker8">ここに文章</span>
style.css
copyする
/* マーカー線・黄色 */ .marker8{ background:linear-gradient(transparent 75%, #edde7b 75%); font-weight:bold; }
サンプルカラー13

HTML
copyする
<span class="marker9">ここに文章</span>
style.css
copyする
/* マーカー線・黄色 */ .marker9{ background:linear-gradient(transparent 75%, #ffdc00 75%); font-weight:bold; }

「黄色」は注意を惹くカラーなので、補足などを強調させたい時に使います。

WordPressは自分でホームページやブログを作ることができる魅力的なツールの1つです。

ただし、なかなか奥が深くちゃんと使いこなしている人はほとんどいません。

こんな感じで、カラーごとに意味を統一しておくと文章にまとまりができます。

そして「」や「」は、薄いカラーをオススメしましたが、白地に「薄い黄色」だと、コントラストが分かりづらくなります。

なので、少し濃い目のカラーにしましょう。

オススメしない黄色系マーカー線

サンプルカラー14(#ffffb7)

サンプルカラー15(#ffff00)

「14番」はコントラストが分かりづらい色。

「15番」は目に刺激が強い黄色ですね。

基本的に「」「」「黄色」の3色があれば、事足りると思いますが、ここから先はカラーに意味を持たせるわけではなく、デザイン重視で使う場合のカラーを紹介します。

オススメのグリーン系マーカー線

サンプルカラー16

HTML
copyする
<span class="marker10">ここに文章</span>
style.css
copyする
/* マーカー線・緑 */ .marker10{ background:linear-gradient(transparent 75%, #b2ffb2 75%); font-weight:bold; }
サンプルカラー17

HTML
copyする
<span class="marker11">ここに文章</span>
style.css
copyする
/* マーカー線・緑 */ .marker11{ background:linear-gradient(transparent 75%, #7fff7f 75%); font-weight:bold; }
サンプルカラー18

HTML
copyする
<span class="marker12">ここに文章</span>
style.css
copyする
/* マーカー線・緑 */ .marker12{ background:linear-gradient(transparent 75%, #bfff7f 75%); font-weight:bold; }

白地にグリーンは相性がいいですね。

使うなら、上記のような綺麗なグリーンをオススメします。

オススメしないグリーン系マーカー線

サンプルカラー19(#00ff00)

サンプルカラー20(#578a3d)

サンプルカラー21(#004d25)

「19番」は、目に刺激が強いグリーンです。

「20番」と「21番」は、色が濃すぎて白地に引くと重たい印象になってしまいます。

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

サンプルカラー22

HTML
copyする
<span class="marker13">ここに文章</span>
style.css
copyする
/* マーカー線・ピンク */ .marker13{ background:linear-gradient(transparent 75%, #ffc1e0 75%); font-weight:bold; }
サンプルカラー23

HTML
copyする
<span class="marker14">ここに文章</span>
style.css
copyする
/* マーカー線・ピンク */ .marker14{ background:linear-gradient(transparent 75%, #ffc0cb 75%); font-weight:bold; }
サンプルカラー24

HTML
copyする
<span class="marker15">ここに文章</span>
style.css
copyする
/* マーカー線・ピンク */ .marker15{ background:linear-gradient(transparent 75%, #ff9ece 75%); font-weight:bold; }

ピンクは、女性向けのサイトなんかだと相性抜群ですね。

パステルなど薄めのカラーを使うと可愛らしさが出ます。

オススメしないピンク系マーカー線

サンプルカラー25(#ff51a8)

サンプルカラー25(#ff007f)

サンプルカラー25(#f09199)

「25番」「26番」は、目に刺激が強いピンクですね。

「27番」くらい濃いとピンクが持つ可愛らしさが失われてしまいます。

オススメのライトブルー系マーカー線

サンプルカラー28

HTML
copyする
<span class="marker16">ここに文章</span>
style.css
copyする
/* マーカー線・水色 */ .marker16{ background:linear-gradient(transparent 75%, #c1ffff 75%); font-weight:bold; }
サンプルカラー29

HTML
copyする
<span class="marker17">ここに文章</span>
style.css
copyする
/* マーカー線・水色 */ .marker17{ background:linear-gradient(transparent 75%, #bce2e8 75%); font-weight:bold; }
サンプルカラー30

HTML
copyする
<span class="marker18">ここに文章</span>
style.css
copyする
/* マーカー線・水色 */ .marker18{ background:linear-gradient(transparent 75%, #afeeee 75%); font-weight:bold; }

青系のマーカー線を使うなら、「水色」も綺麗に引けるのでオススメです。

薄めのカラーがいいですね。

オススメしないライトブルー系マーカー線

サンプルカラー31(#00ffff)

サンプルカラー32(#7fffff)

目に刺激が強い「水色」です。

オススメのオレンジ系マーカー線

サンプルカラー33

HTML
copyする
<span class="marker19">ここに文章</span>
style.css
copyする
/* マーカー線・オレンジ */ .marker19{ background:linear-gradient(transparent 75%, #ffe0c1 75%); font-weight:bold; }
サンプルカラー34

HTML
copyする
<span class="marker20">ここに文章</span>
style.css
copyする
/* マーカー線・オレンジ */ .marker21{ background:linear-gradient(transparent 75%, #ffce9e 75%); font-weight:bold; }
サンプルカラー35

HTML
copyする
<span class="marker22">ここに文章</span>
style.css
copyする
/* マーカー線・オレンジ */ .marker22{ background:linear-gradient(transparent 75%, #ffbf7f 75%); font-weight:bold; }

「オレンジ」は文章に優しい印象を持たせます。

なるべく、薄めのカラーがオススメです。

オススメしないオレンジ系マーカー線

サンプルカラー36(#ff7f00)

サンプルカラー37(#ee7800)

ここまで濃いと、「オレンジ」の持つ優しさが損なわれます。

オススメのパープル系マーカー線

サンプルカラー38

HTML
copyする
<span class="marker23">ここに文章</span>
style.css
copyする
/* マーカー線・紫 */ .marker23{ background:linear-gradient(transparent 75%, #cab8d9 75%); font-weight:bold; }
サンプルカラー39

HTML
copyする
<span class="marker24">ここに文章</span>
style.css
copyする
/* マーカー線・紫 */ .marker24{ background:linear-gradient(transparent 75%, #ce9eff 75%); font-weight:bold; }

紫は毒々しいカラーなので通常使いませんが、使うのであれば上記のような薄めのカラーをオススメします。

オススメしないパープル系マーカー線

サンプルカラー40(#aa4c8f)

サンプルカラー41(#7f00ff)

サンプルカラー42(#4b0082)

「40番」と「42」番は、毒々しさMAXですね。

白地には合わず、文字も消えてしまうので避けましょう。

「41番」は、目に刺激が強い紫です。

マーカー線はよく使うと思うので「AddQuicktag」に登録しておくと、作業効率がグンと上がります。

こちらにマニュアル書を作成してあるので、合わせて読んでおくと理解が深まります。

AddQuicktagの設定AddQuicktagの使い方と設定【隠れた機能も全て解説】

CSSマーカー線の解説【まとめ】

お気に入りのカラーは見つかりましたか?

ぜひマーカー線を使って文章で遊んでみてください。

ついでに、ボーダー線もいかが?

border線デザインborder線の種類別ーHTML&CSSデザイン14選
カゲサイーカゲオ

プロ並みにこだわる必要はありませんが、全くデザインを無視したサイトはネットに明るい読者に見抜かれてますよ。

補足

ちなみに、現在はマーカーにアニメーションをかけています。

参考記事:スクロールで開始!CSSとjqueryで作るマーカー(蛍光ペン)アニメーション

コメントはお気軽にどうぞ