見出し画像

継続は力なり#3

ルビ(続きからです)

<p>
自転車で<ruby>濃昼<rt>ごきびる</rt></ruby>海水浴場に行きました。
</p>

ruby要素に対応していないものもある
そこで用いられるのが「rp要素」
「rp要素」→ふりがなを( )の中に入れて表示させるための専門要素
例・濃昼(ごきびる)

rp要素はふりがなの直前と直後に配置する
前rpには「( 」を、後rpには「 )」をつける

※ruby要素に対応しているブラウザには、rp要素は表示されない

<ruby>
濃昼
<rp>(</rp>
<rt>ごきびる</rt>
<rp>)</rp>
</ruby>

この様に入力すると、
ルビ対応だと
上記の「sample:0510:index.html」の様になり

ルビに対応してない場合

画像1

こうなる

ruby要素内に
「ふりがなをふるテキスト+rp要素+rt要素+rp要素」
を複数入れられる

「ふりがなをふるテキスト」はrb要素としてマークアップできる

<ruby>
<rb>濃</rb>
<rp>(</rp)
<rt>ごき</rt>
<rp>)</rp>
<rb>昼</rb>
<rp>(</rp>
<rt>びる</rt>
<rp)</rp>
</ruby>


今回のサンプルでは違いが分かりませんが
要するに、細かくそれぞれにふりがなをふれる

ルビ対応なしだと分かりやすい

画像2

こうなる