Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>overflow-yプロパティ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

overflow-y プロパティ …内容がはみ出たときの縦方向の表示方法を指定する

使用プロパティ

CSSプロパティ

overflow-y: 値;

対象となる
要素

ブロック要素

継承

しない

次項(値と働き)を参照してください

対応ブラウザ IE6 Win

解説

overflow-y プロパティを使えば、指定した高さから要素の内容がはみ出した場合の、縦方向の表示方法を指定することができます。どのような表示方法を指定できるかは、次項を参照してください。
また、指定した幅から要素の内容がはみ出した場合の、横方向の表示方法を指定する場合はoverflow-x プロパティを使用します。

overflow-y プロパティ、overflow-x プロパティは Internet Explorer 独自に追加したプロパティですので、 Internet Explorer 以外のブラウザでは表示が乱れる恐れがありますので注意が必要です。通常は overflow プロパティを使用した方が良いでしょう。

値と働き

働き 働き
visible 通常通り要素の内容は、ボックスからはみ出して表示されます。これが初期値です。なお、Internet Explorer ではそのブロックが広がって内容を表示します。 hidden 高さからはみ出した部分は表示されない。
scroll 常にスクロールバー付きで表示される。スクロールすることにより見られるようになります。 auto 内容がはみ出したときはスクロールバー付きで表示され、はみ出していないときはスクロールバーが付かずに表示される。

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

div.sample1 {
width: 200px;
height: 70px;
background-color: lightblue;
overflow-y: visible;
margin-bottom: 20px;
}

div.sample2 {
width: 200px;
height: 70px;
background-color: lightblue;
overflow-y: hidden;
margin-bottom: 20px;
}

div.sample3 {
width: 200px;
height: 70px;
background-color: lightblue;
overflow-y: scroll;
margin-bottom: 20px;
}

div.sample4 {
width: 200px;
height: 70px;
background-color: lightblue;
overflow-y: auto;
margin-bottom: 20px;
}

</style>
</head>

<!--ページの本文-->
<body>

<div class="sample1">-visible-<br>
通常通り要素の内容は、ボックスからはみ出して表示されます。これが初期値です。なお、Internet Explorer ではそのブロックが広がって内容を表示します。</div>

<div class="sample2">-hidden-<br>
高さからはみ出した部分は表示されない。</div>

<div class="sample3">-scroll-<br>
常にスクロールバー付きで表示される。スクロールすることにより見られるようになります。</div>

<div class="sample4">-auto-<br>
内容がはみ出したときはスクロールバー付きで表示され、はみ出していないときはスクロールバーが付かずに表示される。</div>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド
-visible-
通常通り要素の内容は、ボックスからはみ出して表示されます。
-hidden-
このように、高さからはみ出した部分は表示されません。
-scroll-
常にスクロールバー付きで表示される。スクロールすることにより見られるようになります。
-auto-
内容がはみ出したときはスクロールバー付きで表示され、はみ出していないときはスクロールバーが付かずに表示される。

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system