overflow
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。 横方向のみの指定は overflow-x、縦方向のみの指定は overflow-y で指定することができます。
書式
overflow: overflow
属性値
- overflow
-
領域をはみ出した要素の扱いを以下の値の中から指定します。
値 意味 visible 表示する（規定値） hidden 表示しない scroll スクロール表示 auto 自動 inherit 継承
使用例
スタイルシート属性 overflow の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<div style="overflow: visible; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。
<div style="overflow: hidden; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
<div style="overflow: scroll; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。
<div style="overflow: auto; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。</div>
スタイルシート属性 overflow は、領域をはみ出した要素の扱いを指定します。
overflow-x
スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。
書式
overflow-x: overflow
属性値
- overflow
- 領域をはみ出した要素の扱いを以下の値の中から指定します。
値 意味 visible 表示する（規定値） hidden 表示しない scroll スクロール表示 auto 自動 inherit 継承
使用例
スタイルシート属性 overflow-x の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<div style="overflow-x: visible; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。</div>
スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。
<div style="overflow-x: hidden; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。</div>
<div style="overflow-x: scroll; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。</div>
スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。
<div style="overflow-x: auto; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。</div>
スタイルシート属性 overflow-x は、領域をはみ出した要素の扱い（横方向のみ）を指定します。
overflow-y
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。
書式
overflow-y: overflow
属性値
- overflow
- 領域をはみ出した要素の扱いを以下の値の中から指定します。
値 意味 visible 表示する（規定値） hidden 表示しない scroll スクロール表示 auto 自動 inherit 継承
スタイルシート属性 overflow-y の使用例と表示サンプルを次に示します。表示結果はブラウザによって異なることがあります。
<div style="overflow-y: visible; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。</div>
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。
<div style="overflow-y: hidden; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。</div>
<div style="overflow-y: scroll; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。</div>
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。
<div style="overflow-y: auto; width: 100px; height: 60px; border: 1px solid">スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。</div>
スタイルシート属性 overflow-y は、領域をはみ出した要素の扱い（縦方向のみ）を指定します。