ブログ記事を読んでいると、よく蛍光ペン風マーカーで装飾されているのを見かけますよね。（←こういうやつ）
こういった単色のマーカーはカンタンに実装できるのですが、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でスクロールに合わせてマーカーを引く方法も紹介してますので、よければどうぞ。
コメント