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

広告

高さと幅を指定したボックス内に表示しきれないものを格納した場合の処理を指定します。デフォルトでは幅や高さが指定してあっても入りきるように自動的にボックスの大きさが調整されるようになっています。変更する場合には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>
村上世彰氏率いる投資ファンド（通称・村上ファンド）が１２日
現在でＵＳＥＮの発行済み株式総数の５．２１％を取得していた
ことが１９日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は７７億７６２４万円で、保有目的は「純投資」として
いる。村上ファンドによるＵＳＥＮ株の大量保有が明らかになっ
たのは初めて。

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

<div class="hidden-sample">
<p>
村上世彰氏率いる投資ファンド（通称・村上ファンド）が１２日
現在でＵＳＥＮの発行済み株式総数の５．２１％を取得していた
ことが１９日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は７７億７６２４万円で、保有目的は「純投資」として
いる。村上ファンドによるＵＳＥＮ株の大量保有が明らかになっ
たのは初めて。

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

<div class="scroll-sample">
<p>
村上世彰氏率いる投資ファンド（通称・村上ファンド）が１２日
現在でＵＳＥＮの発行済み株式総数の５．２１％を取得していた
ことが１９日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は７７億７６２４万円で、保有目的は「純投資」として
いる。村上ファンドによるＵＳＥＮ株の大量保有が明らかになっ
たのは初めて。

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

<div class="auto-sample">
<p>
村上世彰氏率いる投資ファンド（通称・村上ファンド）が１２日
現在でＵＳＥＮの発行済み株式総数の５．２１％を取得していた
ことが１９日、同ファンドが関東財務局に提出した大量保有報告
書で分かった。
取得資金は７７億７６２４万円で、保有目的は「純投資」として
いる。村上ファンドによるＵＳＥＮ株の大量保有が明らかになっ
たのは初めて。

ＵＳＥＮは「コメントを控えたい」としているが、同ファンドが
筆頭株主の宇野康秀社長や信託銀行などに次ぎ、４、５番目の大
株主となったことで、ライブドア買収計画などにも影響を与える
可能性がある。
</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 )