ふりがなを振る。

HTMLで、難しい漢字や英単語にふりがなを振りたいな、というときはruby要素を使います。ふりがなという、ちょっとした所ですけれど、こだわりたい時はこだわりたいところ。<ruby>についてまとめます:)。まずは基本的な書き方から。

ふりがなのための要素

仮名がな」とは、難しい漢字や英単語などの読み方を示すために添える文字のこと。そんなふりがなをHTMLで表現するための要素がruby要素です。文字の発音を表記するための注釈を示すために用意された要素なのですね。そして「ルビ」とは、活版印刷用語で、当時ふりがなを表記する際に使われていた活字サイズ(5.5ポイント活字)の呼び名「ruby」が由来だそうで、詳しくは以下のページを参照のこと。

ruby要素の使い方

ひとまず、ruby要素の基本的な書き方は、以下の通り。「漢字」に「かんじ」とふりがなを振りたい時には、下記のように書きます。

<ruby><rb>漢字</rb><rt>かんじ</rt></ruby>

「漢字」の上に「かんじ」が小さく表示されました!
ruby要素の中身は、「漢字」を括るrb要素と、「かんじ」を括るrt要素が並べて入っている、という構造になっています。ふりがな関連の要素の役割はそれぞれ以下の通り。

ruby要素
ふりがなを振る文字とそのふりがなであることを表します。
rb要素
ふりがなが振られる側の文字(以下「ルビベース」と言う)であることを表します。
rt要素
ふりがなの文字(読み方)(以下「ルビテキスト」と言う)であることを表します。

実は、上の記述をぜんぶ書く必要はなくて、いろいろと端折れるようになっています。

まず、「ルビベースの後に、rt要素を続けて書く場合」には、rb要素を端折れることになっています。それから、rb要素とrt要素は、閉じタグを書かなくても良い仕様になっています。
ということで、上のサンプルから、端折れるところを端折ったらば、以下のように書くことができるってわけですね;)

<ruby>漢字<rt>かんじ</ruby>

うん、だいぶんスッキリです:D
それでも、この記事の冒頭の一文すべてにふりがなを振りたいとなったら、下記のように書くことになります。

  1. <ruby>HTML<rt>エイチティーエムエル</ruby>で、<ruby>難<rt>むずか</ruby>しい<ruby>漢字<rt>かんじ</ruby>や<ruby>英単語<rt>えいたんご</ruby>にふりがなを<ruby>振<rt>ふ</ruby>りたいな、というときは<ruby>ruby<rt>ルビ</ruby><ruby>要素<rt>ようそ</ruby>を<ruby>使<rt>つか</ruby>います。

これは大変⁑O
なので、HTMLでふりがなを振ることは滅多になくて、当て字にした箇所とか、敢えてそう読んで欲しい箇所とか、これは読み間違えそうだなと思うものだけに、振るとよいです;)

ページトップへ戻る

一文字ごとにふりがなを振る

前述では、熟語をひとまとめに、ふりがなを振ってましたけれど、漢字ひとつずつにふりがなを振りたいこともあるでしょう。例えば、「紆余曲折」という四字熟語の、漢字一文字ごとにふりがなを振りたいって時には、下記のように書きます。

  1. <ruby>紆<rt>う</rt>余<rt>よ</rt>曲<rt>きょく</rt>折<rt>せつ</rt></ruby>

漢字とふりがなが交互に続くので、それらを隔てるために、rt要素を閉じる必要があるんですね:)

ルビテキストの後を</rt>で閉じてないと、ルビテキストとルビベースがつながって、へんな事になってしまう(上サンプル下段)ので、ちゃんと閉じること:(

ページトップへ戻る

ページトップへ戻る

ページトップへ戻る

まとめ

というわけで、ruby要素の今いちばん旬な書き方は、以下の2タイプに決まり:D(2018.12現在)

ruby要素の中にふりがながひとつだけの場合」には、ルビテキストの手前に<rt>を入れるだけでOK;)

  1. <ruby>紆余曲折<rt>うよきょくせつ</ruby>

ruby要素の中にふりがなが複数ある場合」には、ルビベースとルビテキストを交互に並べて、ルビテキストをrt要素で括ります。…ということは、今のところrb要素はあってないようなもの、という事ですねー、へんなの:/

  1. <ruby>紆<rt>う</rt>余<rt>よ</rt>曲<rt>きょく</rt>折<rt>せつ</rt></ruby>

以上、ruby要素の基本的な書き方についてのまとめでした。最後まで読んでいただきありがとうございました!
次回、ふりがなのスタイルについて!乞うご期待!X)

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください