かなり完成に近づいたサンプル37。そこに足りないのは何だ？そうだ、もう勿体付けて話すのはよしましょう。背景ですよ、背景。左メニューと右メニューの背景設定がまだだった。んじゃ、普通にアプローチしてみる。
#nav領域と#sub領域の背後に敷き詰める画像を用意。
←左メニュー用背景画像
←右メニュー用背景画像
サンプルとして分かり易いように枠線を引いているけれど、実際に使うのは枠線無し。で、これらはCSS上でそれぞれの領域の背後に配置指定するよう追加して記述。
/*ここからページ中段3段組
________________________*/
#pagebody { margin-right: auto; margin-left: auto; width: 750px; }
#nav {background: url(left_back.gif) ; float: left ; width: 170px; }
#content {float: right; width: 580px; }
#main {float: left; width: 415px;}
#sub {background: url(right_top.gif) ; float: right; width: 165px;}
当然、色々やりました。あ〜だこ〜だ、参考サイトをよく読んで何度もテストしたりしました。でも上手くいったり行かなかったり。次第に気分が滅入ってきて、ある瞬間にふと
なんでCSSってこんなに各方面の顔色うかがいながら構築せなあかんの？
と思ってしまったのです（←やばい）。確かに「Mac版のIEだとコレはダメ」とか「Firefoxだとコレやったらあかん」とか、「Operaだと余白出ちゃうよ」とかスムーズに事が運ばないこと多し。もちろん僕はMac mini 上で動いている世界でシェア4.28％しかないMacOSX環境下のSafari限定でしか見ていないし、そういった全ての不具合に対処するといった神様のような大きな心も持ち合わせてはいないから無視しちゃっても構わないのだけれど、それでは本企画のタイトルにある「目指せ、完全CSSレイアウト」にそぐわぬ、独りよがりなものになってしまう（言ってるほど気にしてないが）。で、そういった不具合に対して各参考書は「裏技」と称して数多くの細かなTIPSを丁寧に紹介してくれているのだけれど、
そんなに裏技は必要ないですよ。
裏技っていうのは「別に知らなくてもいいけど、ここぞという場面で使うと効果覿面！」と個人的には解釈しているのだが、ここでの裏技というのは「これを使わんと、どうにもならんのですよ‥」というひどく後ろ向きかつ半強制的な意味合いを持っているのだ。これはスマートじゃないじゃんか。コンピューターの世界でこういう不具合は日常な事だし、CSSを定義する側と解釈するブラウザ側のどちらが悪いという話もしないけれど、今の混沌とした状況は全然気持ちよくない。
そんなわけで、これまでHTMLでアレコレ必死こいてアレンジしてきたことを、今度はCSS上で繰り返している状況になってしまったわけで。そんなわで、なんかこう、意欲が失われてしまったわけで‥。
