掲載日： 2009年 07月 13日
ノートのように罫線（下線）を引くデザイン
「ノート」のように、各行に下線を引くデザインを作ってみましょう。
スタイルシートと画像を使うことで、下記のように「ノート」っぽく見えるデザインが簡単に作れます。
2009年7月13日 ■ノートのような罫線を引く
「下線を引く」というと、text-decorationプロパティに値「underline」を指定したり、border-bottomプロパティを使ったりする方法を思い浮かべる方々も多いでしょう。
しかし、text-decorationプロパティを使う方法では、文字のない箇所には下線が引けないため、あまりノートのようには見えません。
また、border-bottomプロパティを使う方法では、ボックスの最下部に下線が引かれるだけで「各行」には引かれないため、まったくノートのようには見えません。
ここでは、スタイルシートで下線を引いているわけではありません。
下線（罫線）はあらかじめ画像「 
」で用意しておき、その画像と本文をスタイルシートでうまく配置することで、「ノートのように見えるデザイン」を作っています。
カテゴリ［スタイルシート］ ■ノートのような下線画像
ノートのような罫線（下線）は画像で作るため、点線・破線など様々なラインが使えます。 画像さえ用意すれば、下線の色も線種も自由自在です。
罫線画像は背景画像として指定するため、本文は何行でも好きなだけ延ばすことができます。
今回は、このような「ノートのように見えるデザイン」の作り方をご紹介いたします。 罫線画像を用意して、数行のスタイルシートを記述するだけで簡単に作れます。
July 13, 2009. ■ノートに見えるデザインを作る
この記事の目次：
１．ノートに見えるデザインのサンプル（このページ）
２．ノートに見えるデザインを作る
３．ノートの外側をデザインする
４．ノートのタイトル部分を作る
５．タイトル部分の右端にも文字列（日付など）を加える
６．ソースのまとめ
それでは、「ノートのように見えるデザイン」の作り方を、順番に見ていきましょう。
