overflowプロパティ。

CSSに於ける要素がボックスに入り切らなかった場合の挙動・overflowプロパティに関する解説です。

overflowプロパティとは。

overflowプロパティは、要素がボックスに入り切らなかった場合の挙動です。

widthプロパティ及びheightプロパティでボックスの大きさを指定した際に、当該ボックスが狭過ぎて指定された範囲に収まり切らなくなる場合があり、その場合の扱いを指定します。

overflowプロパティの扱い。

読み飛ばす

overflowプロパティの書式。

overflowプロパティの書式は、以下のようになります。

overflow: 値

値としては、以下のものが取れます。

読み飛ばす

inherit

一番近い上位要素で指定された値を継承します。

visible

はみ出してもお構い無しに表示します(デフォルト)。

hidden

はみ出す分は表示しません。

更にclipプロパティで範囲を指定している場合、その範囲外も非表示になります。

scroll

はみ出す分は表示しませんが、スクロールが可能になります。

印刷メディアなど、スクロールの概念が無い場合は、何らかの形ではみ出した部分も表示する事が望ましいとされております。

auto

ユーザエージェントにも依りますが、入り切らない場合にスクロール出来るようにするのが望ましいとされております。

overflowプロパティの記述例。

読み飛ばす

例えば、HTMLの <pre>要素において、幅を親要素の80％で、はみ出した場合にスクロールさせたい場合は、

blockquote {
    width: 80%;
    overflow: auto;
    }

と記述します。

overflowプロパティに関する注意事項。

overflowプロパティの実装上の注意。

ネットスケープ 4.xでの注意事項。

ネットスケープ 4.xでは、overflowプロパティを実装しておりません。

ネットスケープ 4.xでは、widthプロパティで横幅を制限しても、入り切らない場合は勝手に横幅を拡げてしまいます。

オペラ 6.xでの注意事項。

オペラ 6.xでは、scroll値が与えられていてもスクロール出来ません。

このためオペラ 6.xでも使うスタイルシートでは、auto値を利用した方が良いでしょう。

WAP 2.0での注意事項。

WAP 2.0では、overflowプロパティは定義されておりません。

その他のユーザエージェントでの注意事項。

一般にグラフィカルなユーザエージェントでは、scroll値が与えられた場合はスクロールの必要が無い場合でもスクロールバーが表示されるようです。

これが鬱陶しい場合は、auto値を利用すれば、必要なときだけスクロールバーが発生するようです。