CSSのgradientを使ってノートみたいな罫線を描く

CSS3のlinear-gradient（線形グラデーション）を用いて、画像を使わずボックス要素内に罫線を引きます。

CSSのgradientを使ってノートみたいな罫線を描く

古いタイプのサイトで背景画像を使ったノート風の罫線というのが流行ったのですが、あれをCSSだけで作ります。

gradientを使った罫線

CSS3の線形グラデーション（gradient）機能を使って、ノートやレポート用紙のような罫線を作ります。

デモ

これはノート風に罫線を付けたスタイルです。

段落と段落の間は1行あける設定にしています。ついでに、一般的な書式にしたがって各段落の1文字目を字下げする設定にもしてみました。<br />
ちなみに、途中で改行すると次の行は文頭から始まります。DIVの高さは可変なので、テキストが長くなると自然に全体が伸びていきます。

Pタグに border-bottom を引くと短い行の時に罫線が途切れてしまうのですが、これは外側のボックスに罫線を引いて、それに併せてテキストを表示しているので端から端まで罫線が入ります。

ただしグラデーションを使って描画しているので、 boder のように点線を使った装飾は出来ません。

HTML

【HTML】
<div id="note">
<p>なんちゃらなんちゃら</p>
<p>ほにゃららほにゃらら</p>
<p>とってんぱらりのぷぅ</p>
</div>

divの内側に<P>タグで段落を設定して下さい。<P>タグを付けるのが面倒な場合は、その分DIVの padding を調整すれば対応可能です。

字下げを希望する場合は必ず<P>タグをつけて下さい。

CSS

【CSS】
#note {
  width: 600px; // DIV横幅
  font-size: 16px;
  color: #222; // 文字色
  padding:2rem 1rem 3rem; // 余白
  background-color: #fee; // 地の色を変えるときはここで
  background-image: linear-gradient( rgba(152,196,255,.3) .1em, transparent .1em );
  background-size: auto 2rem; // line-heightと一致させる
  line-height: 2rem; // background-sizeと一致させる
  border: 1px solid rgba(0,0,0,.2); // 枠線
  border-radius: 2px; // 外枠の角丸
  overflow: hidden;
}
#note > p { margin: 0 0 2rem; }
#note > p:first-letter { margin-left: 1rem; }

linear-gradient で罫線を引き、background-sizeで繰り返し処理をしています。

CSS で textarea に罫線を入れてノートっぽくしてみよう | phiary

textareaにスタイルを適用した例

バリエーションとして、<textarea> に適用させた例を載せておきます。

デモ

テキストエリアなので、ウィンドウのサイズが可変です。また、中をクリックしてアクティブにするとちょっとびっくりするかも。