ノートのように罫線(下線)を引くデザインの作り方(2ページ目)

ノートの下線を画像で用意する

まずは、ノートの下線になる画像を用意します。ここでは、下記の画像を用意しました。必要であればご自由にコピーしてご活用下さい。

• 「 」：bluedash.gif
• 「 」：greendot.gif
• 「 」：redbrush.gif

画像はすべて高さを25ピクセルにして作成しています。画像の最下部に下線が引いてあり、それ以外は透明色になっています。 スタイルシートでデザインする際には、この「画像の高さ」に合わせて記述する必要があります。横幅は何ピクセルでも構いません。高さは25ピクセルである必要はないので、お好きな高さで作って下さい。

ノートのように見えるようスタイルシートを記述

次にスタイルシートを記述しましょう。スタイルシートの記述はとても簡単で、段落を作るp要素に対して以下のように3行を記述するだけです。

background-image: url("bluedash.gif");
line-height: 25px;
margin: 0px;

上記のソースは、下線画像が「bluedash.gif」で、画像の高さが25ピクセルの場合の例です。 この3行には、以下の意味があります。

1行目：ノートの下線を背景画像として表示。
2行目：各行の高さを25ピクセルにする。(※画像に合わせる)
3行目：余白をなくす。

marginプロパティを使って余白を消しているのは、複数の段落が連続する場合にも、罫線が途切れずに続くようにするためです。

表示例

上記のソースを使って表示すると、以下のように見えます。


これだけでもノートのように見えなくはありませんが、外側に枠線を加えたり、タイトル用のデザインを加えたりして、よりノートらしく見えるようにしてみましょう。

ノートの外側をデザインする方法へ