CSSだけでデザイン通りに作れるノート風罫線

まずは完成イメージの確認

こんな風に一行おきに罫線が入るデザイン、作りたくないですか？

単純にborder-bottomをつけてしまうと文字がないところに罫線がはいりません。
かといって一行ごとブロックで囲むのも手間だし、文章が変わった時に対応できません。

実線で一行ずつ罫線を入れてみる

罫線を等間隔で引くためには背景にgradientとbackground-size、background-repeatを用います。

See the Pen cssだけで罫線のあるノート風デザイン(実線編) by うぇぶの人 (@webnohito) on CodePen.

CSSはこんな感じ

div {
  background-image: linear-gradient(180deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0) 98.5%, #646464 100%);
  background-repeat: repeat-y;
  background-size: 100% 2.4em;
  line-height: 2.4;
}

ここでのポイントは2つ。
一つはgradientの98.5%にすることです。99%にすると解像度の低い端末で罫線が表示されないことがあります。　かといって98%にすると解像度の高い端末で文字サイズに応じて罫線の太さが変わってしまいます。
もう一つはbackground-sizeの縦方向をemで決めること。　これによってline-heightも含めた文字数文でカウントすることができます。

破線・点線を作ってみる方法

どうやったらグラデを点線にできるかを考えてみましたが、横のグラデを縦のグラデに重ねればいいことに気づきました。

See the Pen cssだけで罫線のあるノート風デザイン(破線・点線編) by うぇぶの人 (@webnohito) on CodePen.

CSSはこんな感じ

div {
  background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0) 49%, white 50%, white 100%), linear-gradient(180deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0) 98.5%, #646464 100%);
  background-repeat: repeat-x,repeat-y;
  background-size: 4px 100%,100% 2.4em;
  line-height: 2.4;
}

ここでのポイントは１つ。
縦のグラデは先ほどお同じ、それに横のグラデを例では２pxずつの白と透明を繰り返すこと。　
この2つの組み合わせによって破線を作ることができます。

ただこの方法には一つ弱点があります。
それは背景色がグラデーションになっている場合に縦にも線が入ってしまうことです。 あしからず！