CSSのみでノートのような罫線を実装する
ノートのような罫線をCSSのみで実装します。昔は線の画像を使っておりましたが、
background-image: linear-gradientを駆使すれば表現することができます。
CSSでテキストにノートのような罫線をつけることができます。これからは画像を用意しなくても大丈夫ですよ。行数が増えてもCSSが自動で罫線を引いてくれるので便利ですね。
.text {
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 3em;
background-image: linear-gradient(transparent 0, transparent 97%, #ddd 100%);
background-size: 100% 3em;
}background-image: linear-gradientで罫線を実装します。transparent 0, transparent 97%で1行の上（0%）から97％までを透明に指定。それ以降（100%まで）を#ddd 100%でグレーに指定しています。
線の色はここで変更することができます。line-heightとbackground-sizeの縦幅は同じサイズを指定することで、罫線が等間隔に表示させることができます。
