CSSのみでノートのような罫線を実装する | Pulp Noteノートのような罫線を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で罫線を実装します。transp
