読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

縦書きとルビの使い方

HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。(2015年8月1日現在、Firefoxの最新版は39)
このため、IEChromeSafariFirefoxの主要4ブラウザーで表示が出来るようになりました。今後の為にrubyタグの使い方をしっかりと覚えておきましょう。
http://yachin29.hatenablog.com/entry/2015/05/14/001720yachin29.hatenablog.com




rubyタグ対応前のFirefox

f:id:yachin29:20150513235308j:plain



rubyタグ対応後のFirefox(Ver.38以降)
f:id:yachin29:20150514000127j:plain



授業ではrubyタグに加えて、「writing-modeプロパティ」を使用し、縦書きにします。2015年12月現在、Firefoxも含めて、IEChromeSafariと主要ブラウザー全てに対応しているので、積極的に使っていきましょう。またWebkit系とIEは共にベンダープレフィックスが必要なので、Firefoxには必要ないのでそちらも注意が必要です。
この機会に明朝体に最適化されたfont-familyの指定もしっかり覚えておきましょう。

p {
  -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/
  -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/
  writing-mode: vertical-rl; /*Firefox用はベンダープレフィックス無し*/
}


f:id:yachin29:20150801101806p:plain