TOMILOG

CSSだけでノート風の罫線を表現する

CSSだけでノート風の罫線を表現する
| 2020/01/06

完成サンプル

ノートのような一行ごとに罫線があるデザインをCSSのみで作成しました。

ポイント

.note {
  background-image: linear-gradient(#ccc 1px, transparent 1px);
  background-size: 100% 3em;
  line-height: 3;
}

罫線は、背景にグラデーションを指定することで表現できる。
最初の1pxを線である#cccに。1px目以降を透明(transparent)なグラデーションにして、背景を繰り返すと、1行ごとに罫線が引かれます。

行間をline-height: 3としているため、背景も3emごとに繰り返しています。
行間を狭めたい場合は、line-heightbackground-sizeの数値を小さくすれば可能です。

ruled_line@2x

このままでは、文末に罫線が表示されない状態です。

ruled_line_2@2x

文末にも線を引くには、padding-bottomで調整して、文末にもグラデーションの線を表示させあげましょう。

完成形はこちら。

.note {
  background-image: linear-gradient(#ccc 1px, transparent 1px);
  background-size: 100% 3em;
  line-height: 3;
+ padding-bottom: 1px;
}

ruled_line_3@2x

とみー
Webデザイナー → フルスタックエンジニア → フリーランス。2018年、長野県に移住しフルリモートで2つのサービスに携わるフロントエンジニアとして活動中。移住生活・エンジニアの情報発信をしていきます。