MTMLで縦書きとルビを使う
rubyタグ
rubyは全てのブラウザが正式対応しています。
縦書き
Firefoxは対応していて、ChromeとSafariとIEはベンダープレフィックスが必要です。縦書きには「writing-modeプロパティ」を使用します。
p { -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/ -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/ writing-mode: vertical-rl; /*Firefox用はベンダープレフィックス無し*/ }
ゴシック体での指定
明朝体での指定
百人一首の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; /*ChromeとSafari用のベンダープレフィックス*/
-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>
結果表示
