フッターでよく使われているナビゲーションのサンプル
←の用なテキストで出来たナビゲーションをよくWebサイトの下部あたり見かけると思うんですが、その作り方をいくつか解説しておきたいと重います。
簡単誰でも出来ちゃう p 要素で作る
トップ ｜ 会社概要 ｜ アクセス ｜
XHTML
<p ><a href="/">トップ</a> ｜ <a href="/">会社概要</a> ｜ <a href="/">アクセス</a> ｜</p>
こういうナビゲーションはマークアップ的にもリストで作った方が自分はいいと思うのであまりすすめません。
ul li で作る 縦線を書いた感じ
XHTML
<ul class="sampleFootNavi01">
<li><a href="/">トップ</a> ｜</li>
<li><a href="/">会社概要</a> ｜</li>
<li><a href="/">アクセス</a> ｜</li>
</ul>
CSS
#contents .sampleFootNavi01 {
margin: 0 10px 20px;
}
#contents .sampleFootNavi01 li {
display: inline;
margin-right: 0.5em;
}
ul li で作る borderを使ってみる
XHTML
<ul class="sampleFootNavi02">
<li><a href="/">トップ</a></li>
<li><a href="/">会社概要</a></li>
<li><a href="/">アクセス</a></li>
</ul>
CSS
#contents .sampleFootNavi02 {
margin: 0 5px 20px;
}
#contents .sampleFootNavi02 li {
display: inline;
border-right: solid 1px #696969;
padding-right: 1.2em;
margin-left: 0.7em;
}
これ以外にもやろうと思えば、色々あると思いますが自分が良いと思う方法で使って下さい。
