ルビの付け方〜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>要素が出て来ました。

これは、単語ひとまとまりではなく、１文字ずつわかりやすくルビをふりたい場合に使います。

こうすることで、合言葉あいことばから、合言葉あいことばにし分けることができます。

省略形

これは次のように省略できます。

<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が必要なのでは無いかと思います。

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

サイト制作、SEO<ruby>,html5