SHU BLOG

BLOG NEWS ブログ

TITLE

【HTML】ruby要素の使い方、テキストにルビ(ふりがな)を振ろう!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge

ruby要素について

ruby要素について

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

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

ruby要素について

漢字かんじを勉強しましょう。

<ruby>漢字<rt>かんじ</rt></ruby>を勉強しましょう。
使用できる属性
  • rt要素
    rt〜/rt ルビテキストを示します。
  • rb要素
    rb〜/rb ルビを振る対象となるテキストを示します。
    同じruby要素内のrtと関連付けて表示します。
  • rp要素
    rp〜/rp ルビテキストを示します。
    rubyに対応していないブラウザでは、rtのルビテキストはそのまま表示されますが、
    rpを使用すると、未対応ブラウザの場合は(括弧)を表示します。

対象を指定する記述方法

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

シンプルな記述方法

漢字かんじを勉強しましょう。

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

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

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

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

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

例:○ かんを勉強しましょう。
例:× かんを勉強しましょう。(閉じタグがありません)

例:○ <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で整える

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

CSSで整える

かんを勉強しましょう。
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>を勉強しましょう。
/*--CSS--*/
rt {
	font-size: 0.8em; /*--文字サイズを変更--*/
	color: red; /*--文字色を変更--*/
}

まとめ

今回はこれで以上です。

POINT
  • ruby要素とは、、テキストにふりがなを振る際に使用します。
  • <rb>ルビを振る対象となるテキスト</rb>の書き方を守りましょう。
  • <rt>ふりがな</rt>の書き方を守りましょう。
  • CSSで、文字色や、サイズ、フォントの種類の変更が可能になります。
  • 一部のブラウザではうまく表示されまい恐れがあります。
ChromeChromeSafariSafariFirefoxFirefoxIEIEEdgeEdge
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top