スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
スタイルシートでのコラム組みレイアウト手法は、ブログの流行とともに最近になってやっと各所で見られるようになりました。テーブルレイアウトからの脱却のために、自分はかなり前からいろいろやってきて、自分なりに各所で使えるようひな形スタイルシートを持っていますが、現在まで業務で制作のたびに修正し、なかなか完全なるひな形にはならずにここまできてしまいました。まだまだ最適化は可能と思われます。現在までに構築したモノも機会があれば常になるべく安定したレイアウトに修正するという毎日を過ごしています。
基本仕様として「幅非固定メインブロックと幅ピクセル固定のメニューブロック」「メインブロックが必ず先頭に記述」するように考えました。メニューのコラムが先でいい場合は異なる仕様が考えられるでしょう。
コレってリキッドスタイルといえるのかどうか知りませんが、「メニューブロック幅はピクセル固定」にしました。そのほうがなにかと便利。メニューブロックの幅と関連する値をパーセントにすることで「完全リキッドスタイル」にできるのだけど、ウインドウズIE のレイアウト崩れとかなり格闘することになります。（それでなくてもリキッドスタイルだと格闘するので）
応用して、3コラム組み。考え方は「2コラムの片側に 2コラム組みイレコ」。パターンとして「左がイレコか右がイレコか」でふたつある。
これやるときに、カスケードスタイルシートの仕様で把握するべきこと、各種ブラウザ互換のためにしっているべきことは、
これらがきちんと理解できれば、
あれ、これだけか（笑）
まぁ、以上は「スタイルシートのフロート制御を使ったコラム組み基本」であって、まだまだこの中でマージン指定やらパディング指定やらをキッチリ固める必要があります。そのへんはやっぱりいろいろやってみてこそ分かると思うので、どんどん実験して自分なりのスタイルシートレイアウト手法を作り上げましょう。
更新 2007-02-13 09:07 初回投稿 2004年11月23日 17:13
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto