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

■ 概要

項  目説  明
記述形式
  1. セレクタ {overflow-style: 値1 }
  2. セレクタ {overflow-style: 値1 値2}
値 の形式 auto | scrollbarpannermovemarquee
初 期 値 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.

■ 備考

【参考ページ】