さて、前回の結果

タグの勉強をしたおかげで、今回は余裕で調整できる　…はず

【基準点と必要な移動距離を割り出す】

　メニューカラムの幅が　170px

　ヘッダ画像の幅が　800px

　800px　－　170px　＝　630px

【移動距離を入力する】

---------------------------------------------------------

#menu01 {
position:absolute;
display: block;
top:0px;
left:0px;
width:160px; /*-- メニューバーの幅 --*/
height:50px; /*-- メニューバーの高さ --*/
background:url(メニューバー1の画像URL) no-repeat;
text-indent:-9999px;
}
#menu01:hover {
background:url(メニューバー1のロールオーバー画像URL) no-repeat;
}

---------------------------------------------------------

　赤字で記した部分が移動距離を指定している部分。

　前々回、調べたように、

　left　は　左から○○px移動の意味。

　ここに　630px　と入力すると、　（基準点）左から630px　右に　移動してしまう。

　なので正解は　-630px

　すると無事　メニュー１　が移動した。

　続けて、　メニュー２　の移動

　同じように　メニュー２　の

　left:160px;

　も変更する。

　-630px移動したところが一番左に寄るんだから、その隣りの数値

　-630px　＋　160px（１つのバーの幅）　＝　-470px

　となる。

　残りのメニューも、この作業の繰り返し。

んで、

できあがり

　いやぁ、長かった

　そもそもヘッダ画像や全体のイメージさえできていないのに、いきなりメニューバーの設置に取り掛かったのが失敗だった

　でも大丈夫。コーチ長畑さんのブログに言い言葉が載ってた。

　「　つまずいた石は踏み台にもなる　」

　そう、おかげさまで初めてスタイルシートに触れることができた。　すごい時間もかかって、スタッフにも迷惑かけたけど、なんとかなんとか。

　これでやっとブログの本題に入っていけそう

　先ほども坊主社長さん（アメブロをすすめていただいた社長）に、

　「これがお前のやりたいことなん？」っと

　いやっ、違うんです。　ホントはお店のこととか、料理写真についてとか…

　他にもやらなきゃいけない仕事もあるし…

　でも、結果時間をつくって朝までパソコンたたいてるんだから、

　「やりたいこと」なのかなぁ

メニューバー（ヘッダーメニュー）の位置を調整する（後編）