ノート風の罫線に揃えてテキストをレイアウトしようとする場合、一昔前であれば各行を<span>でマークアップしたり、テーブルを利用するなどしていた。 しかし現在は、CSSを駆使することで<p>や<div>でシンプルにマークアップしてテキストをレイアウトすることができる。そのため、ブログの記事のデザインなどにも有効に活用することが可能だ。 今回のサンプルは、次の4点をポイントにして作成した。 テキストの各行を罫線に揃えてレイアウトする テキストの分量に合わせて罫線を過不足なく表示する 見出しや段落を追加しても行がずれないようにする ブラウザの文字サイズの設定を変えても行がずれないようにする
