Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

[CSS] ラインマーカーを引いてみる

CSSを使って、ラインマーカー(ハイライト)で線を引いたようなデザインにしてみようと思います。文中のちょっと目立たせたい箇所に引けば、そこだけ文字自体に色を付けるよりも見た目にも良く、注意を引く事が出来ます。一般的なタイプと太さが調節できるlinear-gradientを使ったタイプの2種類ご紹介します。

INDEX

共通のhtml

<p>文中の<span class="line-marker">ここだけ</span>にラインマーカーで線を引いた感じ</p>

文字にしっかりラインマーカーを引いた感じ

ラインマーカー

色、paddingはお好みで調整して下さい。

.line-marker {
    background-color: #FFEE00;
    padding: 4px 8px;
}

太さが調整できるラインマーカー

ラインマーカー

グラデーション関数のlinear-gradient()を使います。
詳しくは MDN Web Docs にあります。

.line-marker{background: linear-gradient(transparent 30%, #F6EB61 30%);}

linear-gradient(横に伸びる線 太さ, 色 太さ);

太さの数値を小さくするとラインマーカー太くなり、大きくすると細くなります。ちょっとだけ上から文字が出ているくらいが事前な感じで見栄えが良いと思います。

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる