ゼロからのWeb制作 Vol.12|ナビゲーション作成

こんにちは、鈴木です。

今回はCSSを使って簡単なナビゲーションバーを作りたいと思います。

イメージでは、当社のホームページのナビゲーションのスタイルにしたいと思います。

資料26
横型ナビゲーション(* 赤枠部分)
 

1.リストを作る

まず、ナビゲーションに表示させたい項目を、ulタグ、liタグ、aタグを用いてHTML文書に書いていきます。

ulタグはliタグをまとめるため、liタグはaタグを並べるために明記します。

<ul>
<li><a href="http://ss-complex.com/">Top</a></li>
<li><a href="http://ss-complex.com/services/">Service</a></li>
<li><a href="http://ss-complex.com/price/">Price</a></li>
<li><a href="http://ss-complex.com/works/">Gallery</a></li>
</ul>

aタグの中にはリンクさせたいホームページのリンクを記入しておきます。

2.ulタグの装飾

ここからは、スタイルシート(CSS)を使っていきます。

HTMLのulタグの既存の余白を消すために、CSSでmargin-left、padding-leftの値を0にします。

そして、HTMLのliタグにつく項目前の点(・)を消すために、CSSでlist-style-typeをnoneにします。

 

次に、ナビゲーションを作るために枠を作成します。

CSSのborderタグを使い、横幅を決めるためにwidthタグを使います。

今回は画面全体に幅をとったので、widthは100%になりました。

borderタグでは、線のスタイル(この場合は実線なのでsolid)、太さ、色の順に半角スペースで区切って明記します。

ulタグにおけるスタイルシートをまとめると以下のようになります。


ul{
margin-left:0;
padding-left:0;
list-style-type:none;
width:100%;
border-top:solid 1px #9E96F8;
border-bottom:solid 1px #9E96F8;
border-left:solid 1px #9E96F8;
}

* カラーコードは適当です。

3.liタグの装飾

次にliタグの装飾をしていきます。

項目間の幅をwidthタグで指定します。

そして、今の段階では項目は上から順に並んでいます。これを横並びにするために、floatタグにleftを指定します。

liタグにおけるスタイルシートをまとめると以下のようになります。


li{
float:left;
width:150px;
}

4.aタグの装飾

次にaタグの装飾をしていきます。

今の段階で項目はただ横並びになっているだけなので、CSSでdisplayタグのblockを指定します。そして、ブロック内の間隔やボーダーを設定するためにpadding、borderを使います。

また、
リンク内の文字の位置を変更する(中央揃えにする)ためにtext-align(center),
リンク内の文字下にある下線を変更する(消す)ためにtext-decoration(none),
リンクの背景色を指定するためにbackground-colorを使います。

最後にリンク同士の幅を指定するためにwidthタグを使い調整します。

また、マウスをリンクに載せた時に色を変えるため、a:hover要素にbackground-colorを指定します。
(詳細は以前の記事にて)

aタグにおけるスタイルシートをまとめると以下のようになります。


a{
display:block;
padding-top:10px;
padding-bottom:10px;
border-right:solid 1px #9E96F8;
text-align:center;
text-decoration:none;
background-color:#91B4E1;
color:#555555;
width:150px;
}
a:hover{
background-color:#2F75D1;
}

* カラーコードは適当です。
 

以上、全体をまとめると以下のようになります。

HTML
<ul>
<li><a href="http://ss-complex.com/">Top</a></li>
<li><a href="http://ss-complex.com/services/">Service</a></li>
<li><a href="http://ss-complex.com/price/">Price</a></li>
<li><a href="http://ss-complex.com/works/">Gallery</a></li>
</ul>
CSS
ul{
margin-left:0;
padding-left:0;
list-style-type:none;
width:100%;
border-top:solid 1px #9E96F8;
border-bottom:solid 1px #9E96F8;
border-left:solid 1px #9E96F8;
}
li{
float:left;
width:150px;
}
a{
display:block;
padding-top:10px;
padding-bottom:10px;
border-right:solid 1px #9E96F8;
text-align:center;
text-decoration:none;
background-color:#91B4E1;
color:#555555;
width:150px;
}
a:hover{
background-color:#2F75D1;
}

* カラーコードは適当です。

弊社のサイトのナビゲーションとは全く同じではありませんが、上のHTML,CSSをブラウザで見ると以下のようになります。

・通常時
資料27

・リンク上にマウスを移動させた時
資料28
 

他にもCSSで様々な機能を付けることができます。

勉強してまた紹介していきたいと思います。