TOPページ >  文字を修飾する(書体、色、大きさなど...) > ルビ(ふりがな)の表示位置を指定する

ルビ(ふりがな)の表示位置を指定する

ホームページやブログなどのウェブサイトに文字を表示する際には <ruby>タグを使って文字にルビ(ふりがな)を付けてることができますが、この表示位置を指定をすることができます。

<ruby style="ruby-position:ルビの表示位置">~</ruby>

という記述になります。表示位置は、下記の中から指定できます。

キーワードルビの表示位置
above文字の上部
inline文字と同行

サンプルソースです。

<ruby style="ruby-position:above">
爬虫類
<rp>(</rp> <rt>はちゅうるい</rt> <rp>)</rp>
<ruby><br>

<ruby style="ruby-position:inline">
爬虫類
<rp>(</rp> <rt>はちゅうるい</rt> <rp>)</rp>
<ruby>

このソースを、<ruby>タグ対応のブラウザで見ると、次のように表示されます。

ruby_sample
爬虫類 はちゅうるい

一方、未対応のブラウザでは、

爬虫類 ( はちゅうるい )
爬虫類 ( はちゅうるい )

というふうに表示されます。
ruby-position に inline を指定した場合の見え方は、<ruby>タグ未対応のブラウザと同じようになります。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
文字の大きさを指定する(FONTタグ)
文字の修飾方法を指定する
文字を点滅させる
ルビ(ふりがな)の位置揃えを指定する
ルビ(ふりがな)の表示位置を指定する
文字にルビ(ふりがな)を付ける
文章の一部にスタイルを適用する
文字を等幅文字にする
文章の書体、サイズ、行の高さ、スタイルをまとめて指定する
文章の書体を指定する(スタイル指定)
文章の段落を指定する
文字をイタリック/斜体にする
文字の書体を指定する(専用タグ)
文字に下線をつける(アンダーライン)
文字を見え消しにする(取消線)
文字を強調する
文字の太さを指定する
文字を太字にする
上付き/下付き文字にする
文字の色を変える
文字を一段大きく/小さくする
文字の大きさを指定する(スタイル指定)
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス