[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
Post on:2010年10月20日
sponsors
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。
Fluid Width Equal Height Columns
[ad#ad-2]
下記は各ポイントを意訳したものです。
- 訳者注
- 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。
Doug Neiner メソッド
「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。
グラデーションの指定に%を使用しているため、幅が可変でも同じように広がり、また縮みます。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
[css] .five-columns { background-image: -moz-linear-gradient( left, #eee, #eee 20%, #ccc 20%, #ccc 40%, #eee 40%, #eee 60%, #ccc 60%, #ccc 80%, #eee 80%, #eee 100% ); background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #eee), color-stop(20%, #eee), color-stop(20%, #ccc), color-stop(40%, #ccc), color-stop(40%, #eee), color-stop(60%, #eee), color-stop(60%, #ccc), color-stop(80%, #ccc), color-stop(80%, #eee), color-stop(100%, #eee) ); } [/css] |
Nicolas Gallagher メソッド
「Nicolas Gallagher」メソッドは、CSS2の疑似要素（before, after）を使用した方法です。
各カラムには疑似要素を使用して「height: 100%」を指定し、「z-index: -1;」でカラムのテキストコンテンツを可視状態します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
[css] .pseudo-three-col { position: relative; background: #eee; z-index: 1; width: 100%; } .pseudo-three-col .col { position: relative; width: 27%; padding: 3%; float: left; } .pseudo-three-col .col:nth-child(1) { left: 33%; } .pseudo-three-col .col:nth-child(2) { left: -33.3%; } .pseudo-three-col .col:nth-child(3) { left: 0; } .pseudo-three-col:before, .pseudo-three-col:after { content: " "; position: absolute; z-index: -1; top: 0; left: 33.4%; width: 33.4%; height: 100%; background: #ccc; } .pseudo-three-col:after { left: 66.667%; background: #eee; } [/css] |
Using Tables
テーブルレイアウトをヒントにした方法です。
まずは、table要素を実際に使用した例を見てみましょう。
table要素を使用する場合は各セルの幅指定を合計100%になるようにし、各セルの背景色を指定します。
CSS：table要素
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[css] #actual-table { border-collapse: collapse; } #actual-table td { width: 20%; padding: 10px; vertical-align: top; } #actual-table td:nth-child(even) { background: #ccc; } #actual-table td:nth-child(odd) { background: #eee; } [/css] |
上記のtable要素のようにdiv要素を使って実装することは可能です。
「display: table;」を使用して、下記のようにスタイルシートを記述します。
CSS：CSSで作ったtable
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
[css] #css-table { display: table; } #css-table .col { display: table-cell; width: 25%; padding: 10px; } #css-table .col:nth-child(even) { background: #ccc; } #css-table .col:nth-child(odd) { background: #eee; } [/css] |
CSSで作ったtableがベストでしょうか？ まぁ、確かにクールな方法かもしれません、しかし、この方法にはアドバンテージが全くありません。
[ad#ad-2]
One True Layout メソッド
「One True Layout」メソッドは、昔からある古典的な方法の一つです。しかし、現在でも機能する巧みな方法とも言えるでしょう。
HTML
HTMLは前述のものと何ら変わりはありません。各カラムをdiv要素で実装し、それらをdiv要素で内包します。
|
1 2 3 4 5 6 7 |
[html] <div id="one-true" class="group"> <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> </div> [/html] |
CSS
大きな特徴は、フロートさせたカラムにmarginとpaddingのトリックを使用することです。
カラム自身に下のpaddignを設定できないので、そこに配置するコンテンツに対して下のpaddingを設定して使用します。、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[css] #one-true { overflow: hidden; } #one-true .col { width: 27%; padding: 30px 3.15% 0; float: left; margin-bottom: -99999px; padding-bottom: 99999px; } #one-true .col:nth-child(1) { margin-left: 33.3%; background: #ccc; } #one-true .col:nth-child(2) { margin-left: -66.3%; background: #eee; } #one-true .col:nth-child(3) { left: 0; background: #eee; } #one-true p { margin-bottom: 30px; } /* Bottom padding on col is busy */ [/css] |
Flexbox メソッド
「Flexbox」メソッドは、CSS3のボックスモデルを使用した方法です。この方法をサポートするブラウザは2010年10月現在、Webkit系ブラウザ（Chrome, Safari）のみです。
HTML
マークアップはシンプルで、クリーンなものとなっています。
|
1 2 3 4 5 6 7 |
[html] <div id="flexbox"> <div class="col"><h3>I am listed first in source order.</h3><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div> </div> [/html] |
CSS
CSSはボックスモデルを使用するため、プロパティには各ベンダーのプレフィックスをつけています。
この方法の一番の特徴は「float」を使用していないことです。
ただし、ボックスモデルでは高さを揃えることができないため、ネガティブmarginとポジティブpaddingのトリックを併用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
[css] #flexbox { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: start; -webkit-box-align: start; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: start; -moz-box-align: start; display: box; box-orient: horizontal; box-pack: start; box-align: start; overflow: hidden; } #flexbox .col { width: 27.333%; padding: 30px 3% 0; margin-bottom: -99999px; padding-bottom: 99999px; } #flexbox .col p { margin-bottom: 30px; } #flexbox .col:nth-child(1) { -moz-box-ordinal-group: 2; -webkit-box-ordinal-group: 2; box-ordinal-group: 2; background: #ccc; } #flexbox .col:nth-child(2) { -moz-box-ordinal-group: 1; -webkit-box-ordinal-group: 1; box-ordinal-group: 1; background: #eee; } #flexbox .col:nth-child(3) { -moz-box-ordinal-group: 3; -webkit-box-ordinal-group: 3; box-ordinal-group: 3; background: #eee; } [/css] |
メモ
- レイアウトの指定に%を使用することはWebkit系ブラウザ（Chrome, Safari）は完璧ではありません。
- デモでは「:nth-child」を使用していますが、各カラムにclass名を与えることでブラウザの互換性はアップします。「:nth-child」はモダンブラウザのみがサポートしています。
sponsors
