1枚の画像からサイズ可変な罫線を表示する(1):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-01-25 16:37:01
  • このエントリーをはてなブックマークに追加

 現在のWeb制作では、画像を使ってサイズ可変な罫線を表示する場合、辺やコーナー別に画像を用意して対応する。しかし、画像を作成するのに手間がかかる上に、画像の表示先として複数の要素(タグ)を用意する必要があるなど、HTML/XHTMLソースやスタイルシートの設定が複雑になるという問題がある。

 それに対して、CSS 3ではborder-imageプロパティを利用することにより、1枚の画像からサイズ可変な罫線を表示する方法が提案されている。border-imageプロパティでは、ブラウザが1枚の画像を9つに分割して罫線の表示を行うので、これまでのように制作者が辺やコーナー別に画像を用意する必要がない。また、スタイルシートも

などの1つの要素に適用するだけで設定できるというメリットがある。

 Safari 3ではこの機能をサポートしており、-webkit-border-imageというプロパティで利用することができる。たとえば、次のソースではwakublue.pngという1枚の画像から罫線を作成して、テキストを枠で囲んで表示している。

罫線の画像 罫線の画像
Safari 3の表示 Safari 3の表示
div{
-webkit-border-image: url("wakublue.png") 20 20 20 20 / 20px;
}
今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。
ブラウザで表示を確認する

 ここでは

に対して横幅を指定していないので、ブラウザ画面の横幅を変えると枠の大きさも変わる。

ブラウザ画面の横幅を大きくしたもの ブラウザ画面の横幅を大きくしたもの

 なお、border-imageプロパティはCSS 3の草案「CSS3 Backgrounds and borders Module」で提案されている。現在のところ、Firefox 3やOpera、Internet Explorerでは対応していない。

 では次に、最小限、必要な設定を確認しておこう。

  • 新着記事
  • 特集
  • ブログ