くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[HTML5]ルビ付き・縦書きテキスト

HTMLでルビをつける

<ruby>香水<rt>こうすい</rt></ruby>

縦書きにする
webkit系とIEのみ Safariは非対応

  -webkit-writing-mode: vertical-rl;

vertical-rl は右から左への順番
vertical-lr は左から右

テキスト

<p><ruby>君<rt>きみ</rt></ruby>が<ruby>行<rt>ゆ</rt></ruby>く<br>
<ruby>道<rt>みち</rt></ruby>の<ruby>長手<rt>ながて</rt></ruby>を<br>
<ruby>繰<rt>く</rt></ruby>り<ruby>畳<rt>たた</rt></ruby>ね<br>
<ruby>焼<rt>や</rt></ruby>き滅ぼさむ<br>
<ruby>天<rt>あま</rt></ruby>の火もがな</p>


f:id:pleasure10501:20150731141037p:plain