ノート風の罫線を、画像を使わずに CSS で表示する方法を紹介します。
HTML
補足
- notebook-border クラスを付けたブロック要素の背景に罫線が表示されます。
CSS
補足
- repeating-linear-gradient で罫線を表示しています。
- font-size × line-height が１行の高さになります（サンプルでは 24px ）。
- repeating-linear-gradient で、透明色（サンプルでは rgba(255,255,255,0) の部分）と１ドットの罫線（サンプルでは #ccc の部分）を交互に表示しています。
- 従って font-size と line-height がサンプルと異なる時は、指定する値の調整が必要です（ 23px と 24px の部分）。
- 加えて p 要素の下マージンの値も罫線に重ならないよう変更してください（ 24px の部分）。