スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
純粋にHTMLドキュメントのあり方を考えると、単に背景画像を置くだけのためにこのカラの DIV要素の入れ子というのはあんまり望ましくないとは思いますが、スタイルシート非対応環境で問題になる訳でもなく（厳密にいえば全ての環境でスタイルシートを適用すると問題発生もありえます）、単なる装飾画像が IMG要素としてある訳でもなく、テーブルレイアウトでやるよりマシではないかと考えたりするのでやってますが、例によってスタイルシート対応のクセに思いどおりにならない状況（IE）の対策までやるのは確かにややこしい。単なる意地ともいえますが、現在はとにかく可能性を追求してみようということで。
こういった過渡的手法を考えるのは、以前ウェブデザイナーがテーブルレイアウトを扱い出した時の考え方とたいした変わらないのであって、現状で可能なデザイン手法をいろいろためして、そのうち確実なものとする事はウェブデザイナーにとって大切なことだと思います。
そこでもーすこし考える。本当は状況とわず要素一発、またはクラス指定するとカドマルのブロックになれば一番いいんだけど。背景色指定したヨスミに、親背景色のカドマル画像を配置したパターン。
ヨツカドに画像をはりつけるためには、最低ヨッツのブロックがあればいいのだ。
dl ブロックを使ってやっているのは macromedia でもやってたと思う。ただし横幅固定。つまりそれだと、上下の画像だけでいい。これは簡単なのであえてやる必要はないか。
height: 0; と overflow: hidden; を組み合わせてブロック内ノードを隠すというのをやってます。別に height:10px; でもいいです。互換モードの場合は height:10px; にしないとダメ。カラブロックでなくて、中身になんかいれといて隠す。この手法は、見出し等で画像を使って、中身のテキストを隠すのに使えます。インライン要素にいちいち display:none や visibility:hidden を付加しなくていい、と。
上記仕様では標準準拠ブラウザ、またはそのモードでなきゃ意図通りになりません。互換をとるには指定を読ませないようにするか、上書き指定します。ここでは、MacIE5 と WindowsIE6- に対して別指定を反映させています。
ちなみに、CSS3の仕様には、border-radius というプロパティがあって、カドマル効果になります。ほぼ同様の効果は、mozilla の独自先行拡張指定で確認できます。はやく公開仕様になってブラウザが対応してくれるといいな、というプロパティのひとつですな。
Mozilla の独自拡張 CSS は使わないでください、というのは残念だけど、確かに Mozilla サイト では、キッチリキレイなカドマルスタイルを決めてくれてます。
2004年10月28日 20:01
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto