CSS3: overflow-style プロパティ - 要素からはみ出た内容のスクロール方法

■ 概要

項　　目説　　明
記述形式
  1. セレクタ {overflow-style: 値1 }
  2. セレクタ {overflow-style: 値1 値2}
値 の形式 auto | scrollbar，panner，move，marquee
初 期 値 auto
対応ブラウザー H3+ / e6+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
適用可能な要素 非置換のブロックレベル要素と非置換のインライン・ブロック要素
継　　承 する

■ 解説

overflow-styleプロパティ は，要素から はみ出た内容のスクロール方法 を指定します。

なお，上に示した入力形式の 1 ～ 2 は，それぞれ，つぎの意味になります。

  1. 値1 が左右上下すべての方向についての設定値となる。
  2. 値1 が左右（x-軸）の設定値，値2 が上下（y-軸）の設定値となる。

ただし、auto は入力形式 1 のみで使用可能です。

指定できる値は，以下のとおりです。

値説　　明
auto ブラウザーに依存します　（初期値）
（一般的にはスクロールにより見られるようになります）。
scrollbar スクロール・バーを表示します。
panner パン（四隅を基準とした表示の切り替え）により表示します。
move ユーザーの移動により表示します。
marquee マーキーにより表示します。

■ 使用例（ overflow-style プロパティの利用）

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: ブラウザーに依存します　（初期値）
入りきらない内容はスクロールして見られるようになります。
Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object.

scrollbar: スクロール・バーが表示されます。
入りきらない内容はスクロールして見られるようになります。
Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object.

panner: 四隅を基準として表示を切り替えます。
入りきらない内容はスクロールして見られるようになります。
Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object.

move: ユーザーが移動できるようにします。
入りきらない内容はスクロールして見られるようになります。
Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object.

marquee: マーキーにより表示します。
入りきらない内容はスクロールして見られるようになります。
Content is clipped but can be read by the selected scrolling method, if the content exceed the dimensions of the object.

■ 備考

【参考ページ】