よく使うCSSの小技（蛍光ペン・ストライプ背景）

よく見るけど、いつもどう書くんだったかな〜と調べがちなCSSを2つまとめました！

1.蛍光ペン風ラインマーカー

HTML

<p><span>蛍光ペン風ラインマーカー</span></p>

CSS

span {
    font-size: 5vw;
    font-weight: bold;
    line-height: 2.37;
    /* 上から70%までは透明、70%から下を水色（#6cf）にする */
    background: linear-gradient(transparent 70%, #6cf 30%);
}

太さを変えたい場合は、％の数値を自由に変更できます！

（文字全体を覆うくらい線を太くしたい時はtransparentを20%、#6cfを80%にするなど）

注意点
spanではなく、pタグにスタイルを当てた場合、ブロック要素になるので、マーカーがブロック全体の下につくような見た目になってしまいます。

ストライプ背景

CSS

.item{
  background-color: #6cf;
  background-image: repeating-linear-gradient(to right, /* 右に向かって線を引く（縦線になる） */
  transparent, /* 最初は透明（下の水色が見える） */
  transparent 60px, /* 60pxまでは透明のまま */
    rgba(255, 255, 255, 0.4) 60px, /* 60pxの位置から白（透明度40%）の線をスタート */ rgba(255, 255, 255, 0.4) 62px /* 62pxの位置で線を終わらせる（＝2pxの太さの線になる） */);
}

調整のポイント
線の間隔を変えたい時：60px の部分の数値を大きくすれば間隔が広がり、小さくすれば狭くなります。

線の太さを変えたい時：62px の部分を 65px などにすると、線が5pxの太さになります。

最後に

今回のようなCSSだけで作る背景デザインに興味がある方は、こちらの記事もよければチェックしてみてください！
画像を使わずに実装できるので、サイトの軽量化にも繋がります。

J.B.Goode Inc.に所属しています。良ければフォローお願いします！

J.B.Goode Inc.のウェブサイトでは、技術記事の他にも技術ナレッジや日々の気づき等を配信しています。
https://www.jbgoode.jp/

カジュアル面談も実施中です。お気軽にお問い合わせください。
https://www.jbgoode.jp/recruit/