overflow
CSSの書き方
overflow:値 ;
CSSの詳細情報 | |||||
---|---|---|---|---|---|
プロパティ名 | overflow | 読み方 | オーバーフロー | ||
初期値 | visible | 意味 | 要素漏れの表示方法を指定 | ||
値 | visible/hidden/scroll/auto | ||||
対象 | ブロックレベルと置換要素 | ||||
CSSレベル | CSSレベル2 | 対応ブラウザ | Windows | MAC | |
継承 | しない | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0(※) |
解説
「overflow」プロパティは、ボックスから内容がはみ出した場合の表示方法を指定します。
「visible/hidden/scroll/auto」の4種類があります。
値(visible)
「overflow」プロパティの初期値は「visible」で、これはボックスからはみ出した内容も表示するようにします。
ただし、ボックスの「width」プロパティと「height」プロパティの両方でサイズを指定していた場合です。
「width」プロパティだけで、「height」プロパティを特に指定していない場合は、内容がボックスからはみ出さないように、ボックスは縦に伸張します。
値(hidden)
「overflow:hidden;」とした場合、ボックスから内容がはみ出た場合、その部分は表示されません。
値(scroll)
「overflow:scroll;」とした場合、ボックスのサイズは変わりませんが、要素の縦横にスクロールバーが表示されて、全体が見られるようになります。
値(auto)
「overflow:auto;」とした場合の表示方法は「全体が見られるようにすべきである」という曖昧な指定だけで、実際の挙動はブラウザに任されています。
ただし、多くのブラウザは、ボックスに「height」プロパティを指定していない場合は内容が収まるように要素の高さが自動的に伸張し、一方、「width」プロパティと「height」プロパティの両方を指定したボックスの場合は、「overflow:scroll;」と同じようにスクロールバーを出して内容を表示するようです。
InternetExplorerに不具合あり
InternetExplorerでは、「width」プロパティと「height」プロパティを指定しているボックスでも、内容がはみ出さずに、要素の高さが伸びてしまう既知のバグがあります。
詳しくは以下を参照してください。
CSS/HTMLサンプル
/* widthとheightプロパティを指定している場合 */
p { width:200px; height:20px; background-color:#ffdff9; }
p.vis { overflow:visible; }
p.hid { overflow:hidden; }
p.scr { overflow:scroll; }
p.aut { overflow:auto; }
/* widthプロパティのみ指定している場合 */
div { width:200px; background-color:#accbfd; }
div.vis2 { overflow:visible; }
div.hid2 { overflow:hidden; }
div.scr2 { overflow:scroll; }
div.aut2 { overflow:auto; }
段落要素とDIV要素にoverflowプロパティをそれぞれ指定 サンプル