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

エ・ビスコム・テック・ラボ
2008/04/18 16:12

Firefox 3が新対応したwidthプロパティは、少々複雑でもある。表や図でわかりやすく解説しよう。

【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)}
表示に利用可能な幅と親要素の幅の関係 表示に利用可能な幅と親要素の幅の関係

　先程のサンプルの場合、親要素となるのは<body>で、<div>には水平方向のマージンやボーダー、パディングは指定していない。そのため、表示に利用可能な幅は<body>と同じ横幅、つまり画面の横幅いっぱいとなる。

　なお、通常フローのブロック要素の横幅を「auto」と指定した場合、横幅は「表示に利用可能な幅」と同じ計算式で算出される。たとえば、次のソースは上の<div>の横幅を「-moz-available」、下の横幅を「auto」と指定したもので、どちらも同じ横幅で表示されることがわかる。

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

.sample02	{
	width: auto;
	}

<div class="sample01">Hello world. こんにちは。</div>

<div class="sample02">Hello world. こんにちは。</div>
※ブラウザで表示を確認する

【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プロパティを利用して絶対配置を行うと、自動的に内容にフィットした横幅で表示される。

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

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

.sample02	{
	position: absolute;
	}

<div class="sample01">Hello world. こんにちは。</div>

<div class="sample02">Hello world. こんにちは。</div>
※ブラウザで表示を確認する
記事の感想やご意見をコメントでお寄せください（CNET_IDログインが必要です）
ログイン パスワードを忘れた方  |  新規登録
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 読者投票
    今、使っているマシンのOSは？

    投票受付期間：2008年6月27日 〜 2008年7月11日
  • » 投票しないで結果だけ見る
  • 話題のタグ
HTML Apache Windows Webアプリケーション開発 Mozilla ブラウザ server 開発環境 XHTML Internet Explorer ライブラリ Adobe Mac OS X 仮想化 Webデザイン イロハ MySQL フレームワーク Google C/C++ Eclipse iPhone Ruby SOA Flash Java オープンソース Opera 小技 iPhone 3G JavaScript Solaris Microsoft Python Off Topic リファレンス PHP Apple Database Tips RIA Leopard Linux iPod touch Safari 入門 Ajax CSS Firefox 3 Firefox
  • 話題のタグを見る »