スポンサー
ウェブデザイン基礎講座
- ウェブデザインの大原則 ( 48 )
- ウェブユーザビリティ ( 6 )
- カラーセオリー ( 6 )
フォトショップ講座
- フォトショップの基本 ( 230 )
- エフェクト ( 169 )
- テキスト ( 81 )
- テクスチャ&パターン ( 60 )
- ウェブレイアウト ( 38 )
- ドロー ( 73 )
- カラーマネージメント ( 29 )
- 画像加工&合成&修正 ( 127 )
HTML&CSS講座
- HTML&CSS ( 41 )
グラフィック講座
- AdobeIllustrator ( 37 )
- Fireworks ( 1 )
Flash講座
- Flash ( 31 )
3D講座
- 3D ( 1 )
ウェブプログラミング講座
サイトメンテナンス講座
- サイトメンテナンス ( 39 )
サイト紹介
- サイト紹介 ( 8 )
スペシャルリンク
サイト内検索
メールマガジン
デザイナー向けのメルマガ
毎週金曜日に発行しています
毎週金曜日に発行しています
テクニック
Home ＞
HTML&CSS講座
＞ CSSでタブナビゲーション
CSSでタブナビゲーション
CSSでタブナビゲーション 
投稿日：2007年6月12日 レベル：初心者 ソフトウェア：
このチュートリアルではリストとCSSを使ったタブナビゲーションを取り上げます。
このコードは、タブナビゲーションに使うスタイル（CSS）になります。ここではリストを使っていますが、リストの各項目がタブのような効果をもつスタイルとなっています。
このコードに自由に手を入れて好みに合わせましょう。
これで、ここTutorialFx.comのものとそっくりのメニューができるはずです。筆者の作った例をここに示します。
グッドラック！
スポンサードリンク
このチュートリアルではリストと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>
#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>
<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
スポンサードリンク
