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

更新日 : 2021.04.04

CSSのみでノートのような罫線を実装する説明画像
Share
1
8
6
ノートのような罫線を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の縦幅は同じサイズを指定することで、罫線が等間隔に表示させることができます。

人気記事

  1. 厳選 ! 良質なWebデザインを集めているギャラリーサイト

    もうこれだけでいい!良質なWebデザインを集めているギャラリーサイト18+1選

  2. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  3. いざという時に使える13のHTML&CSS Tips集の画像

    いざという時に使える13のHTML&CSS Tips集

  4. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  5. 見出しをおしゃれにする英字フォントの画像

    【無料】見出しをおしゃれにする英字フォントを19個集めてみた