ルビを振るには - CSS小技集

HTML5 でマークアップされたルビを、CSS 第二水準第一改訂版(CSS 2.1)の範囲だけで実現する方法を考えてみましょう。 この記事では、最も単純なルビの振り方のみを解説しております。 HTML5 で上下に二つのルビを振ったり、一文字毎にルビを振るなどの複雑なルビを実現する方法はHTML5 でのルビのスタイルをご覧下さい。 まずはじめに。 HTML5 では、ルビを実現するため、以下のルビ関連要素を定義しております。 <ruby>要素…ルビ付きテキスト <rt>要素…ルビテキスト <rp>要素…ルビ非対応環境向けのルビを囲む括弧類 W3C が勧告している規格では、他にも幾つかの要素が定義されておりますが、最も単純なルビ付きテキストであれば、上記の三要素だけでマークアップが出来ます。 HTML5 以外でも、XHTML 1.1 にはルビモジュールが定義されており、最も単純なルビテキストであ

[tailtame]

青空文庫用に「.main_text{line-height:2 !important;}」と「rt {top: -0.4em;}」くらいがちょうどいいかなぁ…(｀・ω・´) 他にもあるかもしれないけどまあ。