ヘッダーメニューのスタイルシートの見方

 

赤字の部分はそれぞれの意味を説明しています。

-----------------------------------------------------------------------

#header-menu {
width: 900px;　←　全体の横幅
margin: 0;
padding: 0;
height: 45px;　←　縦の高さ
border-bottom: solid 2px #cccccc;　←　枠線（下の枠線を2ピクセルの実線で）

}

#header-menu ul {　　
width: 900px;　
margin: 0 auto 0 auto;
padding: 0;

}

#header-menu li {　
display: inline;
list-style-type: none;
float: left;
color: #ffffff;
width: 150px;　←　一つのメニューの横幅
}

#header-menu li a {　
font-size: 12px;　←　文字の大きさ
line-height: 20px;　←　文字が書いてある部分の縦の高さ
color: #765c47;　←　文字の色
background-image: url(img/head_menu_back_abase.gif);　←　背景画像
text-align: center;　←　文字を位置（中央）
display: block;
font-weight: bold;　←　文字の太さ
letter-spacing: 1px;　←　文字と文字の間隔
border-right-width: 1px;　←　枠線の幅（右に１ピクセルで）
border-right-style: solid;　←　枠線の種類（右に実践で）
border-right-color: #cbb994;　←　枠線の色
text-decoration: none;
padding: 14px 15px 11px 15px;　←　余白
}

#header-menu li a:hover {　←　マウスが乗ったときの指定
color: #fffffc;　←　文字の色
background-image: url(img/head_menu_back_hover.gif);　←　背景画像
}

-----------------------------------------------------------------------

 

ヘッダーメニュー数を変える

 

 

最初の設定ではメニューの数は６つにしています。これを７つにする方法を例にしてお伝えします。#header-menu liの部分を編集します

-----------------------------------------------------------------------

#header-menu li {
display: inline;
list-style-type: none;
float: left;
width: 150px;
}
-----------------------------------------------------------------------

width: 150px;というのはヘッダーメニュー一つの幅を表しています。

ヘッダーメニューの横幅は９００pxなので、６つ並べるには１５０pxにしているのです。

ということは７つにしたい場合は９００÷７＝128.5

5つにしたい場合は９００÷５＝180

それぞれの数値を当てはめて編集すればOKです。

width: 150px;　→　width: 128.5px;　（７つにしたい場合）

 

文字の色や大きさを変える