2007年06月04日

フッタ部分リンクメニューのリストタグによる実現方法

第1回目は「フッタ部分リンクメニューのリストタグによる実現方法」について、お話します。

まずは弊社のホームページ、フッタ部分をごらんください。


| 会社概要 | お問い合わせ | 個人情報保護方針 | 採用情報 | サイトマップ |

というような、リンクがあるかと思います。
このようなリンクメニューは
さまざまなサイトのヘッダ部分、フッタ部分に使用されています。
 
みなさんがこのようなリンクメニューを表現する場合、
どのようにコーディングされますか?

「どのようにコーディングする? そのままコーディングするに決まってるじゃん。」

と、ほとんどの方が考えると思います。
具体的には下記のようになるわけですね。

htmlコーディング例
<div>
|会社概要 | お問い合わせ | 個人情報保護方針 | 採用情報 | サイトマップ |
</div>

※アンカータグは省略
 
これでも問題はありませんが、あまりスマートではないように思います。

私がこのソースをスマートではないと考える要因は3つ

・ メニューの区切りである“|”を直接書いている。
・ それぞれのリンクの間隔をスペースでとっている。
・ 個々のリンクをひとまとめに書いている。

ではどのように作ればスマートなのか?
私はリストタグを使用するとよりスマートであると考えます。

htmlコーディング例
<div id="footerMenu">
<ul>
<li><a href="https://www.evol-ni.com/company/index.html">会社概要</a></li>
<li><a href="https://secure.evol-ni.com/contact/">お問い合わせ</a></li>
<li><a href="https://secure.evol-ni.com/policy/index.html">個人情報保護方針</a></li>
<li><a href="https://www.evol-ni.com/recruit/index.html">採用情報</a></li>
<li><a href="https://www.evol-ni.com/sitemap/index.html">サイトマップ</a></li>
</ul>
</div>
cssサンプル
* {
margin:0;
padding:0;
}
#footerMenu {
text-align:center;
}
#footerMenu ul {
display:inline;
border-left:1px solid #000000;
}
#footerMenu li {
display:inline;
padding-left:10px;
padding-right:10px;
border-right:1px solid #000000;
}
 
メニューの区切りである“|”は、<li>にborder-rightを付け、
<ul id="footerMenu">にborder-leftを付けることで表現、
それぞれのリンクの間隔はpaddingで開けています。

もし、メニュー両端の“|”がいらない場合は、
<ul id="footLink">のborder-leftを取り、
最後の<li>のborder-rightを0にすればよいのです。
htmlコーディング例
<div id="footerMenu">
<ul>
<li><a href="https://www.evol-ni.com/company/index.html">会社概要</a></li>
<li><a href="https://secure.evol-ni.com/contact/">お問い合わせ</a></li>
<li><a href="https://secure.evol-ni.com/policy/index.html">個人情報保護方針</a></li>
<li><a href="https://www.evol-ni.com/recruit/index.html">採用情報</a></li>
<li class="last"><a href="https://www.evol-ni.com/sitemap/index.html">サイトマップ</a></li>
</ul>
</div>
cssサンプル
* {
margin:0;
padding:0;
}
#footerMenu {
text-align:center;
}
#footerMenu li {
display:inline;
padding-left:10px;
padding-right:10px;
border-right:1px solid #000000;
}
#footerMenu li.last {
border-right:0;
}

HTML5&CSS3の最新情報はこちら → HTML5GOGO

posted by baba at 15:04 | Comment(0) | TrackBack(0) | テクニック
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。