一つ前のブログで書いた通りHTMLを作成したので、
今回はｃｓｓを使って位置指定をしていきます。
まずは、他のものとかぶらないよう、
ヘッダーの下に隙間をあけるため下のmarginを50pxに増やしました。
margin-bottom:50px;
前回margin-bottomをいじったので、数値変更のみ、変えた部分は青色です。
/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:170px;
margin-bottom:50px;
background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20110829/11/87/88/j/o09800170usagi-ha1314585524144.jpg
);
}/* ←ブログヘッダーに背景画像を敷きたいとき */
他のｃｓｓ記述は、自分で作ったクラスを書くのでｃｓｓの一番下に書きます。
ｃｓｓの一番下にクラスusagimenuを記述していきます。
まずは、ブラウザによって表示が異なるのを防ぐために
margin と padding という空白的な場所を初期化します。
margin:0;
padding:0;
そして、メニューを入れたい場所に自分で作ったクラスの位置を指定します。
私は、ヘッダーの位置を見て上から315pxの位置しました。
top:315px;
位置を絶対位置にして、動かないよう固定します。
position:absolute;
クラスusagimenuの記述はこんな感じです。
.usagimenu{
margin:0;
padding:0;
top:315px;
position:absolute;
}
続いて、usagimenuの中のリストの指定に移ります。
横幅はヘッダーと同じく980px、高さは40pxにします。
width:980px;
height:40px;
ウィンドウ幅が980pxより大きい人が表示した時、
余った左右のスペースをよきにはからって貰うため
marginの左右は0ではなくautoを使用します。
margin:0 auto;
usagimenuの中のリストの記述はこんな感じです。
.usagimenu ul{
margin:0 auto;
padding:0;
width:980px;
height:40px;
}
後は、リストの中身の指定です。
中身は980pxに5つですから、
980÷5＝196px にすると均等になるはず。
width:196px;
リストがこのままでは縦に連なっているので、横に連なってもらいます。
float:left;
usagimenuの中のリストの中のリスト中身の記述はこんな感じです。
.usagimenu ul li{
margin:0;
padding:0;
width:196px;
float:left;
}
これで、見た目はともかくヘッダーの下にメニューが出来ました
（見た目は、この後の見た目編でいじります）
今回一番下に記述した内容はこれで全部です。
.usagimenu{
margin:0;
padding:0;
top:315px;
position:absolute;
}
.usagimenu ul{
margin:0 auto;
padding:0;
width:980px;
height:40px;
}
.usagimenu ul li{
margin:0;
padding:0;
width:196px;
float:left;
}