htmlでルビを振る方法を解説

htmlでルビを振る方法を解説

この記事では、htmlで文字にルビを振る方法を説明します。

 

基本的なルビの振り方

まず、基本的なルビの振り方について説明します。

htmlで文字にルビを振るには、「ruby」タグ・「rt」タグを使います。

以下のように記述すると、文字にルビを振ることが可能です。

<ruby>ルビを振りたい対象の文字<rt>ルビ</rt></ruby>

具体的な記述例を挙げると、読みにくい漢字などにルビを振る場合は、以下のように記述します。

<p>彼女の名前は、<ruby>愛美<rt>めぐみ</rt></ruby>という。一緒に「<ruby>亜米利加<rt>アメリカ</rt></ruby>」という喫茶店でコーヒーを飲んだ。</p>

ブラウザ上の表示

彼女の名前は、愛美めぐみという。一緒に「亜米利加アメリカ」という喫茶店でコーヒーを飲んだ。

他にも、以下のような方法でルビを振ることが可能です。

 

文字ごとにルビを指定する

「rb」タグを使用すると、指定した文字にルビを割り当てて表示することができます。

たとえば、先に挙げた例を「rb」タグを使って以下のように記述することも可能です。

<p>彼女の名前は、<ruby><ruby><rb>愛</rb><rb>美</rb><rt>めぐ</rt><rt>み</rt></ruby>という。</p>

ブラウザ上の表示

彼女の名前は、めぐという。

 

ルビの文字サイズや高さを調整する方法

ルビの文字サイズや高さを変えたい場合は、CSSで調整します。

具体的に例を挙げると、たとえば以下のような文章があるとします。

<p>彼が見掛けた美しい女性は<ruby>Lesley Ann Clarke<rt>レスリー・アン・クラーク</rt></ruby>という名前だった。</p>

ブラウザ上の表示

彼が見掛けた美しい女性はLesley Ann Clarkeレスリー・アン・クラークという名前だった。

上記の「レスリー・アン・クラーク」というルビの文字サイズや間隔を調整する場合は、「rt」タグにスタイルを付けて、以下のように表示されます。

rt {
font-size: 0.6em;
margin-bottom: 3px;
}

ブラウザ上の表示

彼が見掛けた美しい女性はLesley Ann Clarkeレスリー・アン・クラークという名前だった。

 

まとめ

以上、htmlで文字にルビを振る方法について解説しました。

文章の中にある読みにくい漢字などがある場合は、「ruby」タグと「rt」タグを使ってルビを振ることができます。また、「rb」タグを使って文字ごとに割り当ててルビを振ることも可能です。

文字のサイズや表示の位置を変えたい場合には、CSSでfont-sizeを指定するなどして調整することができます。

htmlでコーディングする時だけでなく、WordPressでもエディターのテキストモードで入力すると上記の方法でルビを振ることが可能なので、ブログなどのWebサイトでルビを振りたい箇所がある時には参考にしてみてください。

htmlの書き方カテゴリの最新記事