ノート風の罫線にテキストをレイアウトする

　ノート風の罫線に揃えてテキストをレイアウトしようとする場合、一昔前であれば各行を<span>でマークアップしたり、テーブルを利用するなどしていた。

　しかし現在は、CSSを駆使することで<p>や<div>でシンプルにマークアップしてテキストをレイアウトすることができる。そのため、ブログの記事のデザインなどにも有効に活用することが可能だ。

　今回のサンプルは、次の4点をポイントにして作成した。

• テキストの各行を罫線に揃えてレイアウトする
• テキストの分量に合わせて罫線を過不足なく表示する
• 見出しや段落を追加しても行がずれないようにする
• ブラウザの文字サイズの設定を変えても行がずれないようにする

サンプル完成図（画像をクリックすると拡大します）

Internet Explorerの表示文字サイズを「最大」にしたときの表示（画像をクリックすると拡大します）

body{
background-image: url(background.gif);
}

div{
width: 480px;
margin: 30px auto;
background-image: url(line.gif);
background-repeat: repeat-y;
line-height: 35px;
}

p{
font-size: 1em;
margin: 0 0 35px;
}

p.date{
text-align: right;
}

h1{
font-size: 1.25em;
margin: 0 0 35px;
}

今日はいい天気

今日はとてもいい天気でした。明日はもっといい天気になるでしょうか。春はもうそこまできています。桜がもうすぐ満開になりそうなので、お花見の準備をしなければいけませんね。とっておきのお花見スポットがあるので、仲良しのお友達を誘って出かけます。ちょっと遠いのが難点なんですが、がんばって行くだけの価値はあります。

さて、今日も日が暮れて真っ暗になりました。そろそろ、晩ご飯の買い出しに行ってきます。

2009年４月１日

※ブラウザで表示を確認する

　なお、サンプルの表示にはInternet Explorer 5以上と、その他の主要ブラウザ（Firefox、Safari、Opera）が対応している。

　それでは、テキストのレイアウト手順を見ていこう。