マーカー線（蛍光ペン）をおしゃれにするCSSとHTML解説｜7色3種のサンプル付き

2024年9月16日

当ページのリンクには広告が含まれています。

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

マーカー線のHTMLとCSS
border下線との違い
おしゃれにみせるコツ
コピペで使える7色3種類のサンプルコード

を解説しました。

ちなみに当サイトで使用中テーマSWELLでは、コードを書かずとも4色4種のマーカー線が最初から用意されています。

①細いマーカー
②太いマーカー
③細いストライプマーカー
④太いストライプマーカー

投稿画面から選択するだけなので、マウス操作のみで直感的に使用できます。
※.色も自由に指定可能

→詳細はこちら

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

サイトをみてみる

マーカー線で使用する4つのHTMLとCSS解説

基本的にspanタグを使用する

例えば、このマーカー線をHTMLで書くと以下になります。

<p>例えば、<span class="marker">このマーカー線をHTMLで書くと以下になります。</span></p>

プロパティの説明は割愛しますが、spanタグは改行されない性質を持ちます。
そのため、文章の間に入ってもブラウザ上のテキストが崩れることはありません。
※.pやdivタグだと改行されてしまう。

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

サンプルのCSSは上記のように指定しています。
background:〇〇で、マーカー線の”色“と”太さ“を指定。
※.線の太さ指定については後ほど解説
font-weight: bold;は、テキストを太字にする指定です。

