CSSレイアウト[本文2段組のレイアウト-8]ヘッダーメニュー
2段組のレイアウトはほぼ完成したが、最後にヘッダーメニューを付ける。これはヘッダーの右上部分にある補助的なメニュー。ここでは「about this site」「site map」。企業サイトでよくある「お問い合わせ」や「個人情報保護方針」などのメニューもここにもってくることが多い。
このような補助的メニューは、サイトの最上部に位置しているが、サイトの内容にとってはさほど重要では無い。にも関わらずHTMLの上部に存在していては、音声読み上げソフトで煩わしく、HTMLの編集時にも邪魔。そこでHTMLの最下部に書けるように「position: absolute」を使用して、絶対的な位置で配置する。
position : absoluteについての詳細は→TIPS「position : absoluteについて」position: absolute;で絶対配置する
このサイトでは「headersubmenu」というボックスを作り、position: absolute;で画面の右上に配置する。
親ボックスは特に指定しない。HTMLでは、全体を囲む#outlineボックスの最下部に記述する。
/* header sub menu */
#headersubmenu{
height: 16px;
width: 255px;
position: absolute; ←絶対位置指定（親は特に決めない）
margin-left: 550px; ←HTML上の親ボックス（outline）の左から550px
top: 98px; ←ウィンドウの上から98pxの位置にに絶対配置
filter: alpha(opacity=70); ←透明度の指定をした。透明度の詳細は→便利な小技「透明度の設定」
-moz-opacity: 0.70;
opacity: 0.70;
}
#headersubmenu #hsm0{ ←これはボタンではない左側の画像
background: url(../img/headersub_bg.jpg) no-repeat 0px 0px;
float: left; ←floatで並べる
height: 16px;
width: 80px;
}
#headersubmenu #hsm1 a { ←「about this site」ボタン
position: relative; ←これは「p」の親になるための指定。この詳細は→本文2段組み「メニューを作る」
float: left;
display: block;
height: 16px;
width: 95px;
font-size: 10px;
line-height: 10px;
}
#headersubmenu #hsm1 a p { ←「about this site」ボタンの平常時
position: absolute; ←これは「a」を親にした絶対位置指定。aのテキストにこれで画像をかぶせる
background: url(../img/headersub_bg.jpg) no-repeat -80px 0px;
height: 16px;
width: 95px;
top:0px;
left:0px;
}
#headersubmenu #hsm1 a:hover p { ←「about this site」ボタンのロールオーバー時
background: url(../img/headersub_bg.jpg) no-repeat -255px 0px;
}
#headersubmenu #hsm2 a { ←「site map」ボタン
position: relative;
float: left;
display: block;
height: 16px;
width: 80px;
font-size: 10px;
line-height: 10px;
}
#headersubmenu #hsm2 a p { ←「site map」ボタンの平常時
position: absolute;
background: url(../img/headersub_bg.jpg) no-repeat -175px 0px;
height: 16px;
width: 80px;
top:0px;
left:0px;
}
#headersubmenu #hsm2 a:hover p { ←「site map」ボタンのロールオーバー時
background: url(../img/headersub_bg.jpg) no-repeat -350px 0px;
}
<html>
<head>略</head>
<body>
<div id="header">略</div>
<div id="outlinebg">
<div id="outline">
<div id="main">
<h2 id="pankuzu">略</h2>
<div id="mainspace">
ここに本文が入る
<!-- END mainspace --></div>
<!-- END main --></div>
<div id="side">略</div>
<div id="footer"> ©xxxxxxxxxxxx ALL RIGHTS RESERVED. </div>
<div id="headersubmenu"> ←このように本文の最下部に置く事が出来る
<div id="hsm0"></div>
<div id="hsm1"><a href="../aboutsite/index.html">このサイトについて<p></p></a></div>
<div id="hsm2"><a href="../sitemap/index.html">サイトマップ<p></p></a></div>
「p」によって画像を「a」の真上に貼り付けてテキストを隠している ↑
この詳細は→本文2段組み「メニューを作る」
<!-- END headersubmenu --></div>
<!-- END outlinebg --></div>
<div id="hooterbg"></div>
</body>
</html>
また、各カテゴリーでテーマカラーを変えるなど、各カテゴリー特有のCSSは、カテゴリー別に専用のCSSを作って区別すると、編集時に便利。