Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方） - スタイルシート　定番テクニック集 - （6）CSSを使った角丸ボックスの作り方（後編）

Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方） >> スタイルシート　定番テクニック集 >> （6）CSSを使った角丸ボックスの作り方（後編）

Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方）

初心者webデザイナーさんのための、ホームページ制作無料講座です。Dreamweaver8を使ったXHTML＋CSSコーディングの方法を紹介します。スタイルシート初心者の方に役立つように作ってみました。 ※Adobe® Dreamweaver® はAdobe Systems Incorporated（アドビシステムズ社）の商標です。

（6）CSSを使った角丸ボックスの作り方（後編）

4分21秒

解説

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>

＊＊＊＊＊
最近作った大阪のポータルサイトです。
京橋タウンガイド
表紙にあるイベント新着情報でこの画像を使っています。見てみてください。

このサイトはxoopsで構築しました。
地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。
URLの静的生成と正しいマークアップでseo対策済み。
xoopsサイトの型にはまったデザインを一新して、オールCSSコーディング。
今風のテイストに変えてしまってますので、そのへんも見てくれると嬉しいなぁ～。。。。
オールCSSにしてあることで、携帯表示にも対応できるというわけです。

xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。
デザイン：webの森
協力／xoopsシステム構築：A-XYZ

＊＊＊＊

このブログですが、いくつか問い合わせもいただいてますので
ul:afterを使った場合のソースも載せておきますね。

上記のHTMLから<div class="ul-after">　</div>を削除して、

*{
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;
}