.marker-blue {
 background: linear-gradient(transparent 0%, #c1e0ff 0%);
 font-weight: bold;  
}
.marker-yellow {
  background: linear-gradient(transparent 75%, #fff799 75%);
font-weight: bold; 
}
.marker-green {
  background: linear-gradient(transparent 75%, #bfff7f 75%);
font-weight: bold; 
}

カラーを増やす場合は、class名にmarker〇〇のように色の指定をしておくと、あとで見たときにわかりやすいです。

bタグをマーカー線に装飾する

bタグとはフォントを太字にするためだけのタグです。

<p>bタグとはフォントを<b>太字にするためだけ</b>のタグです。</p>

b {
  background: linear-gradient(transparent 65%, #c1e0ff 65%);
}

上記のように指定すると、こんな風に見えます。

bタグに指定できるのは1色だけです。
マーカーを複数色使いたい方は、最初のspanタグと併用する必要があります。

strongタグをマーカー線に見せる

strongタグとは、重要を意味するタグです。
bタグとの違いは、検索エンジンにもその文言が重量であると伝えられることです。

またショートカットキーが用意されているため、キーボード操作から呼び出しやすいのも特徴です。

strongタグのショートカットキー

Mac：Command＋B
Windows：Ctrl＋B

テーマによると思いますが、デフォルトのstrongタグは、このように太字になるだけです。
※.下の点線は当サイトテーマSWELLの設定。

strong {
  background: linear-gradient(transparent 65%, #c1e0ff 65%);
}

上記のように指定すると、こんな風に見えます。

strongタグに指定できるのも1色です。
マーカーを複数色使いたい方は、最初のspanタグまたはbタグと併用する必要があります。

markタグについて

HTML5からmarkタグが追加されました。
例えば、このように<mark>ここに文章</mark>囲むことで、マーカー線を引けるものです。

テーマ側で色の指定がなければ、デフォルトは黄色い線になります。

こちらもCSSで指定することができます。

mark {
  background: linear-gradient(transparent 65%, #c1e0ff 65%);
}

上記の指定をすると、こんなふうに見えます。

マーカー線とborder下線の違い

マーカー線のサンプル

border下線のサンプル

マーカー線はテキストに被せて指定できるのに対し、border下線はテキストの下に引かれます。
border線の詳細については下記で解説しました。

border線の種類別｜HTML&CSSサンプル21選

マーカー線（蛍光ペン）をおしゃれにするCSSのコツ

太さは0％もしくは60〜70%くらいがおすすめ

マーカー線は、線の太さを自由に設定できます。

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

上記の0％部分を両方変更することで、太さが決まります。
基本的に左右が同じ値になるようにしましょう。
以下に0〜95％まで20段階のサンプルがありますので、参考にしてください。

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

テキストと高さを合わせるなら0％
マーカーとして使うなら60〜70％
あたりがおすすめです。
75％を超えてくるとあえてマーカー線にする必要はなく、border下線でも良い気がします。

クドい装飾を避ける

背景色×太字×テキストカラー×マーカー4つの組み合わせ

効果がよくわからない美容系やサプリメントの広告などで見かけますね。
装飾渋滞になりますので、特別な理由がなければ、太字＋マーカーくらいにとどめておくと良いでしょう。

原色や濃い色を使わない

#ff0000＝赤色｜#0000ff＝青色｜#ffff00＝黄色

原色や濃い色は目にも悪く、色によっては文字の下が隠れてしまうため、やめておきましょう。

角丸指定で柔らかい印象に

こちらは通常のマーカーです。

角を少し丸くしたマーカーです。

<p><span class="markermaru">角を少し丸くしたマーカーです。</span></p>

.markermaru{
  background: linear-gradient(transparent 0%, #fcf69f 0%);
  border-radius:6px;
}

border-radiusで角の丸みを指定できます。
パソコンからだと目を凝らさないとわかりませんが、スマホからだとよくわかります。
スマホ集客がメインかつ優しい雰囲気のサイトだと相性が良いかもしれません。

太字指定でより強調できる

こちらは細字の文章です。

こちらは太字の文章です。

<p><span class="markerbold">こちらは太字の文章です。</span></p>

.markerbold{
  background: linear-gradient(transparent 65%, #fcf69f 65%);
  font-weight: bold;
}

font-weight: bold;で太字の指定ができます。
通常のマーカーとして使うなら太字にしたほうが、バランスが良いでしょう。
テキストの高さに合わせるなら細字のままでも十分目立ちます。

ストライプ柄のマーカー線を引く方法

<p><span class="marker-stripe">マーカー線をストライプ柄にしました。</span></p>

.marker-stripe {
  background: repeating-linear-gradient(-90deg, 
  #c1e0ff 0, #c1e0ff 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 40%;
  background-repeat: no-repeat;
}

-90deg：ストライプの角度（90度）の指定
45度に指定すれば斜めの線になります。
#〇〇：色の指定（両方同じカラーに揃える）
0〜2pxの範囲をこの色にしています。
transparent：透明にする指定
2px〜4px以降を透明にしています。
background-position：線を引き始める場所の指定
サンプルでは、左下にしています。
background-size：線の横幅・線の縦幅の指定
40％の値を変更することで、線の太さを変更できます。
background-repeat：画像の繰り返しを防ぐ指定
ないとストライプ柄のデザインが崩れます。

調整する場合は、色のついた部分のみ変更してください。
②と③の値を調整することで、ストライプの間隔を変更できます。

グラデーションマーカー線を引く方法

<p><span class="marker-gradation">グラデーションマーカー線を引いてみました。</span></p>

.marker-gradation {
  background: linear-gradient(120deg, #89f7fe 20%, #66a6ff 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
}

グラデーションのカラー選定は、ジェネレーターを活用すると良いでしょう。
カラーコードの％設定は、右側は基本100％で固定、左側の色をを何％伸ばすか？で調整します。
background-size30%の値で線の太さを調整できます。

スクロールに合わせてマーカー線を引く方法

マーカー線（蛍光ペン）のコピペサンプル7色3種類

各カラーごとに

一色マーカー線
ストライプマーカー線
グラデーションマーカー線

の3パターンを作成しました。
どれもコピペで使えます。

HTMLはすべて<span>タグを使用し、テキストは太字に指定しました。

レッド系

一色マーカー線

カラー：#ffa8a8｜太さ：65％

コードを表示する

<p><span class="marker-red"></span></p>

.marker-red {
  background: linear-gradient(transparent 65%, #ffa8a8 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー：#ff7f7f｜太さ：35％｜角度90度

コードを表示する

<p><span class="marker-stripe-red"></span></p>

.marker-stripe-red {
  background: repeating-linear-gradient(-90deg, 
  #ff7f7f 0, #ff7f7f 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー：#FEB692×#EA5455｜太さ：30％

コードを表示する

<p><span class="marker-gradation-red"></span></p>

.marker-gradation-red {
  background: linear-gradient( 120deg, #FEB692 30%, #EA5455 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

ブルー系

一色マーカー線

カラー：#a8d4ff｜太さ：65％

コードを表示する

<p><span class="marker-blue></span></p>

.marker-blue {
  background: linear-gradient(transparent 65%, #a8d4ff 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー：#80bfff｜太さ：35％｜角度90度

コードを表示する

<p><span class="marker-stripe-blue></span></p>

.marker-stripe-blue {
  background: repeating-linear-gradient(-90deg, 
  #80bfff 0, #80bfff 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー：#89f7fe×#66a6ff｜太さ：30％

コードを表示する

<p><span class="marker-gradation-blue"></span></p>

.marker-gradation-blue {
  background: linear-gradient(120deg, #89f7fe 30%, #66a6ff 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

イエロー系

一色マーカー線

カラー：#fff799｜太さ：65％

コードを表示する

<p><span class="marker-yellow"></span></p>

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

ストライプマーカー線

カラー：#ffec47｜太さ：35％｜角度90度

コードを表示する

<p><span class="marker-stripe-yellow></span></p>

.marker-stripe-yellow {
  background: repeating-linear-gradient(-90deg, 
  #ffec47 0, #ffec47 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー：#fcef97×fce232｜太さ：30％

コードを表示する

<p><span class="marker-gradation-yellow"></span></p>

.marker-gradation-yellow {
  background: linear-gradient( 135deg, #fcef97 30%, #fce232 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

グリーン系

一色マーカー線

カラー：#bfff7f｜太さ：65％

コードを表示する

<p><span class="marker-green"></span></p>

.marker-green {
  background: linear-gradient(transparent 65%, #bfff7f 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー：#7fff7f｜太さ：35％｜角度90度

コードを表示する

<p><span class="marker-stripe-green"></span></p>

.marker-stripe-green {
  background: repeating-linear-gradient(-90deg, 
  #7fff7f 0, #7fff7f 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー：#d4fc79×#96e6a1｜太さ：30％

コードを表示する

<p><span class="marker-gradation-green"></span>[</p>

.marker-gradation-green {
  background: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

ピンク系

一色マーカー線

カラー：#ffadd6｜太さ：65％

コードを表示する

<p><span class="marker-pink"></span></p>

.marker-pink {
  background: linear-gradient(transparent 65%, #ffadd6 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー：#ff7fbf｜太さ：35％｜角度90度

コードを表示する

<p><span class="marker-stripepink-"></span></p>

.marker-stripe-pink {
  background: repeating-linear-gradient(-90deg, 
  #ff7fbf 0, #ff7fbf 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー#ffc1e0：×#ff75ba｜太さ：30％

コードを表示する

<p><span class="marker-gradation-pink"></span></p>

.marker-gradation-pink {
  background: linear-gradient( 120deg, #ffc1e0 20%, #ff75ba 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

オレンジ系

一色マーカー線

カラー：#ffd1a3｜太さ：65％

コードを表示する

<p><span class="marker-orange"></span></p>

.marker-orange {
  background: linear-gradient(transparent 65%, #ffd1a3 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー：#ffb56b｜太さ：35％｜角度90度

コードを表示する

<p><span class="marker-stripe-orange"></span></p>

.marker-stripe-orange {
  background: repeating-linear-gradient(-90deg, 
  #ffb56b 0, #ffb56b 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー：#ffe985×#fa742b｜太さ：30％

コードを表示する

<p><span class="marker-gradation-orange"></span></p>

.marker-gradation-orange {
  background: linear-gradient( 135deg, #FFE985 10%, #FA742B 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

パープル系

一色マーカー線

カラー：#dbb7ff｜太さ：65％

コードを表示する

<p><span class="marker-purple"></span></p>

.marker-purple{
  background: linear-gradient(transparent 65%, #dbb7ff 65%);
  font-weight: bold; 
}

ストライプマーカー線

カラー：#b770ff｜太さ：35％｜角度90度

コードを表示する

<p><span class="marker-stripe-purple"></span></p>

.marker-stripe-purple {
  background: repeating-linear-gradient(-90deg, 
  #b770ff 0, #b770ff 2px, 
  transparent 2px, transparent 4px);
  background-position:0 100%;
  background-size: 100% 35%;
  background-repeat: no-repeat;
  font-weight: bold; 
}

グラデーションマーカー線

カラー：#ewb0ff×#9f44d3｜太さ：30％

コードを表示する

<p></p><span class="marker-gradation-purple"></span>

.marker-gradation-purple{
  background: linear-gradient( 135deg, #E2B0FF 10%, #9F44D3 100%);
  background-repeat: no-repeat;
  background-position:0 100%;
  background-size: 100% 30%;
  font-weight: bold; 
}

複数色マーカー線の管理方法

ブロックエディタには、同期パターンという機能があります。
これはあらかじめ任意コンテンツを登録しておけるものです。

ここでは当サイトSWELLの活用方法を解説します。
※.テーマにより管理画面サイドバー名称が異なったり、使い方に若干の違いはあります。

すでにSWELLを使用中の方は、4色のマーカー線を投稿画面から選択できるため、基本は不要です。
グラデーションマーカーなど、テーマ側の設定にない装飾を使いたい方は参考にしてください。

①サイドバーの「パターン」をクリック
②「新規パターンを追加」をクリック

③同期を「OFF」にする
④「生成」をクリック

同期はあとから変更できないため、必ずOFFにしてください。

タイトルはショートコードで呼び出す際の名称です。
本文に「/カスタム」と入力して”カスタムHTML“というブロックを選択してください。
その中にマーカー用のHTMLを貼り付けます。
公開をクリックして呼び出し用ブロックの完成です。

投稿画面で「/マーカー赤」と入力すると、作成したマーカーブロックを選択できます。
複数色使いたい方は、マーカー青、マーカー緑など色を判別できるタイトルを付け、同じ要領で登録しておきましょう。

<p>通常のテキストはここに書いて、<span class="marker-red">マーカーを引きたいところをこの中に書きます。</span></p>

このように書くことで、ブラウザでは以下のように表示されます。

通常のテキストはここに書いて、マーカーを引きたいところをこの中に書きます。

当サイトテーマSWELLでは、より直感的にマーカー線を引ける仕様になっています。
このほかにも大抵のカスタマイズは、マウス操作のみで完結するため、特に初心者の方には非常におすすめです。

→詳細はこちら

結論：マーカー線は過度な装飾を避けテキストとのバランスを取ろう

以上、マーカー線のHTMLとCSSについて解説しました。
サイトの雰囲気と合うカラーを選択して、読んで欲しいところを強調してみましょう。

border下線も同じく、テキストにラインを引けますので、お好きな方を試してみてください。

記事への質問等はこちらからどうぞ

この記事へのコメント数（1件）

パトモス より:

2021年8月17日 16:15

はじめまして。
パトモスといいます。
数日前に「カゲサイ」ブログに出会いました。
昔、多少 HTML・CSS をかじっていたのですが、復習を兼ねて「カゲサイ」をテキストとして、キャプチャしながら勉強のやり直しをしています。
星の数ほどあるブログの中でも、わかりやすさ、ていねいさ、内容の広さ・深さなど群を抜いていると思います。
コードなどは「VSCode」で実際に手打ちして、ブラウザで確認しながら作業を進めています。
拙いながらも WordPress （テンプレートは賢威8.0）でブログを公開していますので、HTML・CSSの学習が済んだら、WordPress「STEP1」～「STEP10」にとりかかる予定です。

優れたブログ、ありがとうございました。

返信

マーカー線（蛍光ペン）をおしゃれにするCSSとHTML解説｜7色3種のサンプル付き

マーカー線で使用する4つのHTMLとCSS解説

基本的にspanタグを使用する

bタグをマーカー線に装飾する

strongタグをマーカー線に見せる

markタグについて

マーカー線とborder下線の違い

マーカー線（蛍光ペン）をおしゃれにするCSSのコツ

太さは0％もしくは60〜70%くらいがおすすめ

クドい装飾を避ける

原色や濃い色を使わない

角丸指定で柔らかい印象に

太字指定でより強調できる

ストライプ柄のマーカー線を引く方法

グラデーションマーカー線を引く方法

スクロールに合わせてマーカー線を引く方法

マーカー線（蛍光ペン）のコピペサンプル7色3種類

レッド系

一色マーカー線

ストライプマーカー線

グラデーションマーカー線

ブルー系

一色マーカー線

ストライプマーカー線

グラデーションマーカー線

イエロー系

一色マーカー線

ストライプマーカー線

グラデーションマーカー線

グリーン系

一色マーカー線

ストライプマーカー線

グラデーションマーカー線

ピンク系

一色マーカー線

ストライプマーカー線

グラデーションマーカー線

オレンジ系

一色マーカー線

ストライプマーカー線

グラデーションマーカー線

パープル系

一色マーカー線

ストライプマーカー線

グラデーションマーカー線

複数色マーカー線の管理方法

結論：マーカー線は過度な装飾を避けテキストとのバランスを取ろう

記事への質問等はこちらからどうぞ

この記事へのコメント数 （1件）

パトモス へ返信する コメントをキャンセル

この記事へのコメント数（1件）

パトモスへ返信するコメントをキャンセル