Simple HTMLHTMLリファレンス

Main Menu

おすすめリンク

Site Info.

CSSプロパティ

HTMLリファレンス

CSSリファレンス

その他の記事

CSSリファレンス インデックス

スポンサーリンク

CSSリファレンス

LAYOUT配置TOPCSSPropertiesLayout

  1. display生成するブロック要素の種類
  2. position要素の配置方法
  3. floatフロート(浮動)の指定
  4. clearフロート(浮動)の解除
  5. visibility要素の表示/非表示
  6. top上辺からの距離
  7. right右辺からの距離
  8. bottom下辺からの距離
  9. left左辺からの距離
  10. z-indexスタックレベル(重なり順序)の指定
  11. overflow表示領域をはみ出したテキストの表示方法
  12. clip切り抜き表示(クリッピング)

overflow表示領域をはみ出したテキストの表示方法

プロパティの値visible | hidden | scroll | auto | inherit
初期値visible
対象要素非置換のブロックレベル要素、テーブルセル及びインラインブロック要素
継承しない
%無効
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

overflowプロパティは、コンテンツが親要素の領域をはみ出した場合の表示方法を指定します。たとえば、親要素の領域がwidthやheightで固定されている場合に、その領域に収まりきれないコンテンツをそのままはみ出して表示するか、表示せずに隠してしまうか、あるいはボックスサイズを固定してスクロールバーを付けるといった指定が可能です。

EXAMPLE

STEP-1初期状態

コンテンツが親ボックスの中に収まっている状態です。

Header
Box1
	width:30%
	float:left
Box2
	width:40%
	float:left
Box3
	width:30%
	float:right
Footer	clear:both
STEP-2親ボックスのwidthとheightを小さめに固定

overflow: visible(指定無し又は初期値)なので、親ボックスからはみ出したコンテンツはそのまま表示されています。

Header
Box1
	width:12em
	float:left
Box2
	width:19em
	float:left
Box3
	width:12em
	float:right
Footer	clear:both
STEP-3親ボックスにoverflow: hiddenを指定

ボックス内にコンテンツが収まらない場合に、はみ出した分のコンテンツを非表示にします。その場合でもスクロールバーは表示されません。

Header
Box1
	width:12em
	float:left
Box2
	width:19em
	float:left
Box3
	width:12em
	float:right
Footer	clear:both
STEP-4親ボックスにoverflow: scrollを指定

コンテンツの量にかかわらず、縦横のスクロールバーが表示されます。スクロールバーはパディングとボーダーの間に挿入されるため、その分だけコンテンツ領域が狭くなります。

Box1
	width:12em
	float:left
Box2
	width:19em
	float:left
STEP-5親ボックスにoverflow: autoを指定

コンテンツが収まりきれない場合に自動的にスクロールバーが表示されます。
スクロールバーの領域の影響で、フロート位置も若干変わっています。

Header
Box1
	width:12em
	float:left
Box2
	width:19em
	float:left
Box3
	width:12em
	float:right
Footer	clear:both
スポンサーリンク
Copyright (C) 2010 Simple HTML. All Rights Reserved.