breadcrumbs list(パンくずリスト)とは、そのページの位置がホームページの中で どの階層にあるかを示したナビゲーションです。
当ページの場合、「Home > HTML & CSS > breadcrumbs list」 のように画面左上に現されています。
breadcrumbs listの由来は、童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを 少しずつ落としながら歩いたという事だそうです。
breadcrumbs list(パンくずリスト)のほかに、topic path(トピックパス)とも言われます。
HTMLの例:
<div id="breadcrumbs"> <ol> <li><a href="https://www.bnote.net/">Home</a></li> <li><a href="../html_idx.html">HTML & CSS</a></li> <li>breadcrumbs list(パンくずリスト) </ol> </div>
CSSの例:
#breadcrumbs li{ display:inline; } #breadcrumbs a{ padding-right: 14px; background: url('breadcrumbs.png') center right no-repeat; }
背景画像で各階層の区切り 「>」を表示しています。
Copyright 1997-2010 BBB All rights reserved.