今日はリストとCSSを使ってナビゲーション用のタブを作ってみます。
少々長くなりますので興味の無い方はスルーしてください（笑）
まず最初にxhtmlファイルを作成します。
<div>タグでナビゲーションのボックスを作りますが記述は以下のようになります。
***************************************************************************
<div id=”navi”>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Company</a></li>
<li><a href=”#” class=”active”>Business</a></li>
<li><a href=”#”>Careers</a></li>
<li><a href=”#”>Information</a></li>
</ul>
</div>
<div id=”main”>CSSでタブナビゲーションを作る</div>
***************************************************************************
ナビゲーション部分のボックスはID：navi 本文部分のボックスはID：mainとしました。
現在アクティブになっているページ（Business）のliはclass名：activeにしていますが
これは各ページごとに変わってきます。例えばHomeのページではHomeのliに
class=”active”を設定するわけです。
リンクはダミーリンクで#を入れていますが実際はリンク先のアドレスを入れてください。
ただしこれではリスト形式で以下のように文字が表示されるだけです。
これを装飾するためにCSS（ファイル名：tab.css）を作成します。
***************************************************************************
#navi{
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#ffffff;
font-weight:bold;
}
#navi ul{
list-style:none;
margin:0;
padding:0;
}
#navi ul li{
display:inline;
margin:0;
}
#navi ul li a{
float:left;
margin:0;
padding:6px 15px;
color:#ffffff;
background:#66ccff;
text-decoration:none;
border:1px solid #3399ff;
border-left:0;
}
#navi ul li a:hover{
background:#eeeeee;
color:#999999;
text-decoration:none;
border-bottom:1px solid #eeeeee;
}
#navi ul li a.active{
background:#eeeeee;
color:#999999;
border-bottom:1px solid #eeeeee;
}
#main{
background:#eeeeee;
clear:both;
font-size:12px;
color:#666666;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
}
***************************************************************************
CSSの記述は以上の通りですが、少し分かりにくい部分に補足説明を。
まず
#navi ul li{
display:inline;
margin:0;
}
ですが、liとはリストです。リストはブロックレベルで既定では縦に並んでしまいます。
横に並べるためにリストをブロックレベルからインラインレベルに変えないといけません。
そこで、displayプロパティを使用して「display:inline;」と指定します。
これで、li要素を (ブロックレベル)からインラインレベルへ変換することが出来ます。
次にリンク時の設定ですが、通常のリンク状態（a）が、
#navi ul li a{
float:left;
margin:0;
padding:6px 15px;
color:#ffffff;
background:#66ccff;
text-decoration:none;
border:1px solid #3399ff;
border-left:0;
}
上記の記述です。リンクの箇所は既定で下線が表示されます。
それを非表示にする為「text-decoration:none;」を入れています。
その他ボタンの色、境界線、余白などの設定になります。
そしてマウスをボタンに乗せた時の状態（a:hover）が、
#navi ul li a:hover{
background:#eeeeee;
color:#999999;
text-decoration:none;
border-bottom:1px solid #eeeeee;
}
上記の記述です。マウスを乗せた時にブルーの下ラインが残っていると変なので
「border-bottom:1px solid #eeeeee;」でボタン色と同じグレーにしています。
そして現在アクティブになっているページのボタンの設定はclass名activeで下記
のようにしています。
#navi ul li a.active{
background:#eeeeee;
color:#999999;
border-bottom:1px solid #eeeeee;
}
これで完成ですが最後にxhtmlファイルのhead内に、
<link href=”tab.css” mce_href=”tab.css” rel=”stylesheet” type=”text/css” />
の記述を忘れずに。tab.cssを読み込みさせる、という意味です。
どうでしょう。うまく出来ましたでしょうか？
デザイナー/INOUE
