ルビの付け方〜ruby要素をマスター!
さてさて、明日はHTML5プロフェッショナル認定試験です。というわけでミスドでががーっと詰め込み勉強してきました。寝る前にもガーっとやって寝ます。
休憩がてら記事を書いて更新していこうと思うのですが、試験のことで頭いっぱいで記事のネタもhtml要素しか思いつきませんでした。
本当はwebAPIとかまとめたかったけど時間がね、、(笑)
というわけで今回はルビの振り方をまとめていきます。備忘録です。
ルビとは?
ルビとは、漢字などの読み方を文字の上に小文字で表記したあれです。
ここの段落ではルビを振っています。丁度この様に難しい漢字が出て来ても丁寧な印象ですね。
And
also, it’ll
be
good
for
user
to
add
ruby
on
english
sentence
😉
では実際にタグの付け方をまとめていきます。
<ruby>タグの付け方
いくつかのパターンをまとめておきます。
基本の形
<p>
<ruby>熊猫<rt>シェンマオ</rt></ruby>
</p>
ひとつの単語の文字のまとまりに対してルビをふる時は<ruby>
タグに単語を入れて、その後ろに<rt>
タグでルビを囲みます。<ruby>
タグと<rt>
タグは入れ子構造になっていることに注意してください。
ルビ機能未対応のブラウザ用
<p>
<ruby>熊猫<rp>(</rp><rt>シェンマオ</rt><rp>)</rp></ruby>
</p>
こちらは<rp>
タグが加わりました。
これは、ルビを上に表示することができないブラウザのためのコードで、ルビが<rp>
で挟んだ文字に挟まれて後ろに記述されます。
熊猫(シェンマオ)
<rp>
タグをつけても、もともとルビ機能の対応しているブラウザではそのまま上に振られるのでより親切な振り方をしたい場合はつけておきましょう。
一文字ずつ割り振るルビ
<p>
<ruby>
合<rb>言</rb><rb>葉</rb>
<rt>あい</rt><rt>こと</rt><rt>ば</rt>
</ruby>
</p>
新しく<rb>
要素が出て来ました。
これは、単語ひとまとまりではなく、1文字ずつわかりやすくルビをふりたい場合に使います。
こうすることで、合言葉から、合
省略形
これは次のように省略できます。
<p>
<ruby>合<rb>言<rb>葉<rt>あい<rt>こと<rt>ば</ruby>
</p>
<rb>
タグと<rt>
タグで区切りをつける感覚です。
まって、<rb>がうまくいってない、、
<rb>要素修正版
次のように書くと正しく表示されるようです。
<p>
<ruby>
合<rt>あい</rt><rb>言</rb><rt>こと</rt><rb>葉</rb><rt>ば</rt>
</ruby>
</p>
合
しっかりできましたね。
少し調べてみると、javascriptのruby_enabler2.jsが必要なのでは無いかと思います。
ひとまず今日はこの辺で。
ディスカッション
コメント一覧
まだ、コメントがありません