メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

以前、テキストにマーカーを引いたようなエフェクトを付ける方法をメモしたのですが、今回はその別バージョンです。

前回は、擬似要素をテキストの下部に配置する方法でした。

しかし、この方法にはメリットとデメリットがあります。メリットはアニメーションが付けれること、そしてデメリットは複数行に渡るテキストには対応できないということです。

今回は、複数行に渡る場合のテキストにもマーカーを引いたような表現を実装していきます。(その代わり、アニメーションはできません笑)

目次

    前回の問題点

    まずはじめに、前回の方法ではなぜ複数行の場合にマーカーを引けないのかを説明しておきます。

    次の画像をご覧ください。

    このように、複数に渡るテキストの場合、それらを囲んだエリアの一番下にのみマーカーとなる擬似要素が配置されます。

    実際に2行以上の文章に前回の方法を試してみます。

    spanタグ:

    1行目の文章だよ〜だよ〜〜。
    2行目の文章だよ〜だよ〜。


    pタグ:

    1行目の文章だよ〜だよ〜〜。
    2行目の文章だよ〜だよ〜。

     

    新たな方法

    マーカーの表現に、擬似要素ではなくbackground:linear-gradientを使用します。

    ポイントは、対象とするタグをinline要素として指定してあげることです。

    .marker2_{
      background: linear-gradient(transparent 65%, #FFC093 0%);
      display: inline;
      /*横に余白をつけたり、下にずらしたりするときは以下のpaddingを調整してください*/
      padding: 0 2px 3px;
     }

    上の例では、linear-gradient上部65%を透明( transparent ) に、下部分をオレンジ色(#FFC093)に指定しています。

    実際にこのCSSを指定してみると次のようになります。

    1行目の文章だよ〜。
    2行目の文章だよ〜だよ〜。

    例えば普通の文章中で強調したい部分にだけマーカーを引く時、強調部分が改行されたとしてもこの方法だとちゃんとマーカーを引くことができます。


    無事に各行にマーカーを引くことができています。

    注意点しないといけないのは、inline要素じゃないと複数行にはうまくマーカーが引けないことです。inline-blockやblockではダメみたいです。

    ※table系は検証してないです。

    下の画像は、inline要素の場合とその他の場合の、backgroundプロパティの挙動の様子を比較したものです。

    このように、inline要素の場合はbackgroundは各行ごとに適用されるのですが、block要素などは全体に対して適用されます。

    おまけ:background:linear-gradientについて

    今回のようなシンプルな使い方だと、次のような意味になります。

    background: linear-gradient(上の色 グラデ開始位置(%), 下の色 グラデ終了位置(%));
    

    位置の基準は上が0%下が100% です。いくつか例を挙げてみようと思います。

    background:linear-gradient(#fff 0%, #000 100%);

    例1

    background:linear-gradient(#fff 50%, #000 100%);

    例2

    background:linear-gradient(#fff 50%, #000 0%);

    例3

    自分でプロパティをいじってみると面白いです!色々試してみてください!

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top