【CSS】複数色のグラデーションマーカーを実装する方法

ブログ記事を読んでいると、よく蛍光ペン風マーカーで装飾されているのを見かけますよね。(←こういうやつ)

こういった単色のマーカーはカンタンに実装できるのですが、2色以上が混ざったマーカーを作るとなると、少し難しくなります。

そこでこの記事では、CSSのみでグラデーションマーカーを作る方法をシェアしようと思います。

CSSをコピペするだけで使えますので、ぜひ試してみてください。

また、カスタマイズして使いたい方のために、コードの詳しい説明も書いています。

目次

【コピペOK】グラデーションマーカーのCSSコード

こちらのコードをコピペするだけで、お使いいただけます。

<!-- HTML サンプル -->
<p><span class="gradient-marker">グラデーションマーカーのテキストが入ります。</span></p>
/* グラデーションマーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #fcf69f, #ff8730);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
}

【実装結果】→グラデーションマーカーのテキストが入ります。

装飾したい箇所をspanタグで囲み、クラスを指定してください。

pタグなどに直接クラスをつけると、うまく動作しない可能性があります。

※詳しくは注意すべきことのセクションで説明しています。

CSSグラデーションマーカーのカスタマイズ方法

ここでは、グラデーションマーカーのカスタマイズ方法を紹介します。

  • グラデーションの色
  • マーカーの太さ
  • グラデーションの角度
  • マーカーの余白

これらのカスタマイズ方法を解説していきます。

グラデーションマーカーの色を変える方法

色を変更するには、以下の部分にご自分の好きなカラーコードをいれてください。

background-image: linear-gradient(90deg, /* 好きな色1 */, /* 好きな色2 */);

きれいな色をつくるコツとしては、

  • なるべく近い色を選ぶこと
  • 薄めの色を選ぶこと

以上の2点です。

2色があまりにもかけ離れていると、微妙な色になりがちです。

また、濃いめの色を選んでしまうと、文字の色が見えにくくなるので、これも避けたいですね。

以下にいい感じの色の組み合わせをいくつか紹介しておきますで、よければ参考にしてみてください。

青系のグラデーションマーカー

/* 青系のグラデーションマーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #4e9ff3, #8eefff);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
}

ピンク系のグラデーションマーカー

/* ピンク系のグラデーションマーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #ff9fba, #ffcfad);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
}

グラデーションマーカーの太さを変える方法

マーカーの太さを変更するには、background-sizeプロパティを変更します。

background-size: /* 横幅 */ /* 縦幅 */

まずコードの説明ですが、background-sizeプロパティは、横幅・縦幅の順に値をとります。

マーカーの横幅は常に100%でOKなので、100%にしておいてください。

次にマーカーの太さを指定するのですが、ここには%やpxなどの単位を使って太さを指定できます。

  • %指定の場合→文字サイズに合わせてマーカーの太さが変わる
  • px指定の場合→文字サイズに関係なく指定した太さになる

以下にいくつか例を載せておきますので、お好きなサイズのマーカーをコピペして使ってみてください。

文字の高さMAXのマーカー

/* 太マーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #fcf69f, #ff8730);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 100%; /* マーカーの太さ調整箇所 */
}

100%を指定することで、文字の高さ全体分のマーカーを設定することができます。

文字の高さ半分のマーカー

/* 中サイズマーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #fcf69f, #ff8730);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 50%; /* マーカーの太さ調整箇所 */
}

高さを50%にすることで、文字の高さ半分をおおうマーカーを設定できます。

ここの数値を色々変えてみて、自分にあったサイズでお使いください。

これら2つの例では、%で高さを指定しているため、文字サイズに応じてマーカーの太さも変わります。

細めのマーカー

/* 細めのマーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #fcf69f, #ff8730);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 5px; /* マーカーの太さ調整箇所 */
}

ここでは、pxで高さを指定してみました。

こうすることで、文字サイズの大きさに関係なく指定した高さのマーカーが設定されるようになります。

個人的には%のほうが使い勝手がいいと思いますが、用途に合わせて使い分けてください。

