1. Top
  2. CSS
  3. overflow

CSS - overflow

overflow

解説

エレメントのコンテンツがその高さと幅を超えた場合にどのようにするかを指定する。

デフォルトではオーバーフローしたコンテンツも表示される設定になっている。これはエレメントが指定された高さと幅に従わないことを意味する。scrollを設定した場合は、指定された高さと幅でクリップされてオーバーフロー部分はスクロールするようになる。hiddenを設定した場合はエレメントは指定された高さと幅でクリップされて、スクロールバーも表示されずオバーフローした部分は見えない。これは配置されたエレメントに対して適用される。

構文

{ overflow: scroll | hidden | visible | auto }

注意事項

この属性は継承されない。

TEXTAREAエレメントについてはhiddenのみ使用可能。TEXTAREAにhiddenを指定した場合、スクロールバーは表示されない。

次は、overflow属性の例である。

<DIV STYLE="position:relative;height:100;width:100;
      top:0;left:0;background-color:green;overflow:scroll">
put enough text in here that will take up more than 100 x 100
pixels worth of space. View this, and you will see that you
will need to use the scroll bars to see the content that won't
fit within a 100 x 100 window.
</DIV>

ページの先頭へ

!important |  @font-face |  @import |  active |  background |  background-attachment |  background-color |  background-image |  background-position |  background-repeat |  border |  border-bottom |  border-bottom-color |  border-bottom-style |  border-bottom-width |  border-color |  border-left |  border-left-color |  border-left-style |  border-left-width |  border-right |  border-right-color |  border-right-style |  border-right-width |  border-style |  border-top |  border-top-color |  border-top-style |  border-top-width |  border-width |  clear |  clip |  color |  cursor |  display |  filter |  float |  font |  font-family |  font-size |  font-style |  font-variant |  font-weight |  height |  hover |  left |  letter-spacing |  line-height |  link |  list-style |  list-style-image |  list-style-position |  list-style-type |  margin |  margin-bottom |  margin-left |  margin-right |  margin-top |  overflow |  padding |  padding-bottom |  padding-left |  padding-right |  padding-top |  page-break-after |  page-break-before |  position |  text-align |  text-decoration |  text-indent |  text-transform |  top |  vertical-align |  visibility |  visited |  width |  z-index |