シュウ

今回は【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!
の解説になります！

こんな方に読んでほしい

• HTMLを学び始めた方へ
• HTMLについて学びたい方へ
• 今回はruby要素(ルビ、ふりがな)について解説しております。

例として、「漢字かんじ」にルビを振ってみました。
ruby要素とは、テキストにふりがなを振る際に使用します。

Chrome	Safari	Firefox	IE	Edge

ruby要素について

ruby要素とは、テキストにふりがなを振る際に使用します。
rubyでルビを振る際には、rb、rt、rpを同時に使用することでより詳細に示すことができます。

下記の解説は一番シンプルな記述方法になります。
書き方は以下のようになります。

<ruby>漢字<rt>かんじ</rt></ruby>を勉強しましょう。

対象を指定する記述方法

rubyで全体を囲み、<rb>ルビを振る対象となるテキスト</rb>を入れ、rtの中にふりがなを書きます。
対象テキストとルビを関連付けることができます。

<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>を勉強しましょう。

1文字ごとにルビを振る方法

上記では、rtを指定し、「漢字⇔かんじ」の記述をしましたが、1文字ごとにルビを振ることも可能になります。

その際には、rt要素を文字間で使います。
rt要素を複数使うことで、「漢字」を「かん」 + 「じ」に分け、明確に伝えることができます。
必ず、<rt>ふりがな</rt>の書き方を守りましょう。

例：○ <ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>を勉強しましょう。
例：× <ruby>漢<rt>かん<rt>字<rt>じ<rt></ruby>を勉強しましょう。

<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby>を勉強しましょう。

ポイント！
改行を入れると理解しやすいですが、実際にブラウザで見ると、半角スペースや改行が入ってしまう恐れがあるので注意が必要です。

対象外のブラウザでは(括弧)で代用する

rubyに対応していないブラウザが一部あるため、その際には、rpタグで代用します。
rpタグを使うことで、対象外のブラウザのみ(括弧)が表示されます。

<ruby>漢<rp> （</rp><rt>かん</rt><rp>） </rp>字<rp> （</rp><rt>じ</rt><rp>） </rp></ruby>を勉強しましょう。

CSSで整える

ルビの文字色や、サイズ、フォントの種類をCSSで変更が可能になります。
書き方は以下のようになります。

<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>を勉強しましょう。

/*--CSS--*/
rt {
	font-size: 0.8em; /*--文字サイズを変更--*/
	color: red; /*--文字色を変更--*/
}

まとめ

今回はこれで以上です。

Chrome	Safari	Firefox	IE	Edge

< 前の記事

【HTML】kbd要素の使い方、キーボードのキーを表す要素!

次の記事 >

【CSS】text-overflowの使い方、テキストの省略表示を示す!