まるで蛍光ペン!?テキストにマーカーでアンダーラインを引いたような背景をつけるCSS

text-highlight

↑↑↑こんな感じで蛍光ペンのアンダーラインを引いたようにテキスト装飾できるCSSをご紹介します!

Webページのなかで強調したいテキストがある時に役立ちます。簡単にできるので是非コピペして使ってみてください。

今回使用するHTML/CSSはこちら!

HTMLはテキストが複数行になったときも想定してspan要素で囲っています。

CSSに書いてあるliner-gradient関数は、グラデーションを表現するための関数です。今回使用する用途以外にも多くの使い方ができるので気になる方は詳しく調べてみてください。

関数の中を見てみると、下記のようになっています。

テキスト各行の上半分には背景色は必要ないのでtransparentを指定しています。その後に下半分の背景色を指定しています。

transparentのすぐ後ろの値で、ラインマーカーのように引かれる線の太さが変更できます。この数値とline-heightの値を変更して、背景に表示される線の太さやテキストとの位置を調整してください。

ブロック要素に今回のようなCSSを適用すると、テキストが複数行になったときに思い通りの表示にならないので、コツとしては、インライン要素にスタイル指定することです。

以上です!ぜひお役立てください!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »