CSSレイアウト
複雑な応用型レイアウト
header (ヘッダー部)
header・・・と、勝手に名前を付けてしまいましたが、一番上にあるアイコン形式のメニューとロゴの事です。
さて、この部分は下の画像のように、3種類のパーツから構成されています。
黄色で囲まれた部分がサイトのロゴ、赤色で囲まれているのはアイコンメニュー、青色で囲まれているのはボタンメニューです。
さて、まずはHTMLを書いてしまいましょう。各パーツは以下のタグを使用します。
- サイトロゴ ・・・ h1, a
- アイコンメニュー ・・・ ul, li, a
- ボタンメニュー ・・・ ul, li, a
ソースコードは以下のようになります。ZIPファイル内のheader1.htmlもご覧ください。
<h1><a href="#">サイトロゴ</a></h1>
<ul>
<li><a href="#">アイコン１</a></li>
<li><a href="#">アイコン２</a></li>
<li><a href="#">アイコン３</a></li>
<li><a href="#">アイコン４</a></li>
<li><a href="#">アイコン５</a></li>
<li><a href="#">アイコン６</a></li>
</ul>
<ul>
<li><a href="#">ボタン</a></li>
<li><a href="#">ボタン</a></li>
</ul>
Yahoo! のヘッダ部の解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! ヘッダー部
アイコンメニューは、アイコンが左右に分かれていますが、一つの ul要素 にしてしまいます。
基本的なHTMLが書けたら、次はCSSで飾り付けをしていきます。
まず、ロゴ、アイコン、ボタンをブロック要素として表示し、適当な大きさで表示してみることから始めます。
CSSでレイアウトを行う際に必要なタグ, idを追加しましょう。ソースコードは以下のようになります。ZIPファイル内のheader2.htmlもご覧ください。
<div id="base">
<div id="header">
<h1><a href="#">サイトロゴ</a></h1>
<ul id="icons">
<li><a href="#">アイコン１</a></li>
<li><a href="#">アイコン２</a></li>
<li><a href="#">アイコン３</a></li>
<li><a href="#">アイコン４</a></li>
<li><a href="#">アイコン５</a></li>
<li><a href="#">アイコン６</a></li>
</ul>
<ul id="buttons">
<li><a href="#">ボタン</a></li>
<li><a href="#">ボタン</a></li>
</ul>
</div>
</div>
準備が整ったところで、次はCSSです。CSSで指定するべきことをリストアップしてみましょう。
- base の幅を指定し、中央に表示させる
- header の高さを指定する（幅はbaseで指定してあるので指定しなくてOK）
- リストのマーカー（左の黒い点）を消す
- li と a をブロック要素として表示させる
- サイトロゴ、アイコン、アイコンの大きさを指定する（li, a の両方に）
以上です。ただし、後の作業がやりやすくなるので
* { margin: 0; padding: 0; }
を指定しておくと良いでしょう。また、サイトロゴ、アイコン、ボタンには分かりやすいように背景色を指定しておきます。
具体的な大きさ、色は以下のとおりです。
- base
- 幅 : 705px
- header
- 高さ : 60px
- サイトロゴ
- 大きさ : 220px×60px
- 背景色 : #f66
- アイコン
- 大きさ : 50px×50px
- 背景色 : #fc0
- ボタン
- 大きさ : 50px×20px
- 背景色 : #69f
ソースコードは次のようになります。ZIPファイル内のheader2.htmlもご覧ください。
* { padding: 0; margin: 0; }
body { text-align: center; }
#base {
width: 705px;
text-align: left;
margin: 10px auto;
}
#header { height: 60px; }
#header ul { list-style: none; }
#header a, #header li{ display: block; }
#header h1, #header h1 a {
width: 220px;
height: 60px;
}
#icons li, #icons a {
width: 50px;
height: 50px;
}
#buttons li, #buttons a {
width: 50px;
height: 20px;
}
#header h1 a { background: #f66;}
#icons a { background: #fc0; }
#buttons a { background: #69f; }
気をつけることは・・・特にないでしょう。実際に表示してみると、↓のように表示されるはずです。
次は、ロゴ、アイコン、ボタンを横に並べましょう。
普通、このようなメニューを作る際には、フロートを用いて左から右へと li要素を並べていくのですが、今回の場合はそれが出来ません。
サイトロゴの h1要素を２つの ul要素で挟むようにすれば良いかもしれませんが・・・レイアウトのためにHTMLの構造を変更するのはナンセンスでしょう。
したがって、今回は ロゴ、アイコン、ボタンはposition: absoluteを用いての絶対位置指定で配置を行います。
絶対位置指定の基準はheaderのdiv要素とします。つまり、header にはposition: relativeというプロパティを付けてあげればOKですね(^^)/
ということで、ロゴ、アイコン、ボタンは一つずつ座標を指定することになったので、それぞれの li要素にはclassで一つずつ名前を付けてあげましょう。（id ではなく class を使うのは・・・気分です。）
名前は、yahooサイトのアイコンを参考に、以下のように決めました。
- 一番左のアイコン
- class名 : bb
- x座標(Left) : 15px
- y座標(Top) : 5px
- 左から２番目ののアイコン
- class名 : new-info
- x座標(Left) : 80px
- y座標(Top) : 5px
- 左から３番目ののアイコン
- class名 : my
- x座標(Left) : 145px
- y座標(Top) : 5px
- 左から４番目ののアイコン
- class名 : mes
- x座標(Left) : 440px
- y座標(Top) : 5px
- 左から５番目ののアイコン
- class名 : cell
- x座標(Left) : 505px
- y座標(Top) : 5px
- 左から６番目ののアイコン
- class名 : free-id
- x座標(Left) : 570px
- y座標(Top) : 5px
- 上のボタン
- class名 : help
- x座標(Left) : 625px
- y座標(Top) : 5px
- 下のボタン
- class名 : regist
- x座標(Left) : 625px
- y座標(Top) : 30px
- サイトロゴ
- x座標(Left) : 210px
- y座標(Top) : 0px
ロゴについてですが、これは子孫セレクタを使って、座標を指定してあげましょう。
ソースコードは以下のようになります。長くなるので、追加部分のみを記述してあります。ZIPファイル内のheader3.html, header3.cssもご覧ください。
#header { position: relative; }
#header li, #header h1{ position: absolute; }
#header h1 {
top: 0;
left: 210px;
}
#icons .bb {
top: 5px;
left: 15px;
}
#icons .new-info {
top: 5px;
left: 80px;
}
#icons .my {
top: 5px;
left: 145px;
}
#icons .mes {
top: 5px;
left: 440px;
}
#icons .cell {
top: 5px;
left: 505px;
}
#icons .free-id {
top: 5px;
left: 570px;
}
#buttons .help {
top: 5px;
left: 625px;
}
#buttons .regist {
top: 30px;
left: 625px;
}
ずいぶんYahoo!のヘッダー部に近づきました。後やるべきことは・・・
- 文字を消す
- a要素の背景に、画像を表示させる
の２つだけです。文字を消すには、
<span class="hide">～</span>
a要素内の文字列をで囲み、
.hide { display: none; }
というCSSを適用すれば実現できます。
背景を表示するのは、backgroundプロパティで実現できます。・・・でも、単にそれだけでは面白くないので、マウスオーバーで画像を変化させてみましょう。
そのためには、下のような画像を用意する必要があります。
つまり、通常時は上半分を表示し、マウスが乗ったときには下半分を表示すればよいのです。
マウスが乗ったとき・・・というのは擬似クラス :hoverというものがありましたよね。
上半分・下半分というのは、ブロック要素からはみ出た部分は表示されないことを利用します。背景画像の位置は、background-positionでズラすことが出来ます。イメージは下のような感じ。
ソースコードは以下のようになります。
#icons .new-info a {
width: 50px;
height: 50px;
display: block;
background: url("new_info.png") no-repeat;
}
#icons .new-info a:hover { background-position: 0 -50px; }
ZIPファイル内のheader4.htmlとheader4.cssの２つのファイルがヘッダ部の完成コードになります。header3.html からの変更点は文字列をYahoo!のページにあわせたことです。header3.css からの変更点は、ロゴ、アイコン、ボタンのそれぞれに背景画像（マウスオーバー）を指定したことと、コードの最適化（？）を行っていることです。
最適化・・・出来るだけわかりやすく、記述量が減るように多少手直しを加えてあります。
