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

エ・ビスコム・テック・ラボ
2008-04-18 16:12:01
  • このエントリーをはてなブックマークに追加
最新特集【一覧】
アドビ、Photoshopの機能追加を含めCreative Cloudをアップデート
システム担当者がより楽しめる「007 スカイフォール」の見方--MI6が遭遇する手痛いピンチは、こうすれば防げた？
Javaエバンジェリストが語る「JavaOne 2012 San Francisco」の見どころ ～築き上げられる『未来のJavaの姿』～

　今回は、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. こんにちは。
※ブラウザで表示を確認する
  • 新着記事
  • 特集
  • ブログ