- 関連プロパティ
水平方向に値として[auto]を使用した場合
'width'、'margin-left'、'margin-right'(簡略化プロパティ'margin'でも指定可)、'left'、'right'。この5つのプロパティには[auto]を使う事が出来ます。ここでは、どの状況でどのプロパティを[auto]にすると、どのように処理されるのかを説明します。
| left | margin-left | width | margin-right | right |
|---|---|---|---|---|
| auto | 0 | auto | 0 | auto |
- 非置換インライン要素の場合
- 'width'は効果を持ちません。'left'、'right'、'margin-left'、'margin-right'の値が[auto]なら、その値は"0"として扱われます。
- 置換インライン要素、置換フロート要素の場合
- 'left'、'right'、'margin-left'、'margin-right'の値が[auto]なら、その値は"0"として扱われます。'width'の値が[auto]なら、その値として内在寸法が使用されます。ただし、縦横比は保存されます。
- 非置換ブロック要素の場合
- 'left'、'right'の値が[auto]なら、その値は"0"として扱われます。その他のプロパティについては、以下の等式が常に成立する必要があります。
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = コンテナブロックの幅
- 3つのプロパティすべてに、[auto]以外の値を指定してある場合
- これらのプロパティのうち1つは、指定された値とは異なる値を採る必要があります。 'direction'の値が'ltr'なら、'margin-right'の値を無視し、上の等式を満たすような値にします。'rtl'なら、'margin-left'が同様の処理を受けます。
- 'width'の値が[auto]の場合
- 'width'以外の[auto]は"0"として扱われます。'width'の値は上の等式から導き出します。
- 'margin-left'と'margin-right'のうち、どちらかが[auto]の場合
- そのプロパティに採用する値を上の等式から導き出します。
- 'margin-left'と'margin-right'の値が両方とも[auto]の場合
- 上の等式から導き出される値を両者で等分します。
- 置換ブロック要素の場合
- 'left'、'right'の値が[auto]なら、その値は"0"として扱われます。'width'の値が[auto]なら、その値として内在寸法が使用されます。ただし、縦横比は保存されます。
- 3つのプロパティすべてに、[auto]以外の値を指定してある場合(「制限しすぎ(over-constrained)」の状態)
- これらのプロパティのうち1つは、指定された値とは異なる値を採る必要があります。 'direction'の値が'ltr'なら、'margin-right'の値を無視し、上の等式を満たすような値を採ります。 'rtl'なら、'margin-left'が同様の処理を受けます。
※製作者の独断により補充 - 'margin-left'と'margin-right'のうち、どちらかが[auto]の場合
- そのプロパティに採用する値を上の等式から導き出します。
- 'margin-left'と'margin-right'の値が両方とも[auto]の場合
- 上の等式から導き出される値を両者で等分します。
- 非置換フロート要素の場合
- 'left'、'right'、'width'、'margin-left'、'margin-right'の値が[auto]なら、その値は"0"として扱われます。
- 絶対配置される非置換要素の場合
- 以下の等式が常に成立する必要があります。
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = コンテナブロックの幅
以下の順で[auto]を処理していきます。
- 'left'の値が[auto]の場合
- 当該要素の'position'の値を[static]と仮定した時に、その要素が生成するボックスを仮定ボックスと呼びます。その仮定ボックスの左外辺からコンテナブロック左辺までの距離を、'left'の値として採用します。
- 'width'の値が[auto]であり、且つ'right'の値が[auto]の場合
- 'right'の値を"0"として扱います。
- この時点でまだ'right'、'width'いずれかの値が[auto]のままであり、且つ'margin-left'又は/及び'margin-right'の値が[auto]の場合
- そ(れら)のマージンの値は"0"として扱われます。
- この時点でまだ'margin-left'と'margin-right'の値が両方とも[auto]のままの場合
- 上の等式から導き出される値を両者で等分します。
- この時点でまだ[auto]という値が1つだけ残っている場合
- そのプロパティについて上の等式を解きます。
- 5つのプロパティすべてに[auto]以外の値を指定してある場合
- 'right'の値を無視します。そして、その無視したプロパティについて上の等式を解きます。
- 絶対配置される置換要素の場合
- 上記の等式を利用します。以下の順で[auto]を処理していきます。
- 'width'の値が[auto]の場合
- 'width'の値として内在寸法の幅を採用します。ただし、縦横比は保存します。
- 'left'の値が[auto]の場合
- 当該要素の'position'の値を[static]と仮定した時に、その要素が生成するボックスを仮定ボックスと呼ぶ事にします。その仮定ボックスの左外辺から、コンテナブロック左辺までの距離を'left'の値として採用します。
- この時点でまだ'right'の値が[auto]のままであり、且つ'margin-left'又は/及び'margin-right'の値が[auto]の場合
- そのマージンの値を"0"として扱います。
- この時点でまだ'margin-left'と'margin-right'の値が両方とも[auto]のままの場合
- 上の等式から導き出される値を両者で等分します。
- この時点でまだ[auto]という値が1つだけ残っている場合
- そのプロパティについて上の等式を解きます。
- 'width'以外の4つのプロパティすべてに[auto]以外の値を指定してある場合
- 'right'の値を無視します。そして、その無視したプロパティについて上の等式を解きます。
- 問題点
-
- 画像の縦横比が保存されません(CSS1では保存しました)。この点は正誤表で訂正されました。
- ドロップキャップが出来ません。この点は直ぐにでも改善されると思います。
- CSS1とCSS2の相違点
-
- CSS2ではpositionの導入に伴い、大幅に説明が拡張されました。
- 非置換フロート要素のデフォルト幅が指定されました。