[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ

幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。

サイトのキャプチャ

Fluid Width Equal Height Columns

[ad#ad-2]

下記は各ポイントを意訳したものです。

訳者注
各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。

Doug Neiner メソッド

「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。

デモのキャプチャ

デモページ

グラデーションの指定に%を使用しているため、幅が可変でも同じように広がり、また縮みます。

CSS

Nicolas Gallagher メソッド

「Nicolas Gallagher」メソッドは、CSS2の疑似要素(before, after)を使用した方法です。

デモのキャプチャ

デモページ

各カラムには疑似要素を使用して「height: 100%」を指定し、「z-index: -1;」でカラムのテキストコンテンツを可視状態します。

CSS

Using Tables

テーブルレイアウトをヒントにした方法です。

デモのキャプチャ

デモページ

まずは、table要素を実際に使用した例を見てみましょう。
table要素を使用する場合は各セルの幅指定を合計100%になるようにし、各セルの背景色を指定します。

CSS:table要素

上記のtable要素のようにdiv要素を使って実装することは可能です。
「display: table;」を使用して、下記のようにスタイルシートを記述します。

CSS:CSSで作ったtable

CSSで作ったtableがベストでしょうか? まぁ、確かにクールな方法かもしれません、しかし、この方法にはアドバンテージが全くありません。

[ad#ad-2]

One True Layout メソッド

「One True Layout」メソッドは、昔からある古典的な方法の一つです。しかし、現在でも機能する巧みな方法とも言えるでしょう。

デモのキャプチャ

デモページ

HTML

HTMLは前述のものと何ら変わりはありません。各カラムをdiv要素で実装し、それらをdiv要素で内包します。

CSS

大きな特徴は、フロートさせたカラムにmarginとpaddingのトリックを使用することです。
カラム自身に下のpaddignを設定できないので、そこに配置するコンテンツに対して下のpaddingを設定して使用します。、

Flexbox メソッド

「Flexbox」メソッドは、CSS3のボックスモデルを使用した方法です。この方法をサポートするブラウザは2010年10月現在、Webkit系ブラウザ(Chrome, Safari)のみです。

デモのキャプチャ

デモページ

HTML

マークアップはシンプルで、クリーンなものとなっています。

CSS

CSSはボックスモデルを使用するため、プロパティには各ベンダーのプレフィックスをつけています。
この方法の一番の特徴は「float」を使用していないことです。
ただし、ボックスモデルでは高さを揃えることができないため、ネガティブmarginとポジティブpaddingのトリックを併用します。

メモ

  • レイアウトの指定に%を使用することはWebkit系ブラウザ(Chrome, Safari)は完璧ではありません。
  • デモでは「:nth-child」を使用していますが、各カラムにclass名を与えることでブラウザの互換性はアップします。「:nth-child」はモダンブラウザのみがサポートしています。

sponsors

top of page

©2024 coliss