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

「ノートのように罫線(下線)を引くデザイン」ソースのまとめ

HTMLソース：

<div class="notedesign">
   <p class="notetitle">
      <span class="date">日付</span>
      ■タイトル
   </p>
   <p>
      本文いろいろ
   </p>
   <p>
      本文いろいろ
   </p>
</div>

ノート内部に表示する本文は、p要素を使って作ります。 このp要素(＝段落)は、いくつ連続していても構いません。上記のサンプルソースでは2つの段落を記述しています。1つだけにしても構いません。

スタイルシートソース：

/* ▼外枠▼ */
div.notedesign {
   border: 2px solid green;   /* 外枠 */
   padding: 10px;             /* 内側の余白 */
   background-color: #ffffcc; /* 背景色 */
}
/* ▼ノート内部▼ */
div.notedesign p {
   background-image: url("greendot.gif"); /* 罫線 */
   line-height: 25px; /* 行の高さ */
   margin: 0px;       /* 外側の余白 */
}
/* ▼ノートタイトル▼ */
div.notedesign p.notetitle {
   margin: 0px 0px 5px 0px;           /* 外側の余白 */
   padding: 3px 0px;                  /* 内側の余白 */
   border-bottom: 3px double #008000; /* 下線 */
   font-weight: bold;                 /* 文字の太さ */
   color: #008000;                    /* 文字色 */
}
/* ▼ノートタイトルの日付欄▼ */
div.notedesign p.notetitle span.date {
   float: right;
}

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


上記のソースから、ファイル名を「bluedash.gif」に変更し、枠線の色やタイトルの色を「#0000cc」に変更すると以下のように見えます。


画像や色を変更して、お好みのノートになるようデザインしてみて下さい。

ノートのように罫線(下線)を引くデザイン

今回は、画像とスタイルシートを使ってノートのように各行に下線を引く方法をご紹介いたしました。ぜひ、試してみて下さい。画像を使わずにCSSだけで実現する方法もありますが、それは別の機会にご紹介いたします。

なお、本記事中でサンプルに使用した下線画像はご自由にコピーしてご活用下さい。例えばWindows環境では、下記の画像を右クリックして「名前を付けて画像を保存」などの機能を使えば保存(ダウンロード)できます。

「 」：bluedash.gif , 「 」：greendot.gif , 「 」：redbrush.gif
「 」：blueline.gif , 「 」：brownline.gif


【関連記事】

• キャプション付き画像を横向きに並べて配置する方法
• 画像上の自由な位置に文字を重ねる方法
• [イメージマップの作り方] 1画像内に複数リンクを設定
• 1行内に左寄せと右寄せを同時に書きたい
• 表の空っぽのセルにだけ、CSSで斜線を引く方法