CSSでマルチカラムレイアウト（1/6）：CodeZine

2010/03/17 655 users CodeZine クロスブラウザ CSS XHTML+CSS

はじめに　本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。　今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」... 続きを読む

CSSによる段組（マルチカラム）レイアウト講座

2006/03/24 219 users ブラウ position float カラム マルチカラム

このサイトについて テーブルを使わず、CSS で段組レイアウトを実現する方法を、CSS2 の仕様を根拠に、ブラウザのバグ対策を交えながら解説します。 CSS で段組レイアウトをするには float か position を使うのが一般的です。 テーブルレイアウトとは異なり、HTML はそのままで、CSS を変更するだけで左右のカラム（段）を入れ替えられます。 基礎編では float の仕様とブラウ... 続きを読む

CSSによる段組（マルチカラム）レイアウト講座

2006/03/16 1583 users ブラウ position float カラム マルチカラム

このサイトについて テーブルを使わず、CSS で段組レイアウトを実現する方法を、CSS2 の仕様を根拠に、ブラウザのバグ対策を交えながら解説します。 CSS で段組レイアウトをするには float か position を使うのが一般的です。 テーブルレイアウトとは異なり、HTML はそのままで、CSS を変更するだけで左右のカラム（段）を入れ替えられます。 基礎編では float の仕様とブラウ... 続きを読む

CSSで作る段組レイアウトの例 - All About

2005/03/26 25 users CSS All About

スタイルシートで段組レイアウトにする それでは、前ページのHTMLにスタイルシートを適用して、以下の画像のようなレイアウトにしてみましょう。 実は単純な段組構成 もしかすると複雑なように見えるかも知れませんが、実際にはこの構成は非常に単純です。 段組は最大でも2段しかありません。 まず、「ブロックA」と「ブロックB」が横に並ぶ2段組が上部にありますね。 次に、段組を解除して「ブロックC」があります... 続きを読む