レイアウト用のテーブルを全て撤去しました。スキン完成です。
ほんの1ピクセルでもずれるとレイアウトが崩れる恐ろしいCSSです(普通そういうものなんでしょうか?)。
基本設計は上部のヘッダーと下部コンテンツ内の左menu、右main。menu、mainにfloatをそれぞれleft、rightで与えています。気になる方は右クリックからソース表示で確認してみてください。
思ったより時間かかった…やっぱりブラウザの壁。どうしても回避しようとするとdivタグの量が増えてしまう。Mozilla系ブラウザだとfloatさせないとブロックの高さ、幅がなくなってしまうので背景が表示されないとか。IEだとpadding内に背景を固定して指定すると背景画像が出たり出なかったりするとか。あれこれ…
Windows環境のIE6、Firefox、Netscapeなら問題なく表示できるはずです。MacのSafariもいけるはずです(推測)。しかしながらMacのIEは自信ないです。ブラウザバグが多いらしいので…。
今回スキン編集するにあたって、Firefoxがすさまじい威力を発揮しました。Firefoxの拡張機能、株式会社インフォアクシアが提供する日本語版 Web Developerは右クリックからCSS編集画面を呼び出しリアルタイムでCSSが編集できるという優れものです。画面を見ながらCSSを編集しその値を本体のCSSにコピペする、の繰り返しで今回のスキン編集が楽(?)にすみました。感謝です。
何はともあれ、編集中に思ったことは"IEは過去のブラウザだな"ということでしょうか。バグだらけで何年もバージョンアップしていないIE。最近よくパソコン雑誌でFirefoxが取り上げられています。このままいくとブラウザシェアが８０%を割るなんてこともありうるんじゃないでしょうか?がんばってくださいマイクロソフトさん。
