ソース
XHTML
<div class="div200-hpi">
<h3>複数のバナーを配置 : div200-li</h3>
<ul>
<li><a href="#"><img src="img/bn-dummy.png" alt="banner : ダミー" width="160" height="40" /></a></li>
<li><a href="#"><img src="img/bn-dummy.png" alt="banner : ダミー" width="160" height="40" /></a></li>
<li><a href="#"><img src="img/bn-dummy.png" alt="banner : ダミー" width="160" height="40" /></a></li>
<li><a href="#"><img src="img/bn-dummy.png" alt="banner : ダミー" width="160" height="40" /></a></li>
<li><a href="#"><img src="img/bn-dummy.png" alt="banner : ダミー" width="160" height="40" /></a></li>
<li><a href="#"><img src="img/bn-dummy.png" alt="banner : ダミー" width="160" height="40" /></a></li>
</ul>
</div>
CSS
div.div200-hpi {
margin: 1em 0;
}
div.div200-hpi h3 {
margin: 1em 0 0.5em;
padding: 3px 10px;
border-bottom: solid 3px #CCC;
}
div.div200-hpi ul {
text-align: center;
}
div.div200-hpi ul li {
display: inline;
margin-left: 10px;
margin-right: 10px;
list-style: none;
}
div.div200-hpi ul li a img {
border: none;
}
block のカタログへ このページのトップへ
解説
ul，liのリストでマークアップしています。liをdisplay: inline;でインライン化して，横に並ぶようにしています。marginで左右の間隔を適度にとり，list-style: none;でリストマークを消します。ulにtext-align: center;をあてることで，バナーはセンタリングされて並びます。borderが出ますが，これをborder: none;で消してあります。リンクに下線を引いたり（text-decoration: underline;），borderやbackgroundを指定した場合，バナーの周囲にも下線や border，背景が出ます。これを消すにはimg要素ではなくa要素のtext-decoration，border，backgroundをnoneにしてください。