トップページ > スタイルシートリファレンス > overflow-y

★スタイルシートリファレンス

overflow-y・・・はみ出た内容の表示方法を指定する(IE独自の仕様)
Internet Explorer5Internet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9

overflow-yプロパティは、Internet Explorerが独自に追加したプロパティで、 ボックスの範囲内に内容が入りきらない場合に、はみ出た部分の表示の仕方を指定する際に使用します。

機能としてはoverflowプロパティと同じですが、 縦スクロールバーのみが表示され、横スクロールバーは表示されません。

overflow-yプロパティは、デザインやインターフェースの好みで、横スクロールバーのみを消したり、 擬似フレームや擬似テキストエリア的な表現にしたい場合に用いるケースが多いようです。

■値

visible
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
scroll
入りきらない内容はスクロールして見られるようになります。
hidden
はみ出た部分は表示されません。
auto
ブラウザに依存します(一般的にはスクロールして見られるようになります)。

■使用例

スタイルシート部分は外部ファイル(sample.css)に記述。

p.sample1 {width:200px; height:60px; background-color:#ee0000; overflow-y:visible;}
p.sample2 {width:200px; height:60px; background-color:#ee0000; overflow-y:scroll;}
p.sample3 {width:200px; height:60px; background-color:#ee0000; overflow-y:hidden;}
p.sample4 {width:200px; height:60px; background-color:#ee0000; overflow-y:auto;}

HTMLソース

<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">
<b>visible</b><br>
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。<br>
Default. Content is not clipped and scroll bars are not added.
</p>
<p class="sample2">
<b>scroll</b><br>
入りきらない内容はスクロールして見られるようになります。<br>
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.
</p>
<p class="sample3">
<b>hidden</b><br>
はみ出た部分は表示されません。<br>
Content that exceeds the dimensions of the object is not shown.
</p>
<p class="sample4">
<b>auto</b><br>
ブラウザに依存します(一般的にはスクロールして見られるようになります)。<br>
Content is clipped and scrolling is added only when necessary.
</p>
</body>
</html>
↓↓↓

ブラウザ上の表示

visible
ボックスからはみ出して表示されます。これが初期値です。尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
Default. Content is not clipped and scroll bars are not added.

scroll
入りきらない内容はスクロールして見られるようになります。
Content is clipped and scroll bars are added, even if the content does not exceed the dimensions of the object.

hidden
はみ出た部分は表示されません。
Content that exceeds the dimensions of the object is not shown.

auto
ブラウザに依存します(一般的にはスクロールして見られるようになります)。
Content is clipped and scrolling is added only when necessary.

■関連項目

overflow …… はみ出た内容の表示方法を指定する
overflow-x …… はみ出た内容の表示方法を指定する(IE独自の仕様)
overflow-y …… はみ出た内容の表示方法を指定する(IE独自の仕様)
position …… ボックスの配置方法(基準位置)を指定する
top …… 上からの配置位置(距離)を指定する
bottom …… 下からの配置位置(距離)を指定する
left …… 左からの配置位置(距離)を指定する
right …… 右からの配置位置(距離)を指定する
display …… 要素の表示形式(ブロック・インライン)を指定する
float …… 左または右に寄せて配置する
clear …… 回り込みを解除する
z-index …… 重なりの順序を指定する
visibility …… ボックスの表示・非表示を指定する
clip …… ボックスを切り抜き表示(クリッピング)する
direction …… 文字表記の方向(左右)を指定する
unicode-bidi …… Unicodeの文字表記の方向を上書きする
writing-mode …… 文字表記の方向(縦横)を指定する(IE独自の仕様)
▲ページ先頭へ
トップページ > スタイルシートリファレンス > overflow-y
PR
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
HTMLクイックリファレンスについて
© HTMQ