ホームページ作成・基礎講座・HTML・CSS・javascript・SEO対策

超初心者でも簡単にできるホームページ作成HTML基礎講座 EasyStudyHTML TOP

ホームページ作成 HTML基礎講座 rubyタグ rtタグ rpタグ

ホームページ作成・HTML基礎・スタイルシート(CSS)・javascript・SEO対策



ruby,rt,rpタグ:ふりがな(ルビ)を付与する 携帯リストマーク clear.gif
【解説】
文字にふりがな(振り仮名)を付与します。
<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>
pcリストマークサンプル表示

ページトップへ
TOP | 利用規約(免責) | お問合せ

Agora