ルビの付け方〜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が必要なのでは無いかと思います。

ひとまず今日はこの辺で。