overflow

要素の内容が、表示領域からはみ出た場合の表示方法を指定します。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O6 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ overflow : 値; }

▲PageTop

指定できる値

値 初期値 意味
auto はみ出た場合はスクロールして表示します。
scroll 常にスクロール表示をします。
hidden はみ出た部分を表示しません。
visible ○ 要素からはみ出して表示させます。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      #sample1 {
        overflow : auto;
        height : 3em;
      }
      #sample2 {
        overflow : scroll;
        height : 3em;
      }
      #sample3 {
        overflow : hidden;
        height : 1em;
      }
      #sample4 {
        overflow : visible;
        height : 1em;
      }
      #sample div{
        width : 30%;
        background-color : #cccccc;
      }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">「overflow : auto」の表示結果。はみ出た場合はスクロールして表示します。</div>
      <br>
      <div id="sample2">「overflow : scroll」の表示結果。常にスクロール表示をします。</div>
      <br>
      <div id="sample3">「overflow : hidden」の表示結果。はみ出た部分を表示しません。</div>
      <br>
      <div id="sample4">「overflow : visible」の表示結果。要素からはみ出して表示させます。</div>
    </div>
  </body>
</html>

表示結果

「overflow : auto」の表示結果。
はみ出た場合はスクロールして表示します。

「overflow : scroll」の表示結果。
常にスクロール表示をします。

「overflow : hidden」の表示結果。
はみ出た部分を表示しません。

「overflow : visible」の表示結果。
要素からはみ出して表示させます。

▲PageTop

関連項目

CSS

clip

▲PageTop

▲