外側に囲みを付ける
次に、ノートの外枠を加えます。以下のように、段落(＝p要素)を囲むボックス(＝div要素)を記述します。
<div class="notedesign">
<p>
本文いろいろ
</p>
<p>
本文いろいろ
</p>
</div>
上記のソースでは、外側に「notedesign」というクラス名を付加したdiv要素を記述して、ノート全体を囲むボックスを作っています。ここで、スタイルシートを下記のように記述します。
/* ▼外枠▼ */
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要素に3行のスタイルシートを記述しています。- 1行目：borderプロパティで外枠を作ります。ここでは、「太さ2ピクセル・緑色・実線」の線を引いています。
- 2行目：paddingプロパティで内側の余白を10ピクセルほど設けています。これがないと、「各行の下線」と「外枠」がくっついてしまいます。
- 3行目：背景色を加えています。背景色は指定しなくても構いませんが、ここでは淡い黄色を指定しています。
ノート内部のデザイン(＝p要素に対するスタイルシート)は、前のページで解説した通りです。 ここでは、下線画像として「greendot.gif」を使っています。
上記のソースを使って表示すると、以下のように見えます。
本文いろいろ。
本文いろいろ。
外側に太めの枠線を加え、背景色も付けることで、ノートの境界を分かりやすくしています。 ノートの下線画像は、下線部分を除いてすべて透明色にしてあるため、どのような背景色でも加えられます。
次に、ノートの先頭にタイトル部分を加えてみましょう。
ノートのタイトル部分を作る方法へ
