お問い合わせ

    氏名

    メールアドレス

    件名

    メッセージ本文



    763万 キーワード

    2021年 検索パフォーマンス

    57.8万 人が訪問

    2021年 訪問ユーザー数

    WordPressのスキルアップはこちら!▶[click]
    いま、どうしてる? 誰でも検索できます

    【CSS】(蛍光ペン風)文字にマーカーが引かれたような下線デザインを作る方法|background: linear-gradient

    CSS(シーエスエス)
    この記事は約3分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    文字の下半分に「マーカーで引いたような線を入れたい」と思った時に使える方法です。CSSで簡単に加工できますので、ぜひお試しください。

    文字の下半分にマーカーのような線を引く

    background: linear-gradientを使います。

    linear-gradient() は CSS の関数で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。

    https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient()

    MDNを参考に、例えば「background: linear-gradient(#e66465, #9198e5);」とすると、グラデーションが掛かった背景色になります。

    background: linear-gradient(#e66465, #9198e5);
    グラデーション

    文字の背景を塗りつぶす

    文字の背景色を塗りつぶす場合は、background: linear-gradientを使って(色,色)と設定するだけで可能です。

    背景色(黄色)

    background: linear-gradient(yellow,yellow);
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

    背景色(赤)

    background: linear-gradient(red,red);
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

    背景色(緑)

    background: linear-gradient(green,green);
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

    マーカー線(文字の下半分)

    文字の下半分にマーカー線を引いたような感じにしたいときは、transparent XX%, 色 XX%を使うことで、上半分を半透明に、下半分を指定の色にすることができます。

    黄色マーカー線(50%黄色)

    background: linear-gradient(transparent 50%, #ff9 50%);
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

    黄色マーカー線(50%緑色)

    background: linear-gradient(transparent 50%, green 50%);
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

    黄色マーカー線(50%赤色)

    background: linear-gradient(transparent 50%, red 50%);
    吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

    まとめ

    他にも方法は色々とあるのかもしれませんが、background: linear-gradientだけでも十分にマーカー線が作れそうです。

    もしCSSでマーカー下線や背景色が必要になった時はこちらの方法をお試しいただければ幸いです。

    ご参考ください😃

     

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