スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSSタブ・ナビゲーション

CSSタブ・ナビゲーション

投稿日:2006年12月26日   レベル:初心者    ソフトウェア:DreamWeaver
html_10013_1.jpgここでは、リストとCSSを用いてナビゲーション用のタブを作ってみましょう。


Step1 − タブ用CSS
まず、ナビゲーション用のタブを付けたいHTML文書を用意し、その部分に、次のコードを挿入してください。
<style type="text/css">
#tabs{
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFF;
font-weight:bold;
}
#tabs ul{
list-style:none;
margin:0;
padding:0;
}
#tabs ul li{
display:inline;
margin:0;
text-transform:capitalize;
}
#tabs ul li a{
padding:5px 16px;
color:#FFF;
background:#E7A272;
float:left;
text-decoration:none;
border:1px solid #D17B40;
border-left:0;
margin:0;
text-transform:capitalize;
}
#tabs ul li a:hover{
background:#EAEAEA;
color:#7F9298;
text-decoration:none;
border-bottom:1px solid #EAEAEA;
}
#tabs ul li a.active{
background:#EAEAEA;
color:#7F9298;
border-bottom:1px solid #EAEAEA;
}
#content{
background:#EAEAEA;
clear:both;
font-size:11px;
color:#000;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
}
</style>

これはナビゲーション用のタブを作るためのスタイルです。このスタイルを施すことによって、普通のリスト構造をタブのように見せるのです。 コードの働きを確認したら、お好みに合わせて自由に変更してください。

Step2 − <div>タグで挟む
次に、リンクのリストを作り、「tabs」をIDとする<div>タグで挟みます。たとえば、次のようにします。
<div id='tabs'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Forums</a></li>
<li><a href='#' class='active'>Tutorials</a></li>
<li><a href='#'>Downloads</a></li>
<li><a href='#'>Links</a></li>
</ul>
</div>
<div id='content'>ここに本文を入れます</div>

これで完成です。それでは、ご自分のHTML文書をブラウザーで表示してみてください。TutorialFx.comとよく似たタブ形式のメニューが表示されるはずです。参考までに、ここで使った例の場合の全コードをexample.htm (http://www.webdesign.org/img_articles/10013/example.htm) に示しておきます。
どうぞ、お試しください。

引用:Web Design Library 著者:Ghost翻訳:小林 修



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング