HTMLとCSSでのルビ
出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2022/05/18 23:47 UTC 版)
XHTML 1.1やHTML5でルビモジュールが導入され、ルビを記述できるようになった。それ以前からInternet Explorerが独自規格で先行実装しており、レンダリングが可能であったが、HTML5での記述ルールとは異なっていた。Mozilla財団が開発しているブラウザ・Mozilla FirefoxをはじめとするGeckoブラウザでも2015年5月に公開されたバージョン「Firefox38」以降は標準機能としてルビがサポートされるようになった。 HTML5での記述ルール ルビを振りたい親字を含む全体をrubyタグで囲み、その中のrtタグをつけた箇所がルビ部分となる。rubyタグの内側でrpタグで囲った部分は、rubyタグをサポートしていない環境で表示するためのタグであり、rubyタグをサポートしている環境では非表示になる。 表意文字である漢字にルビを振る 現在使用しているブラウザで表示した結果 表意文字である漢字（かんじ）にルビを振る ルビに対応していないブラウザでの表示結果（例） 表意文字である漢字（かんじ）にルビを振る ルビに対応しているブラウザでの表示結果（例） かんじ 表意文字である 漢字 にルビを振る 下ルビ（あるいは左ルビ）を使用するような場合は、rubyタグにCSS3のruby-positionのunder（縦書きのときはleft）でルビの表示位置を指定する必要がある。 上ルビと下ルビ（あるいは右ルビと左ルビ）を併用するような場合は、1つのルビタグ内にrtタグを囲む形でrtcタグでグループ化し、複数入れることで1つの親字に複数のルビを振ることができるが、位置については、rtcタグにCSS3のruby-positionのoverおよびunder（縦書きのときはrightとleft）でルビの表示位置を指定する必要がある。
※この「HTMLとCSSでのルビ」の解説は、「ルビ」の解説の一部です。
「HTMLとCSSでのルビ」を含む「ルビ」の記事については、「ルビ」の概要を参照ください。
- HTMLとCSSでのルビのページへのリンク
