今回は【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>
の書き方を守りましょう。
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で変更が可能になります。
書き方は以下のようになります。
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby>を勉強しましょう。
/*--CSS--*/
rt {
font-size: 0.8em; /*--文字サイズを変更--*/
color: red; /*--文字色を変更--*/
}
まとめ
今回はこれで以上です。
- POINT
-
ruby
要素とは、、テキストにふりがなを振る際に使用します。 -
<rb>ルビを振る対象となるテキスト</rb>
の書き方を守りましょう。 -
<rt>ふりがな</rt>
の書き方を守りましょう。 - CSSで、文字色や、サイズ、フォントの種類の変更が可能になります。
- 一部のブラウザではうまく表示されまい恐れがあります。
Chrome | Safari | Firefox | IE | Edge |
---|
| | | | |
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事