Firefox 3が対応したdisplayプロパティの値（1）
今回はFirefox 3のdisplayプロパティの値を検証していこう。
Firefox 3は、displayプロパティの値である「inline-block」と「inline-table」に対応した。これで、CSS 2.1で定義されたdisplayプロパティの値に一通り対応したことになる。そこで今回は、displayプロパティの基本と「inline-block」について紹介していきたい。また、SafariやOpera、Internet Explorerの対応状況も紹介する。
displayプロパティと基本的なボックスの種類
displayはボックスの種類を指定するプロパティだ。まずは、基本的なボックスの種類を再確認しておこう。
HTML/XHTMLではタグでマークアップした部分が四角形のボックスとして扱われる。ボックスにはいくつかの種類があり、タグごとに標準でどのボックスになるかが定義されている。
基本となるボックスの種類は「block（ブロック）」と「inline（インライン）」の2種類。たとえば、<div>や<p>でマークアップした部分はblockボックス、<span>や<a>でマークアップした部分はinlineボックスとなる。
たとえば、<div>と<span>の表示を比べると以下のようになる。ここではボックスの範囲をわかりやすくするため、<div>の背景を黄緑色に、<span>の背景をオレンジ色に設定した。すると、<div>で構成されるblockボックスは横幅いっぱいの大きさになるが、<span>で構成されるinlineボックスはコンテンツの大きさになることがわかる。また、blockボックスは1行ずつ独立して表示されるが、inlineボックスは横に並んで表示される。
blockボックス（黄緑色）とinlineボックス（オレンジ色）
div {
background-color: #aaff00;
}
span {
background-color: #ffaa00
}
<body> <div>DIVでマークアップ</div> <div>DIVでマークアップ</div> <span>SPANでマークアップ</span> <span>SPANでマークアップ</span> </body>
※ブラウザで表示を確認する
ここでdisplayプロパティを利用すると、<div>や<span>で構成されるボックスの種類を変えることができる。次のように指定すると、<div>をinlineボックスに、<span>をblockボックスに変えることが可能だ。
<div>と<span>のボックスの種類を逆にしたもの
div {
display: inline;
background-color: #aaff00;
}
span {
display: block;
background-color: #ffaa00
}
※ブラウザで表示を確認する
- コメント（1件）
#1 anonymous
- 2008/12/05 11:56
- 特集: FirefoxとSafariのCSS徹底検証 （66件）
SQLite対応アプリのデータベースファイルを閲覧する
グーグル、「Google Buzz」を発表--Gmailのソーシャル機能を強化
「H.264」ストリーミングのロイヤリティ無料期間が延長
マイクロソフト、「Office 2010」のRC版をリリース- ホワイトペーパー
- 企画特集
御社はまだフリーの転送サービスですか？
利用者の理想を追求した最新レンタルサーバ
新しい視点のレンタルサーバが誕生！
アンケートから見るセキュリティ対策の実態
経営統合後の事業損益構造の見える化を実現
ＤＢのパフォーマンスに困ってませんか？
Xbox Live インディーズゲーム開発の軌跡
身近な業務をCRMが変革！
通販サイトのアクセス集中からの危機を救う
仮想化をダメにするストレージの実態
レガシーアプリケーションの稼働どうしてる？
事例 VMwareでデータセンターをクラウド化
仮想環境のバックアップは難しいのか
アプリケーション仮想化 ３つの課題- 話題のタグ
