[css]ノートの罫線みたいなのを作る

導入は簡単だけど活用は気をつけないといけない。

組む

こんな感じだったとして。

<article>
    <h2>...</h2>
    <p>...</p>
    <p>...</p>
    <p>...</p>
    <p>...</p>
</article>

こんな感じになる。

article{
    background-image: linear-gradient(180deg, #eee 1px, transparent 1px);
    background-size: 100% 2em;
    font-size: 14px;
    line-height: 2em;
    padding: 0 10px 1px; //bottom必須
}
article h2,
article p{
    font-size: 14px;
    line-height: 2em;
}
article p{
    margin-top: 2em;
}

ポイント

線の間隔と文字の間隔を統一する必要がある。
<p>のmarginで分かるように、行間を空けたければそこも合わせていく。

<p>に直接背景を与えるならそこにbackground関係を入れるだけなので簡単なんだけど、html的にも文章として記述したい場合、大枠に線を引いて中身をそれに合わせることになる。上詰めだから一箇所がズレたらそれ以降も崩れてしまうわけで、きっちり組まないといけない。だからhtmlタグが何であれ、基本はすべて同じ文字サイズ。「ノートだから」ってことで枠以上の文字サイズで書くとなっても、余白とかで間隔の調整が必要。考え方によっては文字サイズを縛れるってことで装飾が限定されて楽になるともいえる。

参考

破線とか点線的なものも作れるっぽい。

CSSのみでノートの罫線のようなスタイルを実装する方法【実線・点線】 | WebDev Tech

Webページ上に「ノートのような罫線つきのデザインを実装したい！」という方もいるかと思います。 単純に線を引くだけならborderプロパティを使えばよいのですが、ノートの罫線のように何本も線を引く場面には向いていません…。 そこで今回の記事

web-dev.tech

一つ覚えておけば武器になると思う。

まとめ

使う場面はあまりないけど使うときは使う。画像で作ればいいかとなっても罫線は地味にめんどくさい作業なのでhtmlで組んでいいならこっちのほうが楽だと思う。ケースバイケースだけど。

余白調整は縦だけじゃなく、左右にもちょこっと余裕をもたせるときっちりしたフォントでも多少はノートっぽい雰囲気が出ます。