IE8が対応したCSS 3の機能:ボックスサイズの算出とルビ関連の機能

エ・ビスコム・テック・ラボ
2009-06-19 14:11:01
  • このエントリーをはてなブックマークに追加

 今回からInternet Explorer 8が対応しているCSS 3の機能のうち、W3Cの草案(Working Draft)や勧告候補(Candidate Recommendation)に採用されているプロパティについてまとめていきたい。

 CSS 3のサポートに関しては周回遅れ状態のIEだが、他のブラウザにおけるサポートが進むほど、最終的なページ制作で利用するかどうかの判断基準はIEでサポートされたかどうかということになるだろう。CSS 3のどのプロパティの実用化が進むかはIEのサポート次第ということになり、そういう意味では周回遅れでもCSS 3の主導権はIEが握っていると言えるかもしれない。

 今回は、IE8が新規にサポートしたbox-sizingプロパティと、古いIEでもサポートされていたルビ関連の機能を紹介する。

ボックスサイズの算出に関する機能

 「今回のリリースはCSS 2.1への対応がメインで、CSS 3への対応はない」としていたIE8が新規にサポートしたCSS 3のプロパティがbox-sizingだ。CSS 3の勧告候補「Basic User Interface Module」に採用されており、「-ms-」をつけずに記述する。

 box-sizingはボックスサイズの算出方法を指定するプロパティで、横幅や高さに罫線の太さやパディングを含めるかどうかを指定する。罫線やパディングを含めるように指定すると、古いブラウザやQuirksモード(互換モード)での算出方法と同じになるため、下位互換を確保するのに利用することも可能だ。

 たとえば、次のサンプル1ではボックスの横幅を300ピクセル、罫線の太さを30ピクセル、パディングを30ピクセルに指定している。このとき、box-sizingプロパティを利用して、上のボックスの横幅には罫線の太さやパディングを含まないように、下のボックスには含むように指定している。

サンプル1(画像をクリックすると拡大します) サンプル1(画像をクリックすると拡大します)
div{
width: 300px;
border: solid 30px #ffaa00;
padding: 30px;
background-color: #ffff00;
margin: 20px auto;
}

div#content{
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}

div#border{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
ブラウザで表示を確認する

 box-sizingプロパティにはFirefox、Safari、Google Chrome、Operaも対応しており、IE8が対応したことで主要なブラウザで一通り利用できるようになった。なお、Firefox、Safari、Google Chromeに対応する場合、ベンダープレフィックスをつける形で-moz-box-sizingや、-webkit-box-sizingと記述する。

 box-sizingプロパティについて詳しくは「box-sizingで横幅の算出方法を指定する」にまとめている。参照先の原稿を執筆した時点ではIE8がベータ版だったために「-ms-」を付加する形で記述しているが、正式版では付加しないので注意してほしい。

  • 新着記事
  • 特集
  • ブログ