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

エ・ビスコム・テック・ラボ
2009-06-19 14:11:01
IE8のCSS 3対応について、今回は新規にサポートしたbox-sizingプロパティと、古いIEでもサポートされていたルビ関連の機能を紹介する。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

ルビに関する機能

　IE8はCSS 3のルビ（ふりがな）に関する以下のプロパティをサポートしている。これらはIEがバージョン5の時代からサポートしていたものだ。元々はIEの独自拡張だったが、現在はCSS 3の勧告候補（Candidate Recommendation）「Ruby Module」に採用されていることから、IE8においても「-ms-」をつけずに利用する。

IE8が対応しているCSS 3のルビに関する機能
プロパティ昨日
ruby-alignルビとルビをつけたテキストの揃え方を指定する
ruby-positionルビの表示位置を指定する
ruby-overhangテキストからはみ出したルビの表示方法を指定する

　ただし、ruby-positionとruby-overhangプロパティについては、CSS 3の勧告候補で定義された値とIEがサポートしている値が異なっており、規格に従って利用することができない状態となっている。

　ruby-alignプロパティについては、IEがサポートした値がCSS 3の勧告候補にも採用されており、次のように指定することが可能だ。サンプル2では、左のテキストのルビは中央揃えで、右のテキストのルビは均等割りで揃えるように指定している。

サンプル2 サンプル2 
#text01{
ruby-align: center;
}

#text02{
ruby-align: distribute-space;
}


百舌
もず



百舌
もず
※ブラウザで表示を確認する

　次回は、IE8が対応しているCSS 3の改行や行揃え、オーバーフローに関する機能を紹介する。

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