今回はパンくずリストのHTML化について。

「パンくずリスト」とはよくサイトの上の方にあり、いまどこにいるのかを示すリンクのことです。

こんなやつ blog009

童話「ヘンゼルとグレーテル」で森で迷子にならないように通り道にパンくずを置いていったというのが語源。まさに迷子にならずにホームに戻るためのリストですね。

 

それほど大した内容でもないですが、CSSで背景画像を入れ込むやり方がスマートかなと思います。

 

HTML

<div id="pankuzu">
	<ul>
		<li><a href="#">階層1</a>
		<li><a href="#">階層2</a>
		<li><a href="#">階層3</a>
	</li></ul>
</div><!-- end pankuzu -->

 

CSS

#pankuzu{
	background:#008FFF;
	color:#fff;
}
 
#pankuzu ul{
	padding:10px 15px;
}
 
#pankuzu li{
	display:inline;/* li要素を横に並べる場合必須 */
	padding:0px 10px 0px 0px;/*階層間の表示スペースを調整*/
}
 
#pankuzu a{
	padding:0px 0px 0px 15px; /* 画像を表示するスペース分右にずらしている */
	background:url(./img/pankuzu.png) left center no-repeat;
	text-decoration:none;
	color:#fff;
}
 
#pankuzu a:hover{
	color: #0f0;
	text-decoration: underline;
}

 

画像のleftとなっている部分をrightにすると右側に画像を配置します。画像を使わない場合にはHTMLを以下のようにして、CSSファイルから画像の部分を削除してもいいと思います。

<div id="pankuzu">
	<ul>
		<li><a href="#">階層1</a> > 
		<li><a href="#">階層2</a> >   
		<li><a href="#">階層3</a>
	</li></ul>
</div>

 

それぞれこんな感じに出来上がります。

blog010

トラックバック

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です