ホーム＞HTMLリファレンス（アルファベット検索）＞overflowプロパティ
overflow プロパティ …内容がはみ出たときの表示方法を指定する
使用プロパティ
 |
overflow: 値; |
対象となる
要素 |
ブロック要素 |
継承 |
しない
|
値 |
次項（値と働き）を参照してください |
 |
      |
 解説
 overflow プロパティを使えば、指定した幅や高さから要素の内容がはみ出した場合の表示方法を指定することができます。どのような表示方法を指定できるかは、次項を参照してください。
|
| 値 |
働き |
値 |
働き |
| visible |
通常通り要素の内容は、ボックスからはみ出して表示されます。これが初期値です。なお、Internet Explorer ではそのブロックが広がって内容を表示します。 |
hidden |
幅や高さからはみ出した部分は表示されない。 |
| scroll |
ボックスの領域に入りきらない内容はスクロールバー付きで表示されます。 |
auto |
ブラウザに依存します。 |
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
div.sample1 {
width: 200px;
height: 40px;
background-color: lightblue;
overflow: visible;
margin-bottom: 20px;
}
div.sample2 {
width: 200px;
height: 40px;
background-color: lightblue;
overflow: hidden;
margin-bottom: 20px;
}
div.sample3 {
width: 200px;
height: 40px;
background-color: lightblue;
overflow: scroll;
margin-bottom: 20px;
}
div.sample4 {
width: 200px;
height: 40px;
background-color: lightblue;
overflow: 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>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
-visible-
通常通り要素の内容は、ボックスからはみ出して表示されます。これが初期値です。なお、Internet Explorer ではそのブロックが広がって内容を表示します。
-hidden-
このように、幅や高さからはみ出した部分は表示されません。
-scroll-
ボックスの領域に入りきらない内容はスクロールバー付きで表示されます。
-auto-
この値を指定するとブラウザに依存します。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
