スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > サイズ変更可能なナビゲーションタブの作り方

サイズ変更可能なナビゲーションタブの作り方

投稿日:2007年11月9日   レベル:上級者    ソフトウェア:
このチュートリアルではCSSと背景イメージを使ったサイズ変更が可能なナビゲーションタブの作り方について説明します。


Step1:タブ画像を用意する


このタブは主なブラウザすべてに対応可能です。ここからこのチュートリアルで使用するイメージをダウンロードします。

タブ画像を用意する

Step2:レイアウトを作成
始めるにあたり、リスト形式のシンプルなレイアウトを作成する必要があります。リンクに<span>タグが入っていることを確認してください。

<div id="Wrapper">
<div id="Navigation">
<ul id="mainNav">
<li><a href="#"><span>home</span></a></li>
<li><a href="#" class="active"><span>services</span></a>
<li><a href="#"><span>about us</span></a></li>
<li><a href="#"><span>contact us</span></a></li> </ul>
</div>
<div id="Container">
</div>
</div>


Step3:レイアウトの主な要素を作る
最初のインスタンスにレイアウトの主な要素を作ります。

html, body { margin: 0px;
padding: 0px; }

body { text-align: center; }

#Wrapper { font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
width: 765px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
text-align: left;
height: auto; }

#Container { color: #333;
clear: both;
width: 723px;
float: left;
display: block;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
border-top-color: #666666;
border-top-width: 1px;
padding: 20px;
margin: 0px; }


Step4:ナビゲーションのdivを作る
これから「ナビゲーション」のdivを作ります。

#Navigation { font-size: 12px;
color: #333333;
height: 25px;
width: auto;
padding: 0px;
margin: 0px; }


Step5:ナビゲーションをフォーマット
最後にナビゲーションをフォーマットする必要があります。背景イメージを<a>タグと<span>タグに追加します。<span>タグが<a>タグの中に配置されてリンクのサイズの定義を拡張するためです。

#mainNav { margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none; }

#mainNav li { float: left;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px; }

#mainNav li a { margin: 0px;
background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: right 0px;
font-weight: normal;
color: #666666;
text-decoration: none;
height: auto;
width: auto;
float: left;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 0px; }

#mainNav li a:hover { text-decoration: none;
color: #CCCCCC; }

#mainNav li a span { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
padding-top: 6px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 30px;
height: 19px;
width: auto;
float: left;
cursor: pointer;
cursor: hand;
margin: 0px; }

#mainNav li a.active { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: right -47px; }

#mainNav li a.active span { background-attachment: scroll;
background-image: url(images/tabs_2.png);
background-repeat: no-repeat;
background-position: 0px -47px; }

#mainNav li a.active:hover { color: #FFFFFF;
text-decoration: none;
cursor: pointer;
cursor: hand; }


我々のウェブサイト「Affordable Web Site Design」でヘッダーイメージの下部にタブが表示されていること以外は同じ手法が使われていることを確かめることができます。

引用:Web Design Library 著者:Coremediadesign.co.uk翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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