MobavleTypeの2カラム構造

（マイブーム）ついにブルーベリー味が出た龍角散のど飴。

左から右、上から下が基本である。

という言葉をどこかで聴いたことがある。右から左に書かれているWEBページはそうないと思うし、プログラムは必ずといっていいほど上から下に流れるのが基本でもある。このページでも、左にメニューがあって、右にメインコンテンツという構造をとっている。3カラムのページは情報量が多すぎて、一回見ただけではよくわかりにくい部分があるからだ。このページのような日記を書くだけのサイトなら、これで十分だと判断した。このページは以下のような構造になっていた。（ソースを見ればわかると思うけど）

＜ヘッダ部分＞
＜左メニュー部分＞
＜右コンテンツ部分＞
＜フッタ部分＞

これではメニューの下に右コンテンツがでてくるため、左メニューにはfloat:left、右コンテンツにはfloat:rightをCSSで指定して、横に並ぶようになっている。しかし、この構造だととても困る部分があることが判明した。このページをGoogleで検索し、サマリーを見てみると、意味のわからない文章が表示されてしまうのだ。

これは、「左メニュー」の下に「右コンテンツ」があるのが問題だった。
左メニューには「カレンダー」「天気予報」といった情報を載せており、それらがサマリーとして表示されてしまうっぽい。これだとこのページがどんなページなのかがわかりにくく、サマリーを見てクリックしようとは思わない。（僕だってそうだもの）
それに、メインとなるコンテンツより上に、メニューが書かれている構造もどうなのだろう。僕がこのWEBサイトで伝えたいことは、メニューなんかではなくメインの部分である。（天気は友人の希望）
しかし、HTML構造を本にたとえて考えると、本の最初には目次がある。だからメニューが先にあるというほうが自然だともいえる。それに、僕がGoogleならば、「メニューに天気載せるな」っていうだろう。

いろいろ考えてみたが、「メインはコンテンツ」であるのだから、メイン部分をHTML文書構造の上に持っていくことにした。SEO対策を考えても、上のほうにあるほうがいいかもしれない。下は現在のこのページの構造である。

＜ヘッダ部分＞
＜右コンテンツ部分＞
＜左メニュー部分＞
＜フッタ部分＞

このままだと、メニューが右にでてしまうので、右コンテンツをfloat:left、左メニューをfloat:rightとした。あと、カレンダーは月別表示があるのでなくし、天気は自分ポータルサイトに移動することにした。

HTMLからXHTMLになると、文書構造に頭を悩ませることが多い。XMLでHTMLデータを再利用可能な便利なものにするのは結構大変ですな。