参考サイトにあるナビメニューの作り方

質問

http://www.tagami-bunguten.com/page/3 のサイトの
カテゴリー一覧と書かれているナビメニューの区切り線のことなんですが、どのように作ればよろしいのでしょうか？

グーグルのデベロッパーツールを見てもいまいち仕組みがわからないのですが、ナビメニュー自体が画像になっているのでしょうか？

回答No.1

Katsu_Kaiz · ベストアンサー

直リンクするのもどうかと思いましたが……。
　http://www.tagami-bunguten.com/data/kenntarock/image/gnavi2.png

おっしゃるようにナビメニューのひとつひとつが画像になっていて、このpng画像の右端に区切り線も含まれています。これらをCSSの《background-image》を使って、<a>要素の背景画像として埋め込むような仕組みです。

◆background-image－スタイルシートリファレンス
　http://www.htmq.com/style/background-image.shtml

あとは<a>の親要素である<li>を、《float》で左に並べていくだけだと思います。

◆float－スタイルシートリファレンス
　http://www.htmq.com/style/float.shtml

デベロッパーツールでも確認できるので、<li>要素と<a>要素のところを調べてみてください。

お礼

ありがとうございます。