WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

rubyタグの使い方

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

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",
    "MS P明朝",
    "MS 明朝",
    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>

今回はこれにCSS3アニメーションを追加してみましょう