CSS3 で新しいボックスレイアウト

先日、WCAN mini Markup Vol.10がありました。第10回を数える今回は「CSS3+jQueryを実際に使ってみよう!」というテーマで、WCAN x CSS Nite 2009 SPRINGでの益子さんのセッションを実践し紹介し合おうというものです。

僕が紹介したのは、CSS3のレイアウトに関する新しいプロパティ[1]。新しいプロパティを使うとこれからすごくレイアウト組が楽になるよね!ってことがいいたかったので、説明は他所に任せてサンプルを見ていただいくことでイメージしてもらう形にしています。

なお、今回のサンプルは一部のブラウザのみしか動作しません。オススメはSafariかGoogle Chromeです[2]

可変レイアウト: 横幅指定に % 、ボーダー幅に px を指定したボックスの場合

サンプルのように、2つのボックスを左右に並べて可変のレイアウトを組みたいときを考えます[3]。このとき、横幅を % 指定、ボーダー幅を px 指定すると組み方にとても困ります。
下記のコードのように、そのまま組んでしまうと、横幅が 50% 以上になりカラム落ちしてしまいます。

sample1.html


.css3BoxLayout {border: 20px yellow solid;}  /*clearfixが必要*/
.rightBox {
	border: 20px red solid;
	width: 40%;
	float: left;
}
.leftBox {
	border: 20px blue solid;
	width: 60%;
	float: right;
}

CSS3: box-sizing プロパティ

width や height で指定した横幅や高さに、border や padding を含むかどうかを指定できる CSS3 のプロパティです。
CSS3 の勧告候補「CSS3 Basic User Interface Module[4]」の一部として策定中です。

sample2.html


.rightBox,
.leftBox {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

対応ブラウザ (ざっと確認しただけ)

  • Firefox 3
  • Safari 3
  • Google Chrome
  • Internet Explorer 8
  • Opera 9

Internet Fucking Explorer 6, 7を無視すれば十分使えますね!border と padding の大きさを取得して width を上書きするスクリプトを jQuery で組めば IE6, 7 でも可能となるかもしれませんが今回は割愛。

自由なカラムレイアウト: 高さがそろったボックスを並べたい場合

次は、並んだボックスの高さをそろえたい場合を考えます。これはよく JavaScript で解決したりするケースですね。jQuery だと簡単に組むことができます。
しかし、CSS3 にはこれを解決するだけでなく、ボックスレイアウトをとても便利にするプロパティが策定されています。

対応ブラウザ

このサンプルは以下のブラウザからご覧ください。対応はまだ少ないですね;-(

  • Firefox 3[5]
  • Safari 3
  • Google Chrome

CSS3: display: box; プロパティ

display プロパティに追加される予定のもので、この指定1つで簡単にカラムレイアウト・リキッドレイアウトが可能となる期待のプロパティです。
CSS3 のワーキングドラフト「CSS Template Layout Module (旧 Advanced Layout Module)」の一部として策定中です。
float する必要がないため、親要素に clearfix を施す必要もなく、とても簡単に高さがそろったカラムレイアウトができるようになります。

sample3.html


.css3BoxLayout {
	border: 20px yellow solid;
	display: -moz-box;
	display: -webkit-box;
}
.rightBox {
	border: 20px red solid;
	width: 40%;
}
.leftBox {
	border: 20px blue solid;
	width: 60%;
}
.rightBox,
.leftBox {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

さらにこれと組み合わせて使うであろうプロパティを紹介します。

CSS3: box-ordinal-group プロパティ

カラムの表示順序を指定するプロパティです。本来は HTML の上に書かれたのコンテンツから順に左のカラムとなりますが、コンテンツを先に記述しかつ右側のカラムにもっていきたい場合に利用できます。
指定した値が大きいボックスを右側に配置します。使い方は z-index プロパティをイメージされるとわかりやすいと思います。


.rightBox {  /*左カラムに*/
	-moz-box-ordinal-group: 2;
	-webkit-box-ordinal-group: 2;
	border: 20px red solid;
	width: 40%;
}
.leftBox {  /*右カラムに*/
	-moz-box-ordinal-group: 1;
	-webkit-box-ordinal-group: 1;
	border: 20px blue solid;
	width: 60%;
}

(これだから class にレイアウトに関する名前を記述するのはよくないですね;-P)

CSS3: box-flex プロパティ

カラムの横幅を可変にするプロパティです。例えば、3カラムの中央のボックスを可変にしたい場合に「box-flex: 1;」と指定します。

sample3.html


.rightBox {  /*200pxの固定*/
	border: 20px red solid;
	width: 200px;
}
.centerBox {  /*可変に*/
	-moz-box-flex:1;
	-webkit-box-flex:1;
	border: 20px green solid;
}
.leftBox {  /*300pxの固定*/
	border: 20px blue solid;
	width: 300px;
}

以上を組み合わせると、簡単にかつ表現豊かにレイアウトを組むことができます。たとえば、border-image プロパティや border-radius プロパティ、box-shadow プロパティと組み合わせると、これまで画像を切り出してアクロバティックに組んでいたボックスを CSS でも HTML でもシンプルに組めるようになるなど、表現の幅がかなり広がりますね。ほんとに早く実装されないかな!

  1. jQueryの紹介は他の方にお任せってことで;-P [back]
  2. Chromeは一応ベータ版ですがMac版もありますよ。 [back]
  3. コードの class 名についてはつっこんであげないで下さい>< [back]
  4. CSS3の仕様書は、日本語訳をまとめてくださっている血統の森さんのページが便利です。 [back]
  5. Firefoxでは1つ目のサンプルが正常に表示されません・・・ [back]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA