HTMLとCSSで色んな下線マーカーを作る

はじめに

今回の記事は、HTMLとCSSを使って下線マーカーを表示するワンポイントデザインについてまとめていきます。

全体のコード一覧

See the Pen HTMLとCSSで色んな下線マーカーを作る by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

#m03 {
  background: linear-gradient(transparent 50%, #ffd900 50%);
}

• background: linear-gradient(transparent 50%, #ffd900 50%);は、要素の背景が上半分は透明（transparent）で、下半分は黄色（#ffd900）になるように設定されています。

• このlinear-gradientは、デフォルトで垂直方向（上から下）に適用されます。結果として、背景が上下で明確に分かれたデザインになります。

#m04 {
  background-image: repeating-linear-gradient(
    -45deg,
    #00a6ff 0,
    #00a6ff 3px,
    transparent 3px,
    transparent 6px
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 50%;
}

• background-image: repeating-linear-gradient()は、repeating-linear-gradientで、繰り返されるストライプ模様を生成しています。-45degなので、ストライプが左上から右下（-45度）の斜め方向に描かれます。

• #00a6ff 0, #00a6ff 3pxで、青色（#00a6ff）のストライプが幅3pxで描画されます。transparent 3px, transparent 6pxで、次に透明部分（transparent）が3px描画されます（3px～6pxの範囲が透明）このパターンが繰り返され、青と透明の交互のストライプができます。

• background-position: left bottom;では、背景の起点を要素の左下に設定します。 このため、ストライプは要素の左下を基準に描画されます。また、background-size: 100% 50%;で、背景画像のサイズを要素の幅に100%（全幅）、高さに50%（半分）で指定しています。ストライプは要素の下半分だけに適用されます。

まとめ

今回は下線マーカーのデザインについてまとめました。今後、CSSやJavaScriptを用いて、スクロールアニメーションと組み合わせたサイトデザインに応用できるようにしたいです！