文字にルビをふる（ホームページは難しくない）

難しくて読めない漢字や英語の綴りに　ふりがなをふって表示させることができます
これを　「ルビをふる」　といいます

【例】

私は　漢字が苦手です。薔薇 ( ばら )って書けますか？

私は Los Angeles ( ロザンゼルス )　に友人がいます

HTMLソースは　こんな感じになっています

<ruby>
私は　漢字が苦手です。
　<rb>薔薇</rb>
　　<rp>(</rp>
　　<rt>ばら</rt>
　　<rp>)</rp>　
って書けますか？
</ruby>

<ruby>　～　</ruby>　　この範囲が　ルビの対象になります
<rb>　～　</rb>　　　　この範囲が　ふりがなをつけたい文字
<rt>　～　</rt> 　　　　この範囲が　ふりがなになります
<rp>　～　</rp>　　　　この範囲が　未対応のブラウザのためにテキストを表示します

ルビが見えてない方のために　画像にしてみました

◆◇◆　ブラウザがルビに非対応の場合　◆◇◆

ブラウザによっては　このタグは使えないことがあります
そこで　<rp>　～　</rp>　のタグを入れて　テキスト表示させることで
これがふりがなですよ　というのを解りやすくすることができます

私は漢字が苦手です　薔薇（ばら）　って書けますか？

では　<rp>　～　</rp>　のブラウザ非対応用のタグを
使わなかった場合を見てみましょう

<ruby>
私は　漢字が苦手です。
　 <rb>薔薇</rb>
　<rt>ばら</rt>
って書けますか？
</ruby>

こうなりますね
すると　ルビ非対応のブラウザは　下のように表示します

私は漢字が苦手です　薔薇ばらって書けますか？

これだと　せっかくふりがなをいれても　意味不明になってしまいますね
そこで　あえて　「（」と　「）」　というテキストを入れ込んであげるわけです

<rp>(</rp><rt>ばら</rt><rp>)</rp>

（　　）　の間にふりがなを入れることで

私は漢字が苦手です　薔薇（ばら）　って書けますか？

こうなります
これだと　（　）の間に入っている文字は　ふりがなである
ということが一目で解ってもらえますね

こちらも　画像にしておきますね