HTMLをシンプルに保ちつつ、横並びリンクの区切りを表現する方法

HTML&CSS

2008.10.07

イメージ

横並びのリンクメニューを作成するときに | （区切り）を表現する方法はいくつかあると思いますが、今回はシンプルなソースで実現する方法を、紹介したいと思います。

HTML

HTML は <ul> <li> のみでシンプルに。

<ul>
<li><a href="http://c-brains.jp/blog/wsg/">ホーム</a></li>
<li><a href="http://c-brains.jp/blog/wsg/about.html">はじめての方へ</a></li>
<li><a href="http://c-brains.jp/blog/wsg/contact.html">お問い合わせ</a></li>
<li><a href="http://feeds.feedburner.jp/bashalog">RSS Feed</a> </li>
</ul>

CSS

<ul> に width（全体の幅）と overflow: hidden; を指定します。<li> の方にはネガティブマージン指定を使って左端の | （区切り）がはみ出し、表示されなくなるように指定します。

* {
	margin: 0;
	padding: 0;
}
ul {
	width: 425px;
	overflow: hidden;
}
ul li {
	display: inline;
	margin-left: -1px;
	padding: 0 7px 0 11px;
	border-left: 1px #336699 solid;
	list-style-type: none;
	zoom: 1;
}

この方法なら、<li> に class や id を使わなくても実現できるので、HTMLがシンプルに保つことが可能です。