 |
ホームページ作成 HTML基礎講座 rubyタグ ｒｔタグ rpタグ
ホームページ作成・HTML基礎・スタイルシート（CSS)・javascript・SEO対策
|
|
■ruby,rt,rpタグ：ふりがな（ルビ）を付与する  |
 |
|
【解説】
文字にふりがな（振り仮名)を付与します。 |
<ruby>（1）<rt>（2）</rt></ruby>
<ruby>（1）<rp>（3）</rp><rt>（2）</rt><rp>（3）</rp></ruby>
（1）ルビをふりたい文字
（2）ルビ文字
（3）<ruby>タグ未対応のブラウザ用表示文字
ルビの表示位置を指定
<ruby style="ruby-position: （1）">・・・</ruby>
（1）表示位置
above:文字の上
inline:文字と同行
ルビの表示位置を揃える
<ruby style="ruby-align: （1）">・・・</ruby>
（1）位置
（left:左揃え,center:中揃え,right:右揃え） |
サンプルソ−ス
<ruby>Easy Study<rt>イージースタディ</rt></ruby>
<ruby>Easy Study<rp>(</rp><rt>イージースタディ</rt><rp>)</rp></ruby>
サンプルソ−ス（表示位置指定）
<ruby style="ruby-position: above">Easy Study<rp>(</rp>
<rt>イージースタディ</rt><rp>)</rp></ruby>
<ruby style="ruby-position: inline">Easy Study<rp>(</rp>
<rt>イージースタディ</rt><rp>)</rp></ruby>
サンプルソ−ス（表示位置揃え）
<ruby style="ruby-align: center">Easy Study<rp>(</rp>
<rt>イージースタディ</rt><rp>)</rp></ruby>
<ruby style="ruby-align: right">Easy Study<rp>(</rp>
<rt>イージースタディ</rt><rp>)</rp></ruby> |
 サンプル表示 |
|
|
|
ページトップへ |