タイトル部分の右端にも文字列を加える
タイトル部分の右端に、日付などの文字列を表示させてみます。タイトルを表示する行内で、「タイトル文字は左寄せ」・「日付は右寄せ」という、左寄せと右寄せを1行内で混雑させるデザインを作るには、下記のように記述します。
<div class="notedesign">
<p class="notetitle">
<span class="date">2009年7月13日</span>
■タイトル
</p>
<p>
本文いろいろ
</p>
</div>
タイトルを作っているp要素の中に、span要素を使って日付を記述しています。 このspan要素を装飾するため、前ページのスタイルシートに加えて、以下のスタイルシートを記述します。
/* ▼ノートタイトルの日付欄▼ */
div.notedesign p.notetitle span.date {
float: right;
}
floatプロパティに値「right」を指定することで、span要素の内容を浮かせて右端に表示させています。文字サイズや文字色を加えたい場合は、ここに追記して下さい。上記のソースを前ページのソースと合わせて表示すると、以下のように見えます。
2009年7月13日■タイトル
本文いろいろ。
上記のタイトル行の右端を見ると、日付が表示されているのが分かります。
ここでは日付を記述しましたが、記述する内容はもちろん日付以外でも構いません。何でも好きな文字を書いて下さい。
以上で、ノートのように罫線(下線)を引くデザインの作成は完了です。最後に、今回ご紹介したソースのまとめを掲載しておきます。コピー＆ペーストして使ってみる際に、ご活用下さい。
すべてのソースのまとめへ
