ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング