> 記事の文章にノート罫線のような1行づつの区切り線をスタイルシートと画像で簡単に作成

記事の文章にノート罫線のような1行づつの区切り線をスタイルシートと画像で簡単に作成


ノートみたいな罫線

昔の人なんですかね、なんか文章書いてるとどうしても罫線が付けたくなっちゃうんです。
学生のころとかにノートに入ってたあの半透明グレーみたいな等間隔の罫線。

できるだけ簡単にスタイルシートと画像でノート罫線のような行間の半透明ラインを再現

ノート罫線みたいのは付けたいんですが、1行づつに厳密に付けるとか、もしくは1行づつボックス要素で区切るなんてとても面倒くさくてやってらんないので今回の方法は簡単にできるだけきれいな見た目にを最優先にしたものです。
一応記事の中でPタグで囲んで文章書いてれば自動でラインが入っていくようになってます。

方法

方法は簡単。スタイルシートで行間をピクセル指定、同じ高さの罫線画像を準備して背景に設定するだけ

そうなんですよね、あんまりしたことなかったんですけど、行間ってスタイルシートでピクセル指定できるんで理屈的にはそれと同じ高さのライン画像を準備すれば自動的に繰り返してちょうどいい幅で罫線になってくれるんです。
実際に今回このブログでやってみたんですが、今のところはばっちりです。
画像でライン作ってるんで太さも半透明度も色も点線も自由自在、手間かければ波線とか手書き風、かすれた線とかも可能でしょう。


カテゴリー