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