画像を使ったパンくずリストの実装

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

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

こんなやつ

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

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

HTML

    

        
階層１
        
階層２
        
階層３
    

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ファイルから画像の部分を削除してもいいと思います。

    

        
階層１ > 
        
階層２ >   
        
階層３
    

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