CSS3 Backgrounds and Borders Module : W3C Working Draft 16 February 2005

　大昔に小遣い稼ぎで作った別の Web サイトで、写真の装飾に以下のようなアルバム風モチーフを作ったことがあります。

table で無理矢理

↓

注意 … おそらくこのサイトの CSS 設定の影響だと思うのですが、Windows Internet Explorer 以外で表示したらズレて表示されてしまっているとおもいます。CSS 適用セレクタの優先順位の干渉とかで影響を受けているのだとは思いますが、面倒くさいので手直しはしていません（実際には使わないですし）。しかしながらやりたいことのイメージは分かって頂けると思います。

　その方面（どの方面？）の方ならおわかりでしょうが、これを表現するのに本来表の表現に用いる table エレメントで無理矢理作っています。Web ページレイアウトに div ではなく table を用いるしかなかった時代（20 世紀末くらいまでですかねぇ）ならともかく、昨今の CSS の普及に伴いそういった力業はもはや過去の遺物と化した手法ですし、汎用性の高い美しい文書構造を作り上げるためにも table はあくまでも表形式の表現にのみ用いるべきだというポリシーを貫きたいです。

　しかし、これと同じ表現を行う正規の方法が実は今のところありません。このサイトのデザインをある程度作り上げたときも、ぜひ同様の写真アルバム風で写真の表示をしたかったのですが、画像を表示するための img エレメントに使える CSS プロパティだけでは現状不可能です。仕方がないので代わりの手段として border の幅と色指定で以下のようにしてそれっぽい雰囲気だけ出してみたりしています。苦肉の策とはまさにこのこと。

CSS3 Backgrounds and Borders Module

　そんなときに嬉しい知らせが。次期バージョンの CSS である CSS3 の Working Draft の一部が 2005 年 2 月 16 日に公開され、これらは各要素における境界線 (border) や背景 (background) に関する資料ですが、この Working Draft 通りにCSS3 が策定されれば、img 要素に CSS の適用を行うだけで同じような表現が出来そうです。具体的にはこんな感じですか。

img{
	border-width:40px 26px 26px 26px;
	border-image:url("frame.png") 40 26 26 26 round stretch;
}

• The "border-image" property （W3C）

　↑の英文ナナメ読みで作ってみた物ですが、あくまでも Working Draft であるのでこんな妄想をしたところで将来仕様が差し替えられてしまうかも知れませんし、何より現在の CSS 2.1 でさえ満足に実装したブラウザが存在しないというのに CSS 3 なんてまともにブラウザで取り扱えるようになるのは果たしていつの日になるのやら。

The "border-radius" properties もいいね～

　おなじ文書内のThe "border-radius" propertiesもうれしいプロパティですね。ボックス要素の枠は "box" なので、当然先ほど出てきた CSS 構文の枠のような長方形（矩形）でしか表現出来ませんが、これの角を丸めた境界線を引くことが出来るというもの。マンガの吹き出しのような表現が可能になるかも知れません。