WordPressカスタマイズまとめ←クリック

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

蛍光ペン風マーカー線CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

補足

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

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

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

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

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

CSS
.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
.marker{
 background: linear-gradient(transparent 0%, #fff799 0%);
 font-weight: bold; 
border-radius:6px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

補足

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

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

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

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

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

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

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

補足

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

補足

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

参考記事:スクロールで開始!CSSとjqueryで作るマーカー(蛍光ペン)アニメーション
ノンデザイナーズ・デザインブック
Amazon【書籍版】で探すKindle【電子書籍】で探す

ご質問・ご感想・受付中

「メールアドレス入力欄」を削除した為「返信通知」は届きません。
確実に返信が必要な場合は「お問い合わせ」または「TwitterのDM」よりご連絡ください。

他の方にも有益になると判断した質問やコメントは記事に引用させて頂く場合がありますのであらかじめご了承下さい。