【CSS】テキストに蛍光ペンのマーカー線を引く方法(#linear-gradient)

【CSS】テキストに蛍光ペンのマーカー線を引く方法(#linear-gradient) Webデザイン&CSS

こんにちは、ぼんやまです。今回はテキストに蛍光ペンのマーカー線を引くCSSの設定方法を解説します。

見出しやテキストを太字のみの時よりも強調して目立たせることができてとても便利です。

蛍光ペンのマーカー線を引く方法

テキストに蛍光ペンのマーカー線を引く方法は、ボールド(太字、強調)のタグに対してスタイルを設定して実現します。線を引くのには「background」のプロパティに対して、「linear-gradient」関数を指定します。

<!-- サンプルhtml -->
<b>This is a pen.</b>
/* CSSの記述 */
b, strong {
    background: linear-gradient(transparent 50%, #ffedab 0%);
}

以下がサンプルのテキストです。半分マーカー線が引かれるようになっています。

■サンプル
サンプル:linear-gradient(transparent 50%, #ffedab 0%)

linear-gradientはグラデーション表示をするための関数です。ひとつめの引数で始点の色とその色を塗る範囲、ふたつめの引数で終点の色とグラデーションを適用する範囲を設定し、その2つの色と位置からグラデーションを設定します。

「transparent 40%」を指定することにより、テキストの上40%を透明な色にしています。この割合を変えることで太さを調節でき、0%だと全部表示、10%、20%・・・と数値が上がっていくごとに透明な範囲が増え線が細くなります。

「#ffedab 0%」ではテキストの下部分に引くマーカーの色を設定しています。0%にすることでグラデーションにならないようにしていますが、10%、20%と数値を上げることでグラデーションにすることもできます。

ぼんやま
ぼんやま

数字を変更してこれだ!と思う線の太さをためしてみてね!

マーカー線の引き方のサンプル

マーカー線の引き方のサンプルを記載します。透明にする範囲や色の指定を変更することで、いろいろな線の引き方をすることができます。

上から下まで全部線を引くパターン

サンプル:linear-gradient(transparent 0%, #ffedab 0%)

半分のマーカー線を引くパターン

サンプル:linear-gradient(transparent 50%, #ffedab 50%)

40%まで黄色、残り60%をオレンジ色へのグラデーションにするパターン

サンプル:linear-gradient(#ffedab 40%,#ffa500 60%)
ぼんやま
ぼんやま

サイトごとに合う色や太さがあるからいろいろと試してみてね!

タイトルとURLをコピーしました