ボックス内に表示できない場合の処理

広告

高さと幅を指定したボックス内に表示しきれないものを格納した場合の処理を指定します。デフォルトでは幅や高さが指定してあっても入りきるように自動的にボックスの大きさが調整されるようになっています。変更する場合にはoverflowプロパティを使って設定します。

overflow : overflow

プロパティは"overflow"です。値は下記の中から1つを選択します。

overflow : visible; /* コンテンツを全て表示できるように幅と高さを調整 */
overflow : hidden;  /* 表示できない部分は表示しない */
overflow : scroll;  /* スクロールバーを付けて表示できるようにする */
overflow : auto;    /* ブラウザが判断する */

デフォルトは「visible」を指定した場合と同じで、ボックスの自動的に幅と高さを調整します。「hidden」の場合はボックスに入りきらない部分は表示しません。「scroll」を付けるとボックスに入りきらない場合はボックススクロールバーが自動的に付加されます。「auto」はブラウザ毎に判断されますが、基本的にはスクロールバーが付くようです。

では実際に試してみます。下記のサンプルでボックスに入れるテキストを自動改行しないように「white-space」プロパティに「pre」を設定しています。

sample3-1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="ja">
<head>
<meta http-equiv="Content-Type" Content="text/html;charset=UTF-8">

<title>スタイルシートサンプル</title>

<link rel="stylesheet" href="./css/sample3-1.css" type="text/css">

</head>
<body>

<div class="visible-sample">
<p>
村上世彰氏率いる投資ファンド(通称・村上ファンド)が12日
現在でUSENの発行済み株式総数の5.21%を取得していた
ことが19日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は77億7624万円で、保有目的は「純投資」として
いる。村上ファンドによるUSEN株の大量保有が明らかになっ
たのは初めて。

USENは「コメントを控えたい」としているが、同ファンドが
筆頭株主の宇野康秀社長や信託銀行などに次ぎ、4、5番目の大
株主となったことで、ライブドア買収計画などにも影響を与える
可能性がある。
</p>
</div>

<div class="hidden-sample">
<p>
村上世彰氏率いる投資ファンド(通称・村上ファンド)が12日
現在でUSENの発行済み株式総数の5.21%を取得していた
ことが19日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は77億7624万円で、保有目的は「純投資」として
いる。村上ファンドによるUSEN株の大量保有が明らかになっ
たのは初めて。

USENは「コメントを控えたい」としているが、同ファンドが
筆頭株主の宇野康秀社長や信託銀行などに次ぎ、4、5番目の大
株主となったことで、ライブドア買収計画などにも影響を与える
可能性がある。
</p>
</div>

<div class="scroll-sample">
<p>
村上世彰氏率いる投資ファンド(通称・村上ファンド)が12日
現在でUSENの発行済み株式総数の5.21%を取得していた
ことが19日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は77億7624万円で、保有目的は「純投資」として
いる。村上ファンドによるUSEN株の大量保有が明らかになっ
たのは初めて。

USENは「コメントを控えたい」としているが、同ファンドが
筆頭株主の宇野康秀社長や信託銀行などに次ぎ、4、5番目の大
株主となったことで、ライブドア買収計画などにも影響を与える
可能性がある。
</p>
</div>

<div class="auto-sample">
<p>
村上世彰氏率いる投資ファンド(通称・村上ファンド)が12日
現在でUSENの発行済み株式総数の5.21%を取得していた
ことが19日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は77億7624万円で、保有目的は「純投資」として
いる。村上ファンドによるUSEN株の大量保有が明らかになっ
たのは初めて。

USENは「コメントを控えたい」としているが、同ファンドが
筆頭株主の宇野康秀社長や信託銀行などに次ぎ、4、5番目の大
株主となったことで、ライブドア買収計画などにも影響を与える
可能性がある。
</p>
</div>

</body>
</html>

sample3-1.css

@charset "Shift_Jis";

p{
white-space:pre;
}

div{
width:200px;
height:120px;
background:#eeeeee;
margin:10px;
}

div.visible-sample{
overflow:visible;
}

div.hidden-sample{
overflow:hidden;
}

div.scroll-sample{
overflow:scroll;
}

div.auto-sample{
overflow:auto;
}

実行結果は下記の通りです。

overflow指定のサンプル

HTMLページ内の好きな場所にスクロールバー付きの領域を作るのに便利なプロパティかと思います。

( Written by Tatsuo Ikura )