CSSレイアウト[本文2段組のレイアウト-5]メニューを作る
左の#sideのボックスの中にメニューボタンを配置していく。
リンクボタンを作るには、画像をHTMLに直接貼る方法もあるが、ここではCSSを使って画像を配置し、ロールオーバーで画像を変化させる方法をまとめる。
hx要素を使う
それぞれのメニューボタンはh2で作る。h1〜h6の要素は階層を示し、階層が高いほど検索エンジンに検索される重要語句となる。サイト名（ヘッダーのサイトタイトル）にはh1を使う。
このページは、親メニューに子メニューをつけている。子メニューはリストで作る。リストが入れ子になるのは推奨されないらしいので、親メニューはh2にした。SEO対策上もメインメニューがh2の方がいいとか。
ただし、HTML上でh1〜h6は、その数字の順番通りに登場するのが望ましいのだそうだ。h1の直後にh5があるのではなく、順にh2、h3、と続くように作るほうがSEO対策上よいらしい。メインメニューの指定
以下、6つのメインメニュー（右図 navi1〜navi6）の指定について説明する。（他のメニューボタンTop Page、Columnなどは省略。この項を参考に。）
まず「side」ボックス内に、15pxずつマージンを取ってメニューボタンを置きたいので「sidespace」というボックスを新設しmargin: 15px;を指定。幅は140pxにする。
CSSは下記の通り。メニューがらみのCSSはbase.cssとは別にまとめておいたほうが編集しやすいので、「menuset.css」として別ファイルにしている。
/* sidespace menu navi */
#sidespace {
margin: 15px; ←#sideの中にマージン15でボックスを作る
width: 140px; ←左右140px
}
HTMLでメニューを組む
まずは、HTMLで下記のようにメニューを組んでしまう。メニューボタンには、「navi1」から「navi6」までのidを付けておく。
<div id="sidespace">
↓ボタン用のCSSのIDをnavi1〜6まで順に指定する
<h2 id="navi1"><a href="../2column/index.html">CSSレイアウト 本文2段組について</a></h2>
<h2 id="navi2"><a href="../3column/index.html">CSSレイアウト 本文3段組について</a></h2>
<h2 id="navi3"><a href="../tips/index.html">CSSレイアウト TIPS</a></h2>
<h2 id="navi4"><a href="../fontstyle/index.html">CSSレイアウト FONT指定見本</a></h2>
<h2 id="navi5"><a href="../border/index.html">CSSレイアウト ボーダー指定見本</a></h2>
<h2 id="navi6"><a href="../kowaza/index.html">CSSレイアウト 便利な小技(こわざ)</a></h2>
</div><!-- END sidespace -->
</div><!-- END side -->
メニューボタンは1つの画像にまとめる
メインメニューには6つのボタンがあるが、これは大きな1つのgif画像「navi.gif」で作っている。
CSSでメニューボタンを作ると、このように12画像をひとまとめにできるメリットがある。
右図のように、「navi.gif」は140×45ピクセルのボタンを縦に6つ並べて、その右側に、ロールオーバー時の状態を作っている。幅280(140×2)、高さが270(45×6)ピクセルの画像になる。
位置の指定には、
1番上のボタンnavi1は、平常時は位置を「0px 0px」にし、ロールオーバー時に「-140px 0px（X軸を左に140ピクセル移動）」と指定すれば、右側の画像が表示され画像が変化して見える。
2番目のボタンnavi2には平常時「0px -45px」と指定。ロールオーバー時には「-140px -45px」で右側の画像が表示されるようにする。
「text-indent : -9999」は、検索エンジンスパム？
ここまでできたら、→ h2 要素に「text-indent : -9999」を指定して、テキストはあるが見えないようにし、
→ h2 a に平常時の画像の位置指定。
→ h2 a:hover にロールオーバー時の位置指定。
これでメニューボタンは完成する。
例えば#navi1の指定なら下記のようなCSSにする。
#sidespace h2 a { ←6つのメインメニューボタンh2の平常時の状態をここでまとめて指定しておく
display: block; ←リンクはブロックでさせる
width: 140px;
height: 45px;
text-indent: -9999; ←テキストを表示させない
}
/* rollout */
#sidespace h2#navi1 a { ←#navi1の平常時
background: url(../img/navi.gif) no-repeat 0px 0px;
}
#sidespace h2#navi1 a:hover { ←#navi1のロールオーバー時
background: url(../img/navi.gif) no-repeat -140px 0px; ←140px右の位置を見せる
}
テキストを入れておくのは、CSSを無効にして閲覧した場合にナビゲーションが無くなってしまうのを避けるため。また、h2要素にしてSEOを上げるため。 普段は画像でボタンを見せる邪魔になるので、テキストは「text-indent : -9999」にして画面から見えないようにしておく。
だが、この「text-indent : -9999」が検索エンジンスパムの隠しテキストに該当するらしい。
確かかどうかはわからないのだが。
「position : absolute」でスパム行為疑惑から脱出
そこで「text-indent : -9999」に変わる方法を探した。それには「position : absolute」を使う。
h2でテキストを設置し、h2要素内のpで表示する画像を「position : absolute」でh2のテキストの真上にかぶせる。
以下はこの方法でメニューボタンを作っていく。
HTMLをこのように書き直す
HTMLで、h2 a の中に<p></p>を入れる。<div id="sidespace">
<h2 id="navi1"><a href="../2column/index.html">CSSレイアウト 本文2段組について<p></p></a></h2>
<h2 id="navi2"><a href="../3column/index.html">CSSレイアウト 本文3段組について<p></p></a></h2>
<h2 id="navi3"><a href="../tips/index.html">CSSレイアウト TIPS<p></p></a></h2>
<h2 id="navi4"><a href="../fontstyle/index.html">CSSレイアウト FONT指定見本<p></p></a></h2>
<h2 id="navi5"><a href="../border/index.html">CSSレイアウト ボーダー指定見本<p></p></a></h2>
<h2 id="navi6"><a href="../kowaza/index.html">CSSレイアウト 便利な小技(こわざ)<p></p></a></h2>
</div><!-- END sidespace -->
</div><!-- END side -->
メインメニューの各ボタンのCSS
p要素を「h2 a」要素の真上にピッタリかぶせなければならないので、「h2 a」を親にした「p」の絶対位置指定をする。
この指定で、IE6ではカーソルがデフォルトになってしまい、リンクであることがわかりにくいので、
#sidespace h2 a p セレクタに「cursor: pointer;」の指定を入れること。pointer はリンク時（指さす手）のカーソル。
width: 140px;
height: 45px;
font-size: 12px; ←文字がはみ出さないようにピクセル指定する
line-height: 12px;
}
#sidespace h2 a { ←#sidespace内のすべてのh2内の「a」に対する指定
display: block;
width: 140px;
height: 45px;
position: relative; ←position: relativeにして親に指定
}
#sidespace h2 a p { ←#sidespace内のすべてのh2内のa内の「p」に対する指定
position: absolute; ←親（a）に対して絶対位置指定
left: 0px; ←親（a）に対して左から0
top: 0px; ←親（a）に対して上から0
width: 140px;
height:45px;
cursor: pointer; ←カーソルを「pointer」にする指定（pointer = 指さす手の状態）
}
/* rollout */ ↓「a p」で通常時の画像指定
#sidespace h2#navi1 a p {
background: url(../img/navi.gif) no-repeat 0px 0px;
}
#sidespace h2#navi2 a p {
background: url(../img/navi.gif) no-repeat 0px -45px;
}
#sidespace h2#navi3 a p {
background: url(../img/navi.gif) no-repeat 0px -90px;
}
#sidespace h2#navi4 a p {
background: url(../img/navi.gif) no-repeat 0px -135px;
}
#sidespace h2#navi5 a p {
background: url(../img/navi.gif) no-repeat 0px -180px;
}
#sidespace h2#navi6 a p {
background: url(../img/navi.gif) no-repeat 0px -225px;
}
/* rollover */ ↓「a:hover p」でロールオーバー時の画像指定
#sidespace h2#navi1 a:hover p {
background: url(../img/navi.gif) no-repeat -140px 0px;
}
#sidespace h2#navi2 a:hover p {
background: url(../img/navi.gif) no-repeat -140px -45px;
}
#sidespace h2#navi3 a:hover p {
background: url(../img/navi.gif) no-repeat -140px -90px;
}
#sidespace h2#navi4 a:hover p {
background: url(../img/navi.gif) no-repeat -140px -135px;
}
#sidespace h2#navi5 a:hover p {
background: url(../img/navi.gif) no-repeat -140px -180px;
}
#sidespace h2#navi6 a:hover p {
background: url(../img/navi.gif) no-repeat -140px -225px;
}