蛍光ペン風のマーカーのカラーを、
グラデーションカラーにする方法【サンプル付】

2023.07.15
2019.10.15

HTML・CSS系

ブログやサイトのテキスト強調の1つとして、蛍光ペン風のマーカーを引く手法が最近では多くのサイトで取り入れられています。

以前にcssで蛍光ペン風のマーカーを引く方法という解説をしていますが、そこではこういう感じの単色での蛍光ペン風マーカーでラインを引くというやり方でした。

CSSでテキストに蛍光ペン風マーカーを付ける方法（サンプルデモあり）: 色々なブログ記事を見ていると、誰がスタートで広めたかはわからないのですが、多くのブログで協調したいところに、蛍光ペンのようなマーカー（←これです）で装...

ただ少し凝ったものが求められたり、デザインなどによってはグラデーションカラーを使いたいという要望をたまーにいただくことがあり、今回はそんな蛍光ペン風マーカーをグラデーションカラーで引く方法についてまとめています。

この記事の目次

実際に使うコード

そもそも論になりますが、通常の蛍光ペン風マーカーであれば、下記のようなコードで大丈夫でした。

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

これが、グラデーションカラーにしたいとなると、下記のようなコードになります。

.marker-gradation {
  background-image: linear-gradient( 90deg, #ffff00, #ff9966 );
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}

上記のcssを設定すると、こういうマーカーが引けるようになります。

実際に使う場合は、通常のマーカーと同じように、<span>などで囲って使う形で問題ありません。前回の記事でも書いていますが、ブロック要素などで使うと改行が入るとおかしくなってしまうため、インライン要素で使うようにしましょう。

自由にカスタマイズするためのコードの解説

上記の設定だけだと、何をどう変えればと思われる方もいるかもしれませんので、自分のサイトにあったカラーや見た目に調整するに、どこをどう変えたら何が変わるのか、どこは変えてはいけないのかなどを見ておきましょう。

基本的にグラデーションカラーの蛍光ペン風マーカーでいじれるところというのは

グラデーションするカラーとその向き
マーカーの太さ（高さ）
グラデーションの位置とリピート（ただしほぼ固定）

といったところになります。これらにpaddingなどの要素を加えて、余白や位置を調整するという形になります。

グラデーションカラーを調整する

では、実際にグラデーションカラーを自由に設定するためにはどうするかを見ておきましょう。

/*解説*/
background-image: linear-gradient( グラデーションの方向, カラー1 , カラー2 );

/*実際のコード*/
background-image: linear-gradient( 90deg, #ffff00 , ff9966 );

という使い方をします。
といっても簡単で、グラデーションさせたいカラー1とカラー2を指定するたけです。

蛍光ペン風マーカーと使うタグは同じですが、単色では入っていなかった、90degというのが入っていますが、これを入れる事で、カラー1からカラー2のグラデーションを、左から右の向きにグラデーションするという指定になります。

一般的な用途としては、グラデーションの蛍光ペン風マーカーは、左から右へグラデーションする使い方をする事が多いはずなので、90degはほぼ固定値として考えておいて問題ないと言えます。

グラデーションの向きを変えたい場合

90degで使う事がほとんどかと思いますが、用途などによってはグラデーションの向き（角度）を変えたいという場合もあるかもしれません。その際は90degのところの値を変えることで対応できます。

0：下から上に向かってグラデーション
45deg：左下から右上に向かってグラデーション
90deg：左から右に向かってグラデーション
180deg：上から下に向かってグラデーション【省略時のデフォルト値】
270deg：右から左に向かってグラデーション

とはいえ、実際にグラデーションカラーの蛍光マーカーの使い方であれば、高さも少しの高さのラインになるため、グラデーションの向きが左下から右上に指定しても、ほぼ左から右と見た目は変わらないということになりますので、多くのケースで90degの左から右が使われているかと思います。

カラーは2色以上も設定できる

上記のサンプルでは2カラーのグラデーションにしていますが、カラーをカンマで区切って増やせば、その分だけグラデーションするカラーを増やす事は可能です。

.marker {
  background-image: linear-gradient( 90deg, #ffff00, #ff9966, #dcfec0, #c2f8fc );
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}

実際に上記の4カラーを設定したものを反映すると、こういう見え方になります。グラデーションを増やせばその分だけ色が増えますが見た目的にどうかは考えなければなりません。

とはいえ増やせば良いかというと、そういうものでもありません。

例えばLGBTサイトなどレインボーカラーがテーマであれば、6色や7色のグラデーションをワンポイントとして使うことはあるかもしれませんが、特別な理由などがなければ、実務として見た場合、ほとんどのケースで2カラー、多くても3カラーに留めておくのが良いと思います。

グラデーションの太さを調整する

グラデーションの太さは、background-sizeで調整します。

/*解説*/
background-size: グラデーションの横の長さ グラデーションの高さ;

/*実際のコード*/
background-size: 100% 40%;

横は指定したテキスト全てにラインを引く使い方をするのが一般的なため、基本的に100%指定は変わりませんので、変更する箇所としては、高さの部分になります。

高さの値に「100%」を指定するとテキスト全体に、「50%」と指定すると、テキストの半分の高さにラインが引かれます。

.marker {
  background-image: linear-gradient( 90deg, #ffff00, #ff9966 );
  background-size: 100% 100%;
  background-position: bottom;
  background-repeat: no-repeat;
}

例えば、高さに100%を指定すると、テキスト全体がグラデーションにかかります。蛍光風マーカーというよりは背景に近い見え方と言えるかもしれません

.marker {
  background-image: linear-gradient( 90deg, #ffff00, #ff9966 );
  background-size: 100% 50%;
  background-position: bottom;
  background-repeat: no-repeat;
}

一方で、50%を指定してあげると、テキストのちょうど半分の高さまでグラデーションカラーでのラインマーカーが引かれます。

.marker {
  background-image: linear-gradient( 90deg, #ffff00, #ff9966 );
  background-size: 100% 20%;
  background-position: bottom;
  background-repeat: no-repeat;
}

高さに20%を指定すると、あまり高さがない細いマーカーといった見え方になります。

だいたいの実務などでは、40%前後で指定する事が多いかなと思います。

サイズは%でなくpx指定も可能

サイズの指定は、%ではなくpxでの指定も可能です。
ただしpxで指定すると、いわゆる絶対指定となり、文字サイズが変わったとしてもそのpxの高さ分での表示になります。

そのため、px指定も出来るとはいえ、文字のサイズに合わせた％でラインマーカーを引いてくれる％の方が使い勝手は良いかと思います。

グラデーションの位置とリピートの指定

最後に、位置とリピートの指定を入れていますが、これは蛍光マーカー風の指定であれば、ほぼ固定値になります。

background-position: bottom;
background-repeat: no-repeat;

この記述になりますが、グラデーションの位置は基本テキストの下に配置するのが一般的かと思いますので、bottom指定をすることになり、繰り返しの設定も、no-repeatを入れずに繰り返す仕様にすれば、テキスト全体に背景が繰り返されるため、高さが100%と同じになるので、この値はbottomとno-repeatでほぼ確定という形で考えておいて問題ありません。

綺麗で見やすいグラデーションカラーにするためのポイント

グラデーションは設定カラーを間違えると、逆に汚く見えてしまったり、テキストが強調どころか読みにくい状況になってしまいます。そのため、綺麗で見やすいカラーにする必要がありますが、コツとしては

近い色を指定する
パステル系などの薄めの色を指定する

あたりが挙げられます。
例えば、極端な設定にはなりますが、原色に近いようなしかも同系でないカラーなどを指定すると、こうなってしまいます。

.marker {
  background-image: linear-gradient( 90deg, #ff0000, #0000ff);
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}

真逆のカラーで、しかも濃い系の色のグラデーション指定をしてしまうと、どうしても見た目に問題が出やすくなります。

.marker {
  background-image: linear-gradient( 90deg, #ffaa99, #fcc89c);
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}

一方、上記の設定であれば近い色の薄めのカラーでのグラデーションを指定しているので、比較的見た目も綺麗に見えやすくて読みやすくなります。

以下に、簡単なグラデーションのサンプルを作ってみました。

ブルー系のサンプル

.marker {
  background-image: linear-gradient( 90deg, #a2c9ec, #c2f8fc);
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}

ブルー系のサンプルだと、こういうグラデーションで蛍光ペン風のラインマーカーこういうグラデーションで蛍光ペン風のラインマーカーが引かれます。

グリーン系のサンプル

.marker {
  background-image: linear-gradient( 90deg, #b6e2b6, #dcfec0);
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}

グリーン系のサンプルだと、こういうグラデーションで蛍光ペン風のラインマーカー。こういうグラデーションで蛍光ペン風のラインマーカー。が引かれます。

ピンク系のサンプル

.marker {
  background-image: linear-gradient( 90deg, #ffbdcf, #fee1cf);
  background-size: 100% 40%;
  background-position: bottom;
  background-repeat: no-repeat;
}

ピンク系のサンプルだと、こういうグラデーションで蛍光ペン風のラインマーカー。こういうグラデーションで蛍光ペン風のラインマーカー。が引かれます。