項 目 | 説 明 |
---|---|
記述形式 |
|
値 の形式 | auto | scrollbar,panner,move,marquee |
初 期 値 | auto |
対応ブラウザー | H3+ / e6+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+ |
適用可能な要素 | 非置換のブロックレベル要素と非置換のインライン・ブロック要素 |
継 承 | する |
overflow-styleプロパティ は,要素から はみ出た内容のスクロール方法 を指定します。
なお,上に示した入力形式の 1 ~ 2 は,それぞれ,つぎの意味になります。
ただし、auto は入力形式 1 のみで使用可能です。
指定できる値は,以下のとおりです。
値 | 説 明 |
---|---|
auto | ブラウザーに依存します (初期値) (一般的にはスクロールにより見られるようになります)。 |
scrollbar | スクロール・バーを表示します。 |
panner | パン(四隅を基準とした表示の切り替え)により表示します。 |
move | ユーザーの移動により表示します。 |
marquee | マーキーにより表示します。 |
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- p.sample1 {width: 320px; height: 60px; background-color: #00BBBB; overflow: scroll; overflow-style: auto;} p.sample2 {width: 320px; height: 60px; background-color: #00BBBB; overflow: scroll; overflow-style: scrollbar;} p.sample3 {width: 320px; height: 60px; background-color: #00BBBB; overflow: scroll; overflow-style: panner;} p.sample4 {width: 320px; height: 60px; background-color: #00BBBB; overflow: scroll; overflow-style: move;} p.sample5 {width: 320px; height: 60px; background-color: #00BBBB; overflow: scroll; overflow-style: marquee;} --> </style> |
HTML <body> ~ </body> |
<p class="sample1"> <b>auto:</b> ブラウザーに依存します (初期値)<br> 入りきらない内容はスクロールして見られるようになります。<br> Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object. </p> <p class="sample2"> <b>scrollbar:</b> スクロール・バーが表示されます。<br> 入りきらない内容はスクロールして見られるようになります。<br> Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object. </p> <p class="sample3"> <b>panner:</b> 四隅を基準として表示を切り替えます。<br> 入りきらない内容はスクロールして見られるようになります。<br> Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object. </p> <p class="sample4"> <b>move:</b> ユーザーが移動できるようにします。<br> 入りきらない内容はスクロールして見られるようになります。<br> Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object. </p> <p class="sample5"> <b>marquee:</b> マーキーにより表示します。<br> 入りきらない内容はスクロールして見られるようになります。<br> Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object. </p> |
ブラウザー 表示例 (未対応のブラウザーでは正しく表示できません) |
---|
auto: ブラウザーに依存します (初期値)
scrollbar: スクロール・バーが表示されます。
panner: 四隅を基準として表示を切り替えます。
move: ユーザーが移動できるようにします。
marquee: マーキーにより表示します。 |