ノートの「タイトル部分」を作る
次に、ノートの最上部にタイトル部分を加えてみましょう。タイトル部分は、下記のように「notetitle」というクラス名を付加したp要素で作ります。ページの構造に合わせて、h1要素・h2要素など見出しを作るための要素を使っても構いません。
<div class="notedesign">
<p class="notetitle">■タイトル</p>
<p>
本文いろいろ
</p>
<p>
本文いろいろ
</p>
</div>
前ページのスタイルシートに加えて、以下のスタイルシートを記述します。
/* ▼ノートタイトル▼ */
div.notedesign p.notetitle {
margin: 0px 0px 5px 0px;
padding: 3px 0px;
border-bottom: 3px double #008000;
font-weight: bold;
color: #008000;
}
- 1行目：marginプロパティで外側の余白を調整。上と左右はゼロ、下に5ピクセルの余白を設けています。
- 2行目：paddingプロパティで内側の余白を調整。左右はゼロ、上下に3ピクセルの余白を設けています。
- 3行目：border-bottomプロパティで、下側に緑色の二重線を引いています。
- 4行目：font-weightプロパティで、文字を太字にしています。
- 5行目：colorプロパティで、文字色を緑色にしています。
余白量や下線の種類、文字色などは好みに合わせて変更して下さい。上記のソースを前ページのソースと合わせて表示すると、以下のように見えます。
■タイトル
本文いろいろ。
本文いろいろ。
このように「タイトル」行を加えると、よりノートっぽく見えるでしょう。
なお、タイトル行は(デザイン上は)1行だけであり複数行にはならないため、スタイルシート(のborder-bottomプロパティ)で下線を引いています。 この場合、タイトルが複数行になったとしても、下線は最下部に1本引かれるだけです。
冒頭のサンプルでは、タイトル行の右端に日付を表示させていました。最後に、タイトル行の右端に、タイトルとは別の文字列(日付など)を表示させる方法をご紹介いたします。
タイトル部分の右端にも文字列を加える方法へ
