Enable JavaScript in your browser. このウェブサイトはJavaScriptをオンにしてご覧下さい。

HTMLで漢字にふりがな(ルビ)をつける方法

  • 2014年10月28日
  • HTML

HTMLで漢字にふりがな(ルビ)をつける方法

ブログ記事などで漢字にふりがなをつけたくなることがたまにあります。ぼくの場合そんな時はいつも後ろに()をつけて対応しているのですが、実はHTMLでふりがなをつけてくれるタグがあったりします。今回はふりがなをつけるタグ「<ruby>要素」について紹介します。

<ruby>タグとは

<ruby>は、日本語にルビを振ってくれるタグで、使い方はとっても簡単。例をあげたほうが分かりやすいので、読みにくい漢字「魎魅魍魑」で考えていきましょう(読めますか?)。

これは「りょうみもうち」と読みます。意味は分かりません…放心状態の顔。このような「普通読めないよね」っていう漢字が出てきたときにふりがなを振ってないと、読んでる人はとても不愉快です。どの漢字にルビを振るかは書いてる人にゆだねられますが、専門用語などはできるだけ読めるようにしたいものです。

実際にふりがなをつけてみる

ぼくの場合「魎魅魍魑(りょうみもうち)」という風にルビではなく()に読み方を書いてます。理由は特にありませんが、しいてあげれば<ruby>タグの存在を知らなかったからかな…恥ずかしがる顔

そこで初めて漢字にルビを振ってみます。

魎魅魍魑りょうみもうち

どうでしょうか。まぁ()で書いてるのと比べてもさほどデザイン的には変わりはなく感じますね…。でもせっかくそういうタグがあるので、これから使っていこうと思います(もしちゃんと表示されてない場合、対処法は事項で紹介してます)。ちなみにコードは次のように書きます。

<ruby>魎魅魍魑<rt>りょうみもうち</rt></ruby>

<ruby>タグの二つの問題点

<ruby>タグを使うと二つの問題点が想像されます。

  1. 対応してないブラウザがある
  2. line-heightはどうなるのか

未対応ブラウザへの対応策

<ruby>タグはブラウザによっては対応してないものもあるようです。IEとクロームでは問題ないようですがFirefoxでは未対応のようですね。cssではベンダープレフィックス(プリフェックスだったか…?白い目)で対応しますが、<ruby>の場合はもっと簡単です。

<rp>というタグを使えば難なく解決できます。上記のコードの場合、対応してるブラウザならちゃんと上にルビが振らさって表示されますが、未対応のブラウザの場合「魎魅魍魑りょうみもうち」と表示されます。これでは意味が分かりませんよね。

そこで登場するのが<rp>タグです。これは未対応のブラウザの場合に表示する文字を指定するもので、対応してるブラウザでは無視されます。対応されているブラウザでは上にルビが振らさって、未対応のブラウザの場合は「魎魅魍魑(りょうみもうち)」と表示させるようにすればいいのです。

その書き方は

<ruby>魎魅魍魑<rp>(</rp><rt>りょうみもうち</rt><rp>)</rp></ruby>

のようになります。<rp>タグで囲った部分は、対応ブラウザでは表示されませんが未対応の場合には表示され「魎魅魍魑(りょうみもうち)」と表示されます。

line-heightはどうなるのか

ぼくはこのタグを使ったことがないので、どうなるのかはやってみないと分からないわけですが、たぶんルビの振ってある行だけ行間が増えるのではないかと予想します。試にこの辺に「魎魅魍魑りょうみもうち」を書いてみます。

当ブログではルビを振ってもさほど行間は問題ありませんでしたが、もう少し行間を詰めているブログなら表示に違和感が出るかもしれませんね。まぁIEなどは標準で対応してるので極端に変な表示にはならないでしょう。

まとめ

最近「健康系」の集客ブログを作った時に思ったのが「病名って難しい」ということ。とにかく読めない漢字ばっかりなので、このタグを思い出した次第です。ただ、cssで調整したり面倒くさそうなので、やっぱり今まで通り()で対応しようかと思う次第です…驚く顔

もしもドロップシッピングで稼ぐためのブログページトップへ戻る