[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート

グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。

Simple scalable CSS based breadcrumbs
demo

パンくずはリスト要素で実装されており、日本語の使用も可能です。

パンくずのHTML

<ul id="crumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Main section</a></li>
<li><a href="#">Sub section</a></li>
<li><a href="#">Sub sub section</a></li>
<li>The page you are on right now</li>
</ul>

パンくずの文字量は各項目の背景が右寄せのアロー画像になっているため、増えても破綻しないようになっています。
※量には限界がありますが。

ページ下部では、そのアロー画像のPSDもダウンロードできます。

Post on:2009年2月12日