[CSS]テキストの可変に対応したシンプルでスタイリッシュなパンくず

テキストの量の変化に対応したシンプルでスタイリッシュなパンくずを実装するスタイルシートをAce Infoway Indiaから紹介します。

How to Create Nice Scalable CSS Based Breadcrumbs

HTMLはシンプルで、下記のようにリスト要素で実装されています。

HTML

<ul id="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Main Lavel</a></li>
<li><a href="#">Sub Lavel</a></li>
<li><a href="#">Sub sub Lavel</a></li>
<li>Your Current page</li>
</ul>

枠線はliのborderで、アローは下記の画像を使用しています。

使用している画像

ダウンロードできるファイルはHTML、CSSファイルだけでなく、上記の画像のPSDもあるのでカラーやサイズの変更にも簡単に対応できます。

Post on:2009年9月29日