CSS3でできること
動作確認はFirefox3.6、Safari4のみで行っています。
また、ここに書いてある内容はW3CのCSS仕様書を忠実に再現したものではなく、感覚知とか実際にやってみてこうなったからこうだろう、という部分が多く、ところどころ抜けがあると思います。
その点をご了承・ご容赦いただければと思います。
初版 ：2009.10.27
改訂版：2010.03.28
テキストの流し込み
雑誌や新聞記事のように、自動的にテキストの流し込みが行われるようになっています。
以前は「-moz-」「-webkit-」など、レンダリングエンジン固有の表記をプロパティの前に入れなければ動作しなかったのですが、普通に書けば適用されるようになりました。
実際、Webでどのように利用されるのかは未知数ですが、IEで適用されればいよいよ実践使用可、と言った感じです。
columnプロパティが使える日は来るのか？
- column-count
- column-countではいくつのカラムに分けるかを指定できます。例）3カラムに分ける column-count: 3;
- column-width
- column-widthではいくつのカラムの幅を指定できます。使い方は普通のwidthプロパティと一緒。カラム数とカラム幅が矛盾していた場合、column-widthのほうが適用されるようです。
※「-moz-」「-webkit-」が必要。Safari3では効果ナシ。 - column-gap
- column-gapではいくつのカラム同士の間隔を指定できます。数値の指定などはpaddingなどのプロパティと一緒。カラム同士の間を調整するものなので、左端カラムの左側、右端カラムの右側には余白は開きません。（余白を明けたい場合はcolumn-countを指定している親ボックスにパディングを指定する）
※「-moz-」「-webkit-」が必要。 - column-rule
- column-ruleではいくつのカラム同士の間を仕切る線を指定できます。数値の指定などはborderプロパティと一緒。カラム同士の間を調整するものなので、左端カラムの左側、右端カラムの右側には線はつきません。
※「-moz-」「-webkit-」が必要。 - columns
- columnsではカラム数と幅を一度に指定できるショートハンド。
※Safari3では「-webkit-」をつけると対応。 - column-span
- column-spanでは、文章をカラムの中に収めず、複数カラムにわたって表示するかどうかを指定するもの。実際に見てもらったほうが分かりやすいと思うので、W3Cの仕様書「column-span」の例を見てください。
※ブラウザ未対応
ボックスのフレキシブルなレイアウト
- 親ボックスに、
display:box;を指定します。これだけで、floatを使わなくても子要素がすべて横並びに配置されます。 - 現状、それだけだとボックスのサイズがガタガタになってしまうので、子要素に幅を指定します。
- Safariでは幅を指定すると、すべてのボックスが均等に配置される仕組みになっているのですが、Firefoxでは上手くいかないため、paddingを使って調整しました。
画像とテキストの回りこみ
画像とテキストの回りこみを行う際も、floatを使わずに実装することができます。
floatを使わないメリットとしては、clearfix記述がいらなくなることが挙げられます。
ただ、マークアップとしては、親要素と、画像用子要素、テキスト用子要素の3つのボックスが必要になるので、マークアップ的にはfloatを使っていたときとあまり変わらず。
現状の実装から見ると、幅を可変にしたいボックスに対して、
box-flex: 1;（値は任意）を指定すれば、画像のサイズが変わっても可変で実装してくれるようです。（正式な実装がどうかは分からないのですが。）マークアップを維持して、画像の表示位置を変えたいとなると、やっぱり画像右、画像左用のモジュールが必要になってきます。
コンテンツの表示順を変えたいときは、それぞれのボックスに
box-ordinal-group: x;を指定します。xには数字が入り、xに指定した順番にコンテンツが配置されるようになります。今まで、画像とテキストを横並びにさせるときに、画像の幅が違うと、画像の幅の種類だけモジュールが必要になっていましたが、このプロパティを使えばその心配はなくなりそうです。
子要素を横並びにするか縦並びにするかを指定できるbox-orientプロパティや、並び順（記述順・記述逆順）を指定できるbox-direction、並び順を細かく指定するbox-ordinal-groupなどがある。
また、box-flexというプロパティを使うと、複数の子要素が親要素よりも大きく余白が開いてしまう場合、指定の指定の割合に応じて、親要素にぴったり合うように幅を可変してくれるのだとか。
どんな画像の幅でも、ひとつのモジュールで対応できるというのはかなりの利点ですが、制約がなくなることで、レイアウトに統一感が全くなくなってしまう可能性もあるので、調整調整して使っていくのが良いのかなと思います。
詳しくはW3CのFlexible Box Layout Moduleをご覧ください。
角丸ボックスの実現（border関連）
角丸ボックス
Webで自由なデザイン要素が求められるようになって、結構見かける角丸デザイン。
背景画像で何とかしたり、div連呼したり、JSでdivを作って背景画像を貼ったり、HTMLを犠牲にして組み込むことしかできなかった角丸ですが、border-radiusプロパティを使えば角丸があっという間。
ショートハンドでの指定も可能です（webkitは未対応？）。例）border-radius: 右上 左上 左下 右下;
※「-moz-」「-webkit-」が必要。
border: 5px solid #9cc;に加えて
border-radius: 1em;を指定した図です。
画像を一切使わず、角丸ボックスができます。
border-radiusという名前ですが、角丸にしたいボックスにボーダーを指定していなくても動作します。
ここでは親のボックスにpadding10px、背景色#000を指定し、角丸を実装するボックスにはborder-radius: 1em;のみを指定していますが、境界線に白ボーダーが入るわけではないので、デフォルトではボーダーはtransparentになっているのかもしれません。
ちなみにwebkitで表示させると若干気持ち悪い形になるようにしてます。
角丸使用例その２
こういう状態も背景画像なしでOK。
この部分はショートハンドで指定してるので、firefoxでは大丈夫ですがwebkitでは普通の四角になってると思います。
ボーダーに背景画像
ちなみに、ボーダーに背景画像がつけられるようになりました。
ちょっとした意気込みでいじってみたんですが、思ったより奥が深くて、理解するのに時間がかかりそう。
FirefoxとSafariでレンダリングが違うこともあり、どれがどの役割を為すのかがいまいち分からず。
今回使った背景画像が悪かったのかなとも思います。
W3Cの‘border-image’propertyの例示（リンク先に飛んで少し下スクロールした場所にあります）
に書いてあるような真ん中に空間の開いた背景画像じゃないと実装が難しいのかもしれません。
いちおう、Safariだと綺麗に外がチェック柄で囲まれていますのでご覧下さい。
Firefoxだと文字が見えないと思います。
safariだと外枠で囲まれている感じです。
stretchを指定すると画像が伸びることは分かったのですが、具体的な用法は分からず。
時間のあるときに仕様書じっくり読んでどういう仕様なのか確認しようと思います。
背景画像の使用・複数背景画像配置
複数背景画像
複数の背景画像が指定できるようになりました。
（webkitのみ、background-positionが効いています）
実装コード
background-image: url("../images/bg01.gif"), url("../images/bg02.gif");
background-repeat: repeat-x, repeat-y;
background-position: -30px left, bottom -36px;