【HTML】テキストにふりがな（ルビ）を振る表示方法

ハシビィくん

Webサイトでどうしてもふりがなを振りたい漢字があるっす！振り仮名（ふりがな）みたいなのは嫌っす。

カピーさん

言わんとしてることは分かったぞ。それならHTMLで実現できるから、早速解説していくぞ。

テキストにふりがなを振った（付けた）完成系

田舎暮らしには暗黙あんもくの了解が存在する。

読み方が難しい漢字にきちんとふりがなが表示されています。

本サイトはWordPressサイトになりますので、「カスタムHTML」を使用しております。

HTMLでふりがなを振る方法

ふりがなを振るには、<ruby>と<rt>の2種類のタグを使います。以下は、サンプルです。

<ruby>日本<rt>にほん</rt></ruby>

CSSを追加で入力する必要なく、基本的な形で「ふりがな」が表示されます。ふりがなのサイズなどを調整する方法は後述いたします。

<ruby>と<rt>を使った「ふりがな」は主要なブラウザに対応しております。

1文字ごとにルビを振る方法

単語1文字ごとにルビを振りたい場合も考えられるので、今回は先ほど「日本」を使って紹介していきたいと思います。

<ruby>日<rt>に</rt>本<rt>ほん</rt></ruby>

先ほどの方法と比べるとふりがなが振られている位置が微妙に違っているのが分かると思います。単語によっては、単語に対してふりがなが長くなってしまうなんてときに使い分けるとバランスが取りやすくなります。

ふりがなの文字サイズを変更

ふりがな部分の文字サイズを変更したい際には、CSSで変更することができます。

rt {
  font-size: 0.5em; /* 文字サイズを大きく */
}

一部のふりがなだけ文字サイズを変更した際には、クラス名を指定すれば個別に調整も可能です。

縦書きにふりがなを振りたい場合

.furigana_tategaki{
writing-mode: vertical-rl;
ruby-position : over;
}

.furigana_tategaki ruby {
writing-mode:vertical-rl
}

基本のCSSはこちらになりますが、テキストによってはサイズなどの調整は環境に合わせていただく必要があります。

まとめ：テキストにふりがな（ルビ）を振る表示方法

一般的にはふりがなを使っているサイトは少ない傾向ですが、取り扱っている情報によっては一般的には読まれにくい漢字を使うという業界もあります。

求人を募っているサイトやペルソナによっては、ふりがなを適度に使う方がユーザーライクかつ情報が正しく伝えられるようになります。