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

エ・ビスコム・テック・ラボ
2008-04-18 16:12:01
Firefox 3が新対応したwidthプロパティは、少々複雑でもある。表や図でわかりやすく解説しよう。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

　今回は、Firefox 3が新しく対応したwidthプロパティの値を紹介する。まだCSS 3の草案にも掲載されていない値だが、W3Cへの提案は行われており、将来的な草案での採用が考えられる。

widthプロパティに追加された新しい値を使ってみる

　widthは横幅を指定するプロパティだ。現行の標準規格であるCSS 2や2.1、CSS 3の草案「Basic box model」では、widthプロパティで指定できる値は、ピクセルなどによる長さか、％による割合、またはブラウザが自動的に横幅を設定する「auto」というキーワードだけとなっている。

　これに対して、Firefoxのバージョン3では4種類の新しいキーワードの値をサポートした。指定できるキーワードは以下のようになっており、コンテンツの内容などに応じてブラウザが算出する横幅を指定することが可能だ。

Firefox 3で新しく対応したwidthプロパティの値
- widthプロパティの値横幅の大きさ
【A】-moz-max-contentコンテンツが取り得る最大幅（Intrinsic preferred width）
【B】-moz-min-contentコンテンツが取り得る最小幅（Intrinsic minimum width）
【C】-moz-available表示に利用可能な幅
【D】-moz-fit-content内容にフィットさせた幅

　実際にこれらのキーワードで横幅を指定すると、次のような表示になる。ここでは各要素の横幅をわかりやすくするため、背景色を水色に設定している。

Firefox 3での表示。 Firefox 3での表示。 
.sample01{
width: -moz-max-content;
}

.sample02{
width: -moz-min-content;
}

.sample03{
width: -moz-fit-content;
}

.sample04{
width: -moz-available;
}

Hello world. こんにちは。



Hello world. こんにちは。



Hello world. こんにちは。



Hello world. こんにちは。
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