右メニューの作り方

　ＢＬＯＣＫＢＬＯＧのメルマガで、
サンプルＣＳＳには、左メニューばかりで、
右メニューがないといようなことが書いてあったが、

ＢＬＯＣＫＢＬＯＧの文書構造であれば、
基本的に左メニューのＣＳＳがあれば、
右メニューは簡単に出来るはずなんですが。^^)
ただし、背景画像が左メニュー用のデザインだと無理ですが。^^);;

ところで、ＢＬＯＣＫＢＬＯＧさんのメルマガ。
これって参考になることも書いてあるので、
なんでブログにも乗せないんですかね？
不思議だ？？なにか駄目な理由でもあるのでしょうか？

ということで、
簡単な方法は２通りあって、

●方法１：右メニュー用のＨＴＭＬを生成すればよい。

これは、ＢＬＯＣＫＢＬＯＧさんが実際に行っている方法だけど、

単純に左メニュー用だと、ＨＴＭＬ内には、
DIV id=menu領域の次にDIV id=content領域が出現しているので、
これを、
DIV id=content領域の次にDIV id=menu領域を出現するようにすればよい。

これはＢＬＯＣＫＢＬＯＧさんの方で、ページ設定で右メニュー設定指定であれば
このようにＨＴＭＬを作成するだけ。
もちろん、ＣＳＳは変らないでいいはずです。

●方法２：左メニュー設定のままで、ＣＳＳだけ変更して右メニューにするには

この方法は、普通はJavaScriptでＣＳＳを制御するときに使う方法
なんだけど、それで出来たので、紹介します。

で、まずは、考え方なんだけど、
DIV id=menu領域とDIV id=content領域を、単純に左右入替えてやればいい。

ＣＳＳでは、この入替えを行うには、以下の方法で行うようです。
どちらのＤＩＶ領域にも、position属性で相対位置「relative」を指定し、
この場合は、左右を入れ替えるので、
left属性で、
両方の領域が現在の最左位置よりどれだけずれるかを指定する。

例えば、見返り美人だと、

menu領域の最左位置は、
content領域の横幅が
520px(= PADDING-RIGHT:10px + PADDING-LEFT:10px + WIDTH:500px)なので、
最左位置を右に520pxずらす。

content領域の最左位置は
menu領域の横幅が
300px(= PADDING-RIGHT:50px + PADDING-LEFT:50px + WIDTH:200px)なので、
最左位置を左に300pxずらせばよい。

すなわち、ＣＳＳの

menu領域は、

#menu {
　　　　PADDING-RIGHT: 50px; PADDING-LEFT: 50px; FLOAT: left;
　　　　PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 200px;
　　　　PADDING-TOP: 5px
}
　の先頭にposition:relative; left:520px;を追加するだけ。
　　　　↓
#menu {
　　　　position:relative; left:520px;
　　　　PADDING-RIGHT: 50px; PADDING-LEFT: 50px; FLOAT: left;
　　　　PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 200px;
　　　　PADDING-TOP: 5px
}

content領域は、

#content {
　　　　BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 10px;
　　　　BORDER-TOP: #000000 0px solid; PADDING-LEFT: 10px;
　　　　FLOAT: left; PADDING-BOTTOM: 10px;
　　　　BORDER-LEFT: #000000 0px solid; WIDTH: 500px;
　　　　PADDING-TOP: 10px; BORDER-BOTTOM: #000000 0px solid
}
　の先頭にposition:relative; left:-300px;を追加するだけ。
　　　　↓

#content {
　　　　position:relative; left:-300px;
　　　　BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 10px;
　　　　BORDER-TOP: #000000 0px solid; PADDING-LEFT: 10px;
　　　　FLOAT: left; PADDING-BOTTOM: 10px;
　　　　BORDER-LEFT: #000000 0px solid; WIDTH: 500px;
　　　　PADDING-TOP: 10px; BORDER-BOTTOM: #000000 0px solid
}

この方法は、とても簡単でいいかも。
でも、いろいろなＣＳＳで試してないし、
ＯＳ／ブラウザも、WindowsXP sp1 / IE6.0 SP1、Mozilla1.6 , Opera7.23
しか見てないので、その他の環境ではどうなるかは分かりませんが。^^);;

●追記：
　肝心なこと知りませんでした。
　基本的に方法１は、float属性で配置しているんですよね。
　なので、通常右メニューにするには、

#menu {　内で
　　　　float:left　　　→　　float:right;

#contet {内で
　　　　float:right;　　→　　float:left;

に変えればいいが、BLOCKBLOGさんで使っている画像が、
メニュー領域まで指定している大きさなので、
単純に上記のようには変えられないので、
この方法は、単純にはいかないみたいですね。