CSSのみでノートのような罫線を実装する

更新日 : 2021.04.04

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-heightbackground-sizeの縦幅は同じサイズを指定することで、罫線が等間隔に表示させることができます。