rubyタグとは?|テキストにルビ(ふりがな)を付けよう

rubyタグとは?|テキストにルビ(ふりがな)を付けよう
リンゴ
博士、テキストにルビ(ふりがな)を付けることってできますか?
読み方が難しい漢字にルビを付けたいんですが…
博士
ルビ付きのテキストは、3つのタグを組み合わせて簡単に作ることができるぞ。
 
 
リンゴ
リンゴ
ブログを書くことが大好きな少年。
世界にたった一つのWordPressテーマを作るため、HTML/CSSについて日々勉強中!
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<ruby>タグとは

 

<ruby>

対応ブラウザInternet Explorer / Firefox / Google Chrome / Safari
分類フロー・コンテンツ / フレージング・コンテンツ / パルパブル・コンテンツ
利用場所フレージング・コンテンツが期待される場所
内容フレージング・コンテンツの後に、rt要素1つ、またはrp要素・rt要素・rp要素の順のグループ、いずれかを1つ以上


 
 
<ruby>タグは、テキストにルビをふる際に使用します。

ルビ付きのテキストは、<ruby>タグ、<rt>タグ、<rp>タグで作成します。
<ruby>タグでルビをふる範囲、<rt>タグでルビのテキスト、<rp>タグでルビのテキストを囲む括弧等の記号をそれぞれ指定します。

ルビとして表示されるテキストは、ルビを付けたいテキストの直後に配置してください。
また、ルビに対応したブラウザでは、<rp>~</rp>の内容は無視されます。
 
 

使用例

 
 

表示例

rubyタグ 表示例
 
 

リンゴ
ルビがあるだけで読みやすさが全然違いますね!
 
 

まとめ

<ruby>タグは、テキストにルビをふる際に使用するタグです。
 
 

博士
<ruby>タグ、<rt>タグ、<rp>タグをセットで覚えておこう。
 
 
HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








rubyタグとは?|テキストにルビ(ふりがな)を付けよう