HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。（2015年8月1日現在、Firefoxの最新版は39）
このため、IE、Chrome、Safari、Firefoxの主要4ブラウザーで表示が出来るようになりました。今後の為にrubyタグの使い方をしっかりと覚えておきましょう。yachin29.hatenablog.com
授業ではrubyタグに加えて、「writing-modeプロパティ」を使用し、縦書きにします。2015年12月現在、Firefoxも含めて、IE、Chrome、Safariと主要ブラウザー全てに対応しているので、積極的に使っていきましょう。またWebkit系とIEは共にベンダープレフィックスが必要なので、Firefoxには必要ないのでそちらも注意が必要です。
この機会に明朝体に最適化されたfont-familyの指定もしっかり覚えておきましょう。
p { -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/ -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/ writing-mode: vertical-rl; /*Firefox用はベンダープレフィックス無し*/ }
index.html
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>rubyタグと縦書き</title> <style> body { background: #D05A6E; } p { font-family: "ヒラギノ明朝 ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; margin: 0 auto; color: #FCFAF2; font-size: 22px; line-height:3; padding: 1em; letter-spacing: 0.15em; -webkit-writing-mode: vertical-rl; /*縦書きにする(右から左)*/ -ms-writing-mode: tb-rl; } </style> </head> <body> <p><ruby>心<rt>こころ</rt></ruby>にも<br> あらでうき<ruby>世<rt>よ</rt></ruby>に<br> ながらえば<br> <ruby>恋<rt>こい</rt>しかるべき</ruby><br> <ruby>夜半<rt>よか</rt></ruby>の<ruby>月<rt>つき</rt></ruby>かな</p> </body> </html>
