ボックスの大きさとはみ出し処理

今回はボックス関連です。 扱いが難しいですが、スタイルシートデザインには欠かせません。

使うプロパティは

width:値；

値にはauto、％、px・emなどの長さが使用できます。

新旧のブラウザーによって解釈が違うため、使うときには注意が必要です。
いくつかポイントを挙げると、

1. レイアウト用のボックスにはpaddingを指定しない
2. 入れ子になっているときは内側の要素にはautoを使う
3. aやspanタグなどのインライン要素には指定しない
4. 背景やフィルターが上手く使えないときはwidthを指定してみる

などがあります。

使うプロパティは

height:値;

値にはauto、％、px・emなどの長さが使用できます。

これも新旧のブラウザーによって解釈が違うため、使うときには注意が必要です。
いくつかポイントを挙げると、

1. レイアウト用のボックスにはpaddingを指定しない
2. 入れ子になっているときは外側の要素にはautoを使う
3. aやspanタグなどのインライン要素には指定しない
4. 中身がはみ出しそうなときはoverflowプロパティを組み合わせる

などがあります。

使うプロパティと値の組み合わせは

overflow:auto;はみ出したらスクロールバーを表示
overflow:scroll;常にスクロールバーを表示
overflow:hidden;はみ出した部分は表示しない
overflow:visible;ブラウザーによって処理の仕方がちがいます

トップページの「管理人のぼやき」の部分にoverflow:auto;を使用しています。 heightのブラウザーによる処理の違いを防ぐのに役立つプロパティです。 インラインフレームのような効果を出したいときにも使えます。

DIV以外には使わないほうが無難なようです。

---