2008年8月25日月曜日

背景画像を使ったノート罫線の作り方(DreamweaverでCSS)

スタイルシートを使ったwebデザインのテクニック、今回は
背景に点線の画像を敷いて、ノート風にしてみます。

>動画マニュアルはこちら 背景画像を使ったノート罫線の作り方

おすすめメニューやおしながき、メモ帳など、
短いテキストでタテに長くなりがちのテキストの場合、横に罫線が入ることで読みやすくなります。
コツとしては、背景画像の高さと、テキストのline-heightの高さを揃えることと、
1行目の上にも罫線が来るように、背景画像のリピート位置を、タテ方向にマイナスで指定すること。
ボックスのmargin-topに同じ高さ(この場合24px)を入れて、揃うようにしています。

使った背景画像はこちら





ソースはこちら
――――――――――――――――――――――――――――――――――
body {
background: #CCD6D9 center;
margin: 10px 0px;
padding: 0px;
}
.box{
padding: 0px;
width: 500px;
border: 2px solid #6699FF;
margin-right: auto;
margin-left: auto;
background: #FFFFFF;
}
.note {
font-size:12px;
background: url(img/ten.gif) repeat 0px -23px;
margin: 20px;
padding: 0px 0px 1px;
}
.note p{
line-height:24px;
margin-top:24px;
}
――――――――――――――――――――――――――――――――――
<div class="box">
<div class="note">
<p> ●タイ伝統古式マッサージ</p>
<p>65分コース 5,000円<br>
95分コース 7,000円<br>
125分コース 9,000円</p>
<p>●タイ式リフレクソロジー</p>
<p>35分コース 3,500円<br>
65分コース 6,000円</p>
<p>●アロマオイルトリートメント</p>
<p>65分コース 7,000円<br>
95分コース 10,000円<br>
125分コース 13,000円</p>
</div>
</div>
――――――――――――――――――――――――――――――――――
できたページはこちら


実際に稼働しているサイトはこちら
京橋タウンガイド
xoopsで制作しました。
デザイン:webの森

0 件のコメント:

webの森のFBページへも来て下さい