福岡のホームページ制作・SEO対策のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : HTML/CSS

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

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

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

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

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

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

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

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

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

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

売上アップ、人材採用、顧客獲得など様々なご要望に最適なホームページを制作いたします。

follow us in feedly

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。