スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

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

CSSでタブナビゲーション

投稿日:2007年6月12日   レベル:初心者    ソフトウェア:DreamWeaver
このチュートリアルではリストとCSSを使ったタブナビゲーションを取り上げます。


Step1:CSSを追加する
まず、新しい.htmlファイルを作り、その<head>セクションに次のコードを加えてください。

<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>

このコードは、タブナビゲーションに使うスタイル(CSS)になります。ここではリストを使っていますが、リストの各項目がタブのような効果をもつスタイルとなっています。

このコードに自由に手を入れて好みに合わせましょう。

Step2:div定義を行う
手直しができたらid=’tabs’のdivを定義します。そして、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>

これで、ここTutorialFx.comのものとそっくりのメニューができるはずです。筆者の作った例をここに示します。

グッドラック!

引用:Web Design Library 著者:Ghost翻訳:OJer



スポンサードリンク

コメント

ランダム記事5件

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