Firefox 3が対応するwidthプロパティの新しい値

エ・ビスコム・テック・ラボ
2008-04-18 16:12:01
  • このエントリーをはてなブックマークに追加

【A】【B】コンテンツが取り得る最大幅と最小幅

 HTML/XHTMLタグでマークアップした要素の横幅は、タグ内に記述したコンテンツの分量や構成によって決まる。こうした要素ごとに固有の横幅を「Intrinsic width」と呼ぶ。

 Intrinsic widthのうち、「最大幅(Intrinsic preferred width)」はコンテンツに改行を入れずに表示したときの横幅、「最小幅(Intrinsic minimum width)」は改行可能な個所をすべて改行したときの横幅となっている。

 なお、「Intrinsic minimum width」を算出する場合、英文では単語ごとに改行が入るが、日本語の文章では文字ごとに改行を入れて算出が行われる。

【C】表示に利用可能な幅

 「表示に利用可能な幅」はコンテンツの表示に利用できるエリアの幅のことで、親要素(コンテナブロック)の横幅から水平方向のマージン、ボーダー、パディングの大きさを引いて算出する。計算式で表すと次のようになる。

表示に利用可能な幅=(親要素の幅)−{(margin-left)+(border-left)+(padding-left)+(border-right)+(margin-right)}
表示に利用可能な幅と親要素の幅の関係 表示に利用可能な幅と親要素の幅の関係

 先程のサンプルの場合、親要素となるのはで、

には水平方向のマージンやボーダー、パディングは指定していない。そのため、表示に利用可能な幅はと同じ横幅、つまり画面の横幅いっぱいとなる。

 なお、通常フローのブロック要素の横幅を「auto」と指定した場合、横幅は「表示に利用可能な幅」と同じ計算式で算出される。たとえば、次のソースは上の

の横幅を「-moz-available」、下の横幅を「auto」と指定したもので、どちらも同じ横幅で表示されることがわかる。

Firefox 3の表示 Firefox 3の表示
.sample01{
width: -moz-available;
}

.sample02{
width: auto;
}
Hello world. こんにちは。
Hello world. こんにちは。
ブラウザで表示を確認する

【D】内容にフィットさせた幅

 キーワードを「-moz-fit-content」と指定すると、内容にフィットさせた横幅を指定することが可能だ。「内容にフィットさせた幅」はCSSでは「shrink to fit(フィットさせるために縮める)」と呼ばれ、次のような計算式で算出することができる。

内容にフィットさせた幅=max(min(【A】,【C】),【B】)

 この式では次のようなステップで横幅を求めている。

  1. 【A】Intrinsic preferred widthと【C】表示に利用可能な幅とを比較して、値の小さい方を採用
  2. 1の結果と【B】Intrinsic minimum widthとを比較して、値の大きい方を採用。採用した値が【D】内容にフィットさせた幅となる。

 次の式でも同じ結果を求めることが可能だ。

内容にフィットさせた幅=min(max(【B】,【C】),【A】)

 なお、positionプロパティを利用して絶対配置を行うと、自動的に内容にフィットした横幅で表示される。

 たとえば、次のソースは上の

の横幅を「-moz-fit-content」と指定している。下の
は横幅を指定していないが、「position:absolute」と指定して絶対配置を行っているため、内容にフィットした横幅で表示される。

Firefox 3の表示 Firefox 3の表示
.sample01{
width: -moz-fit-content;
}

.sample02{
position: absolute;
}
Hello world. こんにちは。
Hello world. こんにちは。
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]