ホーム＞HTMLリファレンス（アルファベット検索）＞overflow-xプロパティ
overflow-x プロパティ …内容がはみ出たときの横方向の表示方法を指定する
使用プロパティ
 |
overflow-x: 値; |
対象となる
要素 |
ブロック要素 |
継承 |
しない
|
値 |
次項（値と働き）を参照してください |
 |
 |
 解説
 overflow-x プロパティを使えば、指定した幅から要素の内容がはみ出した場合の、横方向の表示方法を指定することができます。どのような表示方法を指定できるかは、次項を参照してください。
また、指定した高さから要素の内容がはみ出した場合の、縦方向の表示方法を指定する場合はoverflow-y プロパティを使用します。
※overflow-x プロパティ、overflow-y プロパティは 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-x: visible;
margin-bottom: 20px;
white-space: nowrap;
}
div.sample2 {
width: 200px;
height: 70px;
background-color: lightblue;
overflow-x: hidden;
margin-bottom: 20px;
white-space: nowrap;
}
div.sample3 {
width: 200px;
height: 70px;
background-color: lightblue;
overflow-x: scroll;
margin-bottom: 20px;
white-space: nowrap;
}
div.sample4 {
width: 200px;
height: 70px;
background-color: lightblue;
overflow-x: auto;
margin-bottom: 20px;
white-space: nowrap;
}
</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-
通常通り要素の内容は、ボックスからはみ出して表示されます。
-hidden-
このように、幅からはみ出した部分は表示されません。
-scroll-
常にスクロールバー付きで表示される。スクロールすることにより見られるようになります。
-auto-
内容がはみ出したときはスクロールバー付きで表示され、はみ出していないときはスクロールバーが付かずに表示される。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
