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

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

デモのキャプチャ

How to Create Nice Scalable CSS Based Breadcrumbs

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

HTML

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

アロー画像のキャプチャ

使用している画像

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

sponsors

top of page

©2018 coliss