Web制作ウェブマジック » 配置指定

min-width：最小幅指定

Web Magic — Tue, 28 Oct 2008 04:27:32 +0000

min-widthプロパティは要素の最大の横幅を設定。IE6以前のバージョンは未対応な点に注意。

プロパティ: min-width
値: em | px | %
対象: すべての要素(tableは除く)
継承の有無: なし

通常は最小幅[max-width]と同時指定します。






---- CSS ----
#box {
  min-width: 700px;
  max-width: 900px;
}

IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。

IE独自拡張スクリプトを記述

#box {
  min-width: 700px;
  max-width: 900px;
  width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%");
  position: relative;
}

IE用CSSファイルを読み込む

max-widthプロパティ

min-widthプロパティは要素の最大の横幅を設定。

プロパティ: max-width
値: em | px | %
対象: すべての要素(tableは除く)
継承の有無: なし

max-width：最大幅指定

Web Magic — Tue, 28 Oct 2008 04:23:23 +0000

max-widthプロパティは要素の最大の横幅を設定。IE6以前のバージョンは未対応な点に注意。

プロパティ: max-width
値: em | px | %
対象: すべての要素(tableは除く)
継承の有無: なし

通常は最小幅[min-width]と同時指定します。






---- CSS ----
#box {
  min-width: 700px;
  max-width: 900px;
}

IE6以前のブラウザ用にCSSファイルを作成するなどの対処が必要。

IE独自拡張スクリプトを記述

#box {
  min-width: 700px;
  max-width: 900px;
  width: expression(document.body.clientWidth < 701? "700px":document.body.clientWidth > 901? "900px" : "100%");
  position: relative;
}

IE用CSSファイルを読み込む

min-widthプロパティ

min-widthプロパティは要素の最小の横幅を設定。

プロパティ: min-width
値: em | px | %
対象: すべての要素(tableは除く)
継承の有無: なし

clearfix：floatの解除

Web Magic — Tue, 28 Oct 2008 03:26:47 +0000

親ボックス内でfloatを解除する子ボックス[#footer{clear:both;}など]を設けない場合のfloat解除方法。

親ボックス内でfloatを解除しなかった場合、背景画像が表示されない、或いは親ボックスの下まで表示されない場合などに有効だが、基本的には親ボックス内でfloatを解除した方がbetter。





---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }
#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }





---- CSS ----
#box { width: 700px; margin: 0 auto; background: #******; }

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

 .clearfix { display: inline-block; } /* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
 .clearfix { display: block; } /* End hide from IE-mac */

#box-a { width: 500px; float: left; }
#box-b { width: 200px; float: right; }

参考：Clearing a float container without source markup

和訳：構造のマークアップなしでフロートをクリアする方法

とても参考になる記事：clearfixの決定版を作る－モダンブラウザ編－

z-index：要素の重なり

Web Magic — Wed, 25 Jun 2008 02:55:36 +0000

プロパティ: z-index
値: 数値
対象: position指定要素
継承の有無: なし

clear：回り込み解除

Web Magic — Wed, 25 Jun 2008 02:47:23 +0000

プロパティ

clear

値

キーワード(下記参照)

left | right | both | none

対象

ブロックレベル要素

継承の有無

なし

float：配置指定

Web Magic — Wed, 25 Jun 2008 02:40:52 +0000

プロパティ

float

値

キーワード(下記参照)

left | right | none

対象

すべての要素

継承の有無

なし

position：配置指定

Web Magic — Wed, 25 Jun 2008 02:30:51 +0000

プロパティ

position

値

キーワード(下記参照)

static | relative | absolute | fixed

対象

すべての要素

継承の有無

なし

static | 静的（デフォルト）

relative | 相対配置（続くボックスに影響あり）

absolute | 絶対配置（続くボックスに影響を与えない）

fixed | 固定

Web制作 ウェブマジック » 配置指定

min-width：最小幅指定

max-widthプロパティ

max-width：最大幅指定

min-widthプロパティ

clearfix：floatの解除

z-index：要素の重なり

clear：回り込み解除

float：配置指定

position：配置指定

Web制作ウェブマジック » 配置指定