CSS レイアウト - オーバーフロー

CSS overflow属性は、内容がエリアに収まらない場合の処理方法を制御します。

このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。 このテキストは非常に長く、そのコンテナの高さは100ピクセルだけです。したがって、読者に内容をスクロールするためにスクロールバーが追加されています。

実際に試してみる

CSS Overflow

overflow 属性は、要素の内容が指定されたエリアに収まらない場合に、内容をカットアウトするか、スクロールバーを追加するかを指定します。

overflow 属性は以下の値を設定できます：

  • visible - デフォルト。溢出はカットアウトされません。内容は要素のフレーム外にレンダリングされます
  • hidden - 溢出がカットアウトされ、残りの内容は不可視になります
  • scroll - 溢出がカットアウトされ、残りの内容を確認するためにスクロールバーが追加されます
  • auto - scroll 同様ですが、必要に応じてのみスクロールバーを追加します

注釈：overflow 属性は、指定された高さを持つブロック要素にのみ適用されます。

注釈：OS X Lion（Mac上）では、スクロールバーはデフォルトで非表示で、使用時にのみ表示されます（overflow:scrollが設定されている場合でも）：

overflow: visible

デフォルトでは、溢出は表示されています（overflow: visibleが設定されている場合）：visible)、これはカットアウトされるのではなく、要素のフレーム外にレンダリングされることを意味します：

レイアウトをよりよく制御したい場合、overflow属性を使用することができます。overflow属性は、内容が要素のフレームを超えた場合に何が起こるかを指定します。

例

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

実際に試してみる

overflow: hidden

overflow: hiddenを使用する場合 hidden 値、溢出はカットアウトされ、残りの内容は非表示になります：

レイアウトをよりよく制御したい場合、overflow属性を使用することができます。overflow属性は、内容が要素のフレームを超えた場合に何が起こるかを指定します。

例

div {
  overflow: hidden;
}

実際に試してみる

overflow: scroll

値が設定されている場合 scroll、溢出はカットアウトされ、スクロールバーが追加され、フレーム内でスクロールするために使用されます。ただし、これにより、水平および垂直方向にスクロールバーが追加されます（それが必要でない場合でも）：

レイアウトをよりよく制御したい場合、overflow属性を使用することができます。overflow属性は、内容が要素のフレームを超えた場合に何が起こるかを指定します。

例

div {
  overflow: scroll;
}

実際に試してみる

overflow: auto

auto 値は、autoに似ています scrollただし、必要に応じてのみスクロールバーを追加します：

レイアウトをよりよく制御したい場合、overflow属性を使用することができます。overflow属性は、内容が要素のフレームを超えた場合に何が起こるかを指定します。

例

div {
  overflow: auto;
}

実際に試してみる

overflow-xおよびoverflow-y

overflow-x および overflow-y 属性は、内容の溢出を水平方向または垂直方向（または両方）に変更するかどうかを指定します：

  • overflow-x 内容の左/右エッジの処理方法を指定します。
  • overflow-y 内容の上/下エッジの処理方法を指定します。
レイアウトをよりよく制御したい場合、overflow属性を使用することができます。overflow属性は、内容が要素のフレームを超えた場合に何が起こるかを指定します。

例

div {
  overflow-x: hidden; /* 水平スクロールバーを隠す */
  overflow-y: scroll; /* 垂直スクロールバーを追加 */
}

実際に試してみる

すべての CSS Overflow 属性

属性 説明
overflow 内容が要素のフレームをオーバーフローするときに何が起こるかを定義します。
overflow-x 要素の内容エリアがオーバーフローした場合の内容の左/右エッジの処理方法を定義します。
overflow-y 要素の内容エリアがオーバーフローした場合の内容の上/下エッジの処理方法を指定します。