このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.11.17

CSS3 数行でカラムレイアウトを作成

今まで2行のカラムレイアウトや3行のカラムレイアウトを作成しようとするには、

floatプロパティやpositionプロパティを利用するのが一般的でしたが、

CSS3になり、数行で作成することが可能となってきました。

display:box;

カラム分けしたい要素を入れた親要素に「display:box;」の指定をおこないます。

お決まりながら、webkit系(safari,googlChrome等)ブラウザには「-webkit-」Gecko系(firefox等)のブラウザには「-moz-」の

プリフィックスを付与します。

html

<div class="box">
<div class="leftColumn">left column</div>
<div class="mainColumn">main column</div>
<div class="rightColumn">right column</div>
</div>

 css3

.box{
display: -moz-box;
display: -webkit-box;
}

そしてカラム分けしたい対象の要素に幅指定を行えば完成。

css3

.leftColumn{
width:140px;
min-height: 400px;
background:#600;
}
.mainColumn{
width:380px;
min-height:200px;
background:#444;
}
.rightColumn{
width:200px;
min-height:50px;
background:#309;
}

 

それぞれ高さ指定が異なっていたら、最大の高さにすべてあわせます。

(min-height指定ではなくheight指定するとそれぞれの高さとなります。)

min-heightをheightに変更。

このとき、特に指定がないとHTMLを記述した順に左から並ぶ形となります。 

box-ordinal-group

box-ordinal-groupを使うと、 HTMLの記述順に関係なく、配置する事も可能です。

-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;

例:CSS3

.leftColumn{
width:140px;
min-height: 400px;
background:#600;
-webkit-box-ordinal-group:3;
-moz-box-ordinal-group:3;
}
.mainColumn{
width:380px;
min-height:200px;
background:#444;
-webkit-box-ordinal-group:1;
-moz-box-ordinal-group:1;
}
.rightColumn{
width:200px;
min-height:50px;
background:#309;
-webkit-box-ordinal-group:2;
-moz-box-ordinal-group:2;
}

 

box-flex

box-flexを使う事によって、伸縮可能なカラムを実装することが出来ます。

-webkit-box-flex:1;
-moz-box-flex:1;

 

例:CSS3

.box{
width:100%;
display: -moz-box;
display: -webkit-box;
color:#fff;
}
.leftColumn{
width:240px;
min-height: 400px;
background:#600;
}
.mainColumn{
min-height:200px;
background:#444;
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
.rightColumn{
width:200px;
min-height:50px;
background:#309;
}

 

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。