ボックスを伸ばすとき、入れ子か空タグか。

ボックスのあしらいが、角丸の四角の場合でしかも中身が可変でのびる場合、角丸の上部...

ボックスのあしらいが、角丸の四角の場合でしかも中身が可変でのびる場合、角丸の上部と下部をどうCSSで表現するかということになる。

やり方としては、
1.テキストを表示するエリアの上下に空タグを設けて、その空タグの背景にそれぞれ指定する。
2.入れ子構造(ネスト)をしてその背景の上下にそれぞれ指定する

の2種類の方法がある。


さーて、これはどっちがいいか。

となる。

ので、AさんとMさんにヒアリングをしてみた。

その結果
2.の手法がいいということに。

やはり空タグを多く設けるよりも入れ子構造のほうが妥当ということだ。ただし、divタグでやたら入れ子にするのではなく、できるだけ無駄な入れ子はなしにしましょうということだった。

ということで、みなさーん、そのように。

この記事の周辺情報

著者

稲本[せぶん]浩介
福岡の企業に在籍し、Webを中心に活動中。Webディレクター、IA(インフォメーション アーキテクト)、マークアップエンジニア、CSSコーダーetc。
Twitterボタン

amazonさんがこのサイトを見て、書籍を紹介してくれています。