メニュー部を作る

次はメニュー部です。
概要はテーブルレイアウトのサンプル５で紹介済みなので、簡単に済ませようかと思ったのですが、ここではもう少し詳しく説明します。
では、基本部分から作っていきましょう。
以下の内容でmenu.htmlを作り、virtual_stationnに保存して下さい。
ここからは、<body>のみの紹介としますので、今までのHTMLファイルをコピーし、<body>部分を書き換えて下さい。 <link>と<script>は<head>に記述して下さい。

<link rel="stylesheet" href="css/common.css" type="text/css">
<link rel="stylesheet" href="css/menu.css" type="text/css">


<img id="footer" src="images/footer_back.gif" alt="" />
<img id="base" src="images/base.gif" alt="" />
<div id="menu"><center>
<table id="waku">
<tr><td>
<table id="image"><center>
<tr><td id="cosmos"><img src="images/cosmos.gif"></td></tr>
<tr><td>
<table id="link">
<tr><td id="mn_1" class="on"><a href="#">トップ</a></td></tr>
<tr><td id="mn_2" class="off"><a href="#">各種情報</a></td></tr>
<tr><td id="mn_3" class="off"><a href="#">各種料金</a></td></tr>
<tr><td id="mn_4" class="off"><a href="#">洗車</a></td></tr>
<tr><td id="mn_5" class="off"><a href="#">車検</a></td></tr>
<tr><td id="mn_6" class="off"><a href="#">マメ知識</a></td></tr>
<tr><td id="mn_7" class="off"><a href="#">スタッフ紹介</a></td></tr>
<tr><td id="mn_8" class="off"><a href="#">採用情報</a></td></tr>
<tr><td id="mn_9" class="off"><a href="#"></a></td></tr>
<tr><td id="mn_10" class="off"><a href="#"></a></td></tr>
<tr><td id="mn_11" class="off"><a href="#"></a></td></tr>
<tr><td id="mn_12" class="off"><a href="#"></a></td></tr>
<tr><td id="mn_13" class="off"><a href="#"></a></td></tr>
<tr><td class="image"><img src="images/self.gif"></td></tr>
<tr><td class="image"><img src="images/24h.gif"></td></tr>
</table>
</td></tr></center>
</table>
</td></tr>
</table></center>
</div>

menu.html

<link>では、メニュー用のスタイルシート（menu.css）を読み込みます。
画像<img>が２つ並び、その後にテーブル<table>という流れになっています。
これは、後から記述した部分が上に重なって表示されることを利用するために、この順番にしています。
初めに土の画像を表示し、次に看板土台の画像を表示することで、土の上に看板土台が表示されます。その次に看板となるテーブルを表示することで、土台の上に看板が表示されることになります。（このままではどれも重ならない状態で表示されるので、実際にはスタイルシートでそれぞれの位置を調整して表示します）
<div>要素からが看板部分です。
<table>が３重になっていることを確認してください。
テーブルの枠線を利用し、看板を少し立体的にしてみます。

<td>のIDですが、mn1からmn13まで連番を振ってあります。
classもonとoffがありますが、これはメニューを選んだときの動作に必要なので、後ほど説明します。

次に、以下の内容でmenu.cssを作り、cssフォルダに保存して下さい。

body {
　background-image: url(../images/site_back.gif);
　background-repeat: repeat-x;
}
#footer{
　width:150px;
　height: 50px;
　position: absolute;
　bottom: 0px;
}
#base{
　width:150px;
　position: absolute;
　bottom: 15px;
}
#menu {
　width: 150px;
　position: absolute;
　bottom: 40px;
}
table {
　border-collapse: separate;
　border-spacing: 1px;
　empty-cells: show;
}
#cosmos {
　height: 120px;
　border: 2px outset #FFFFFF;
}
#cosmos img {
　width: 110px;
}
#waku {
　background-color: #0000FF;
}
#image {
　border: 3px outset #FFFFFF;
}
#image td {
　text-align: center;
　vertical-align: middle;
}
#link {
　width: 120px;
　border: 1px solid #000000;
}
#link td {
　width: 120px;
　height: 25px;
　font-family: Arial, Helvetica, sans-serif;
　font-size: 14px;
　border: 1px outset #CCCCCC;
}
#link td a {
　text-decoration: none;
　color: #000000;
}
#link td.on {
　color: #000000;
　background-color: #FFFFFF;
}
#link td.off a {
　color: #FFFFFF;
}
#link td.off a:hover {
　color: #FF0000;
}
#link .image {
　background-color: #FFFFFF;
}

menu.css

bodyは、ヘッダー部と同様に背景を指定し、X方向に繰り返します。
#footerは、幅150ピクセル、高さ50ピクセルとし、絶対位置で下端に移動します。
#baseは、#footer同様に幅150ピクセルですが、位置は下端から15ピクセル浮かせます。
#menuも幅150ピクセルですが、位置はさらに浮かせて、下端から４０ピクセルを指定します。
tableは、表やセルの枠線を分離し、セル間隔を1ピクセルとし、空のセルの枠線を表示します。
#cosmosは、高さを120ピクセルとし、枠線は白を基調とした立体的に盛り上がった2ピクセルの枠線とします。
#cosmos内のimg要素の幅を110ピクセルとします。
#wakuの背景色を青色とします。
#imageの枠線は白を基調とした立体的に盛り上がった3ピクセルの枠線とします。
#image内のtd要素は横方向も縦方向も中央寄せにします。
#linkは、幅を120ピクセルとし、枠線は1ピクセルの実線とします。
#link内のtd要素は幅を120ピクセルとし、高さを25ピクセルとし、枠線は灰色を基調とした立体的に盛り上がった1ピクセルの枠線とします。文字は14ピクセルのゴシック系のフォントを指定します。
#link内のtd要素のリンクは、そのままだと下線が表示されますので、文字装飾をなくし、文字の色を黒とします。
#link内のtd要素のクラスがonの部分に対して、背景色を白とし、文字を黒とします。
#link内のtd要素のクラスがoffのリンク部分に対して、文字を白としますが、次のa:hoverにより、マウスポインタが重なったら、その文字を赤色にします。
#link内のクラスがimage部分に対して、背景色を白とします。

さて、ここでさきほど述べた「メニューを選んだときの動作」について説明します。
初めは、class="on"となっている「トップ」の部分が白地に黒の表示ですが、メニュー部の「スタッフ紹介」を選択したら、メイン部にスタッフの紹介ページが表示されるのは言うまでもなく、「スタッフ紹介」が白地に黒の表示になり、「トップ」が他のセルのように青地に白の表示になるようにします。
そのためにはJavaScriptを使います。JavaScriptは全部説明すると、何冊か本が書けてしまうので、ここで必要なものだけ説明します。雰囲気だけ掴んで下さい。

メニューを選択したらメイン部のページを切り替えるやり方から説明します。
メニューの<a>タグ内のhref属性に目的のHTMLファイルを指定するのですが、単純に指定しただけでは、メニュー部のページが切り替わってしまうため、<a>タグ内にさらにtarget属性を追加します。target属性を追加することで、ページを切り替えるフレームを指定できます。
menu.htmlの<a>タグを以下のように書き換えます。（例はトップです）

<a href="top.html" target="main">

すべての<a>タグを書き換えて下さい。
リンク先はこれから作っていくので、"#"のままでも、すべて"top.html"でも構いません。作った時にそのファイル名を指定して下さい。先にファイル名を指定しておいても結構ですが、作る際は必ずそのファイル名で保存して下さい。（ここでは先に指定しています）

次に、JavaScriptでクラスのonとoffを切り替える仕組みを作ります。
以下のJavaScriptをテキストエディタで入力して下さい。
cssフォルダと同じ場所に、jsフォルダを作り、その中にmenu.jsというファイル名で保存して下さい。
function ChangeClass(i){
　for ( k=1 ; k<=13 ; k++ ){
　　if ( k == i ){
　　　document.getElementById('mn_' + k).setAttribute('class','on');
　　　document.getElementById('mn_' + k).setAttribute('className','on');
　　}
　　else{
　　　document.getElementById('mn_' + k).setAttribute('class','off');
　　　document.getElementById('mn_' + k).setAttribute('className','off');
　　}
　}
}

menu.js

この12行でChangeClassという関数ができます。
この関数が呼ばれたとき、iという変数にクラスを切り替えるIDを表す数字が入っている前提で作ります。
次のforは繰り返しの命令で、kという変数を1から13になるまで1つ増やしながら繰り返します。
次のifですが、この場合「k という変数の内容と i という変数の内容が同じならば・・・」という意味になります。同じならば次の{}内を実行します。
document.getElementByIdでIDを特定するのですが、どのIDを特定するのかというのが()内です。k が1の時は、'mn_'+k は 'mn_1'となり、メニューの<td>要素で指定したIDを示すことができます。
IDを特定したら、setAttributeでクラスを切り替えます。
基本的には、setAttribute('class','on') でクラスをonにできるのですが、あのIEだけは切り替わってくれませんので、IE用に setAttribute('className','on')も用意しています。
else は if文の条件が成り立たなかった場合に実行します。
このJavaScriptの動作を簡単に説明すると、「iに対応するメニュー項目のクラスをonにし、他はすべてoffにする」という感じです。

では、メニューをクリックした時に、このJavaScriptの関数を呼び出す方法を説明します。
HTMLファイルの<head>内に以下の1行を追加して下さい。

<script type="tcriext/javaspt" src="js/menu.js"></script>

これでJavaScriptファイルを組み込みます。
さらに、またmenu.htmlの<a>タグに追加することがあります。
<a>タグをクリックしたら、組み込んだmenu.jsのChangeClassという関数を呼び出すために、以下のように書き換えます。（こちらも例はトップです）

<a href="top.html" target="main" onClick="ChangeClass(1)">

onClickで「クリックしたら」となります。
トップのIDは mn_1 なので、ChangeClassに1を入れることでJavaScriptの関数に1を渡すことができ、その結果、関数内でmn_1を特定することができる訳です。
もちろんこれもすべての<a>タグに追加し、数字は1から13まで変更して下さい。

今までと比べてスタイルシートが長いですが、内容はそれほど難しくないと思います。
JavaScriptも初心者には丁度良いレベルかと思います。
今回作ったファイルはこちらで確認できます　ー＞　menu.html
地面に価格看板が立っているように見えますでしょうか？
メニューを選択したら切り替わることを確認して下さい。


ホームページを作る
メニューへ

2009/04/17