疑問

テキスト量が増えたら自動でスクロールバーを出す(overflow)

処理

スタイルシートを使用して要素に対しoverflowプロパティを定義します。

スタイルの記述部分に直接overflow:;を記述します。

プロパティ・値

次の例文に対して定義付けます。ここでは分かりやすいようにborderを指定しています。

ホームページビルダーは初心者から上級者まで幅広く使われているWebオーサリングソフトです。

overflow:visible;

指定したサイズを無視して全て表示します。デフォルトの状態です。overflow:visible;の場合、mozilla系のブラウザでは領域を内容量に合わせるのではなく、領域を確保して溢れたものは領域外に表示になります。

ホームページビルダーは初心者から上級者まで幅広く使われているWebオーサリングソフトです。

<style type="text/css">
<!--
P{
 overflow:visible;
 width:**em;
 height:**em;
}
-->
</style>

overflow:hidden;

サイズに収まりきらないものは表示しません

ホームページビルダーは初心者から上級者まで幅広く使われているWebオーサリングソフトです。

<style type="text/css">
<!--
P{
 overflow:hidden;
 width:**em;
 height:**em
}
-->
</style>

overflow:scroll;

サイズ指定に関係なくスクロールバーを表示します。

ホームページビルダーは初心者から上級者まで幅広く使われているWebオーサリングソフトです。

<style type="text/css">
<!--
P{
 overflow:scroll;
 width:**em;
 height:**em;
}
-->
</style>

overflow:auto;

サイズと内容量によってブラウザが判断します。

ホームページビルダーは初心者から上級者まで幅広く使われているWebオーサリングソフトです。

<style type="text/css">
<!--
P{
 overflow:auto;
 width:**em;
 height:**em;
}
-->
</style>