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切り抜き表示(クリッピング)

floatフロート(浮動)の指定

プロパティの値left | right | none | inherit
初期値none
対象要素全要素
継承しない
%無効
メディアvisual
W3C Ref.CSS2.1CSS3

プロパティの書式と機能

floatプロパティは、指定した要素の左右へのフロート(浮動)を指定します。段組み等のレイアウトには欠かすことのできないプロパティです。フロートの配置については複雑な規則性がありますが、挙動を感覚的に掴む事が理解への早道です。

プロパティの書式機能
float: left左にフロート
float: right右にフロート
float: none通常フローに基づく要素の配置(指定しない場合と同じ)
float: inherit継承

EXAMPLE

通常、ブロックはこのように縦方向に並べられていきます。

Header
Box1
Box2
Box3
Footer

Box1~Box3にそれぞれwidthプロパティを追加し、幅を指定します。
heightプロパティで高さも指定できますが、ここでは指定していません。

Header
Box1
	width:30%
Box2
	width:40%
Box3
	width:30%
Footer

Box1~Box3にそれぞれfloatプロパティを追加し、フロート方向を指定します。
同時に、Footerにはclearプロパティを追加してフロートを解除しています。

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