Breadcrumb CSS - Appleに習うパンくずデザインCSS

2007年6月27日(水) 09:00

Breadcrumb CSS
Apple.comのようにパンくずも少し手を加えるだけで、使いやすいものになります、Appleのパンくずの区切りには半透明の透過PNGが使われている為、InternetExplorerへの対応はAlphaImageLoaderをCSSで指定しています。

半透明のアルファチャンネルを持つPNGイメージを使う方法と、CSSでopacityを指定する方法のどちらでも同じようにデザインできます。IEはページ読み込み時のコンテンツ描写タイミングが早いので、違和感の少ないCSSのopacityを使った方法を紹介します。

パンくず部分のHTML
パンくずの区切りが表示される<span>タグ部分を含め、パンくず部分を下記のように作成します。マークアップはAppleを参考にしているので、サイトに合わせて変更しても良い。

<div class="breadcrumbs">
   <a href="/">Home</a>
   <span>></span>
   <a href="/">Sample</a>
   <span>></span>
   <em>Breadcrumbs</em>
</div>

CSSで区切り文字のイメージを表示
<span>タグで指定されている区切り文字の背景画像に、区切用のPNGイメージを指定します。width:0 の指定とpadding-right:10px の指定で区切り文字が表示されないようにしつつ、背景イメージの表示幅の10pxを確保します。

div.breadcrumbs span {
   background:url(./images/bg-breadcrumb.png) no-repeat left center;
   overflow:hidden;
   padding:0 0 0 10px;
   width:0;
   filter:alpha(opacity=40); /* for IE */
   opacity:0.4;
}

区切用のPNGイメージ
ダウンロードサンプルに含まれる画像をそのまま利用しても良いですが、自作する場合は1色透過のGIF、PNGいずれかで作成し、スタイルシートで指定してください。

その他にレイアウト用のスタイルを指定する部分に関してはサンプルをダウンロードして参照してください。リキッドレイアウトでも利用できるようになっています。

さくらインターネット