よく使う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だけで作る背景デザインに興味がある方は、こちらの記事もよければチェックしてみてください！

方眼紙のような背景をCSSで作る
画像を使わずに実装できるので、サイトの軽量化にも繋がります。