フッターでよく使われているナビゲーションのサンプル

フッターナビ

←の用なテキストで出来たナビゲーションをよく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;
}

これ以外にもやろうと思えば、色々あると思いますが自分が良いと思う方法で使って下さい。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article