表示・配置

「overflow」プロパティ

「overflow」プロパティは、要素の内容が要素内に収まりきらない場合にどのように処理するかを指定するCSSプロパティです。
要素内を処理する指定値は、「要素内をはみ出して表示する」「はみ出た部分を表示しない」「スクロールで表示する」「自動」などの指定ができます。

「overflow」プロパティの値

要素内を処理する指定値は「visible」「hidden」「scroll」「auto」などの値を指定することができます。
※「scroll」を指定すると、常に縦横のスクロールバーが表示されるようになります。 ※「overflow」プロパティは、「overflow-x」「overflow-y」で、x軸、y軸を指定できます。

【プロパティの種類】
・overflow-x
・overflow-y

「overflow」プロパティの指定方法

要素内を処理する指定する場合は、「overflow」プロパティを使い適応する値を指定することで実装できます。

「overflow」プロパティ
セレクタ{
overflow:要素内を処理;
}
値例
/* 基本値 */
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;
表示例
要素内をはみ出して表示する(visible)要素内をはみ出して表示する(visible)要素内をはみ出して表示する(visible)要素内をはみ出して表示する(visible)要素内をはみ出して表示する(visible)
はみ出た部分を表示しない(hidden)はみ出た部分を表示しない(hidden)はみ出た部分を表示しない(visible)はみ出た部分を表示しない(hidden)はみ出た部分を表示しない(hidden)
スクロールで表示する(scroll)スクロールで表示する(scroll)スクロールで表示する(scroll)スクロールで表示する(scroll)スクロールで表示する(scroll)