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

MTMLで縦書きとルビを使う

rubyタグ

rubyは全てのブラウザが正式対応しています。

縦書き

Firefoxは対応していて、ChromeSafariIEはベンダープレフィックスが必要です。縦書きには「writing-modeプロパティ」を使用します。

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

 

ゴシック体での指定
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
font-weight: 500;
明朝体での指定
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", serif;

 

百人一首の77番目を使って縦書き+ルビを使用

HTML+CSS

<!DOCTYPE HTML>
<html lang ="ja">
<head>
<meta charset="utf-8">
<title>HTML縦書きルビの使い方</title>
<style>
body {
  margin: 0;
}
div {
  width: 300px;
  margin: 0 auto;
}
p {
  -webkit-writing-mode: vertical-rl; /*ChromeSafari用のベンダープレフィックス*/
  -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/
  writing-mode: vertical-rl; /*Firefox用はベンダープレフィックス無し*/
  font-size: 24px;
  line-height:2em;
  width: 240px;
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-top:20px;
}
p.name {
  width: 44px;
  margin: -24px 0 0 -30px;
}
p rt {
  color: #F00;
  font-size: 5px;
}
</style>
</head>

<body>
<div>
<p><ruby>瀬<rt>せ</rt></ruby>をはやみ<br><ruby>岩<rt>いわ</rt></ruby>にせかるる<br><ruby>滝川<rt>たきかわ</rt></ruby>の<br>われても<ruby>末<rt>すえ</rt></ruby>に<br><ruby>逢<rt>あ</rt></ruby>はむとぞ<ruby>思<rt>おも</rt></ruby>ふ</p>
<p class="name">崇徳院</p>
</div>
</body>
</html>

結果表示

f:id:develog:20161002215509p:plain