[CSS]テキストの可変に対応したシンプルでスタイリッシュなパンくず
Post on:2009年9月29日
sponsors
テキストの量の変化に対応したシンプルでスタイリッシュなパンくずを実装するスタイルシートをAce Infoway Indiaから紹介します。
How to Create Nice Scalable CSS Based Breadcrumbs
HTMLはシンプルで、下記のようにリスト要素で実装されています。
HTML
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
枠線はliのborderで、アローは下記の画像を使用しています。
使用している画像
ダウンロードできるファイルはHTML、CSSファイルだけでなく、上記の画像のPSDもあるのでカラーやサイズの変更にも簡単に対応できます。
sponsors