グラデーションの角度を変える方法

グラデーションの角度を変更するには、以下の箇所を変更します。

background-image: linear-gradient(/* ここに角度を指定 */, #fcf69f, #ff8730);

指定方法は、90deg 135degのように、角度+degで設定します。

  • 0: 下から上
  • 45deg: 左下から右上
  • 90deg: 左から右
  • 180deg: 上から下

数値を変えることで色んな角度のマーカーを作れますが、これらがよく使われます。

グラデーションの角度が上方向のマーカー

/* 上方向のマーカー */
.gradient-marker {
  background-image: linear-gradient(0, #fcf69f, #ff8730);/* マーカーの角度調整箇所 */
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
}

グラデーションの角度が斜めのマーカー

/* ななめ方向のマーカー */
.gradient-marker {
  background-image: linear-gradient(45deg, #fcf69f, #ff8730);/* マーカーの角度調整箇所 */
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
}

少しわかりにくいですが、斜め方向のグラデーションが設定されています。

数値は自由に変更できるので、自分に合ったものを使用してください。

グラデーションマーカーに余白をつける方法

グラデーションマーカーの両端に余白を持たせたい、少し下にずらしたい場合は、paddingプロパティを調整します。

左右に余白なしのマーカー
左右に余白ありのマーカー

/* 両端に余白ありのマーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #fcf69f, #ff8730);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  padding: 0 0.5em 0 0.5em; /* 余白調整箇所。上→右→下→左の順に余白を指定できます */
  padding: 0 0.5em; /* ↑の短縮形 */
}

下に余白ありのマーカー

/* 下に余白ありのマーカー */
.gradient-marker {
  background-image: linear-gradient(90deg, #fcf69f, #ff8730);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 30%;
  padding-bottom: 0.5em; /* 下方向の余白調整箇所 */
}

paddingの数値は自由に設定できますので、色々試してみてください。

CSSグラデーションマーカーを使う際に注意すべきこと

グラデーションマーカーを使う上で、1点だけ注意すべきことがあります。

もしマーカーが思ったように表示されない場合は、以下をチェックしてみてください。

マーカーを指定する要素のdisplayプロパティはinlineにしておく

グラデーションマーカーを使用するときは、指定する要素のdisplayプロパティの値がinlineでないとうまく動作しません。

どういうことかさっぱり分からないという方は、以下の例を見てください。

【正しい例】spanタグで囲んでからクラス指定できている

<!-- 正しい例: 装飾箇所をspanタグで囲み、classを指定できている -->
<p><span class="gradient-marker">要素のdisplayプロパティがinlineの場合は、マーカーが正しく表示されます。改行が起きても崩れません。</span></p>

要素のdisplayプロパティがinlineの場合は、マーカーが正しく表示されます。改行が起きても崩れません。

spanタグはデフォルトでdisplay: inlineに設定されています。そのため、文章が改行されてもマーカーが崩れることはありません。

次に失敗例を見てみましょう。

【失敗例】pタグに直接クラス指定している

<!-- 失敗例: pタグに直接クラスを指定している -->
<p class="gradient-marker">要素のdisplayプロパティがinline以外の場合は、マーカーが正しく表示されません。改行が起きると崩れます。</p>

要素のdisplayプロパティがinline以外の場合は、マーカーが正しく表示されません。改行が起きると崩れます。

こちらはマーカーがうまく表示されていませんね。

これはpタグのデフォルト設定がdisplay: blockのため、文章全体が1つのブロックと認識されてしまうことが原因です。

これを避けるため、装飾箇所には必ずspanタグで囲うようにしましょう。

CSSグラデーションマーカーを実装する方法まとめ

以上、CSSでグラデーションマーカーを引く方法を紹介しました。

CSSのみでカンタンに実装できるので、ぜひ使用してみてください!

JavaScriptでスクロールに合わせてマーカーを引く方法も紹介してますので、よければどうぞ。

記事が役に立ったらサポートしてください

Web制作に関する
記事案を募集中!

Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。
要望が多かったものは解説記事を作成します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次