基本的には背景画像を使うことになりますが、問題は中身のテキストが増えても崩れないようにするというのが前提ですよね。
てことで、CSS初心者向けの方法を動画マニュアルで紹介しましたので、こちらでも詳細を書いておきます。
＞CSSを使った角丸ボックスの作り方（前編）
＞CSSを使った角丸ボックスの作り方（後編）
――――――――――――――――――――――――――――――――――
（CSS）
*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}
ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 20px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 10px;
line-height:2;
padding:0;
}
.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 0px 0px 0px -20px;
padding: 0px;
height: 20px;
width: 570px;
}
html*.ul-after{
background: url(img/maru_bottom.gif) no-repeat 0px -10px;
margin: 10px 0px 0px -30px;
height: 40px;
}
――――――――――――――――――――――――――――――――――
<ul>
<li>
<a href="#">イベントタイトル</a> ［08年7月29日］
</li>
<div class="ul-after"></div>
</ul>
――――――――――――――――――――――――――――――――――
●<li>から</li>までがループというか、可変する場所です。
●div class="ul-after"のクラス名はなんでもいいです
●html* というのは、スター7ハックでぐぐって調べてみてください
セレクタの前にこれをつけると、IE5．5～6、MacIE、サファリなどでスタイルが適用され、他のブラウザでは適用されません。
（CSSのルール的には間違った使い方なので自己責任で・・）
もうひとつ、ラストの</li>のうしろにdivを追加しない方法ではul:afterという疑似要素で指定する方法があります（が・・・IEは反映されません。。。）
上記のHTMLから<div class="ul-after"> </div>を削除して、スタイルシートは下記の様に指定します。
marginなどの調整はあくまでも例なので、スタイルに合うように微調整してください。
*{
margin:0;
padding:0;
}
body{
font-size:12px;
line-height:18px;
margin-top: 20px;
margin-left: 40px;
}
ul{
list-style:disc outside;
width:570px;
height:auto;
padding:36px 0 0 0px;
background:url(img/maru_top.gif) no-repeat 0px 0px;
margin: 0px;
}
li{
margin:0 30px;
line-height:2;
padding:0 0 0 0px;
}
ul:after{
content: url("img/maru_bottom.gif");
display:block;
height:60px;
}
この講座で使った画像はこちらのサイトで使っています
京橋タウンガイド
デザイン：webの森
協力／xoopsシステム構築：A-XYZ
