【初心者必見】HTMLでのルビの基本の振り方解説

公開日: 2021.08.18
更新日: 2024.01.29
HTMLでのルビの基本の振り方解説

サイト上でルビを振りたいけどやり方がわからない・・

こう思う方はおおいのではないでしょうか。

本記事をお読みいただくと以下が分かります。

  • HTMLでのルビの振り方がわかる

やりたいことはシンプルなのに、やり方が分からず途方に暮れる経験は誰しもあると思います。是非本記事をお読みいただき、HTMLでのルビの振り方について理解を深めてください。

ルビとは

ルビとは、漢字等に付けるふりがなのことです。例えば少し読み方が難しい漢字を使用する場合、ルビをつけておくとユーザにとって親切なサイトにすることができます。

HTMLでのルビの振り方

それでは、早速HTMLでのルビの振り方を紹介していきます。

基本のルビの振り方

まずはコードをご覧ください。

HTML
<ruby>
中央公園
<rt>ちゅうおうこうえん</rt>
</ruby>

上記のようにコーディングすると、以下のように「中央公園」に対してルビが振られます。

コーディングした結果

非常に簡単にルビを振ることができましたね。ルビを振りたい範囲を<ruby>で囲んで、<rt>で読み方を囲うことでルビを振ることができます

1文字ごとにルビを振るやり方(1)

先ほど紹介したやり方だと「中央公園」全体に均等に「ちゅうおうこうえん」というルビがつきます。ここでは、1文字ごとにルビを振るやり方を紹介します。

HTML
<ruby>
中<rt>ちゅう</rt>央<rt>おう</rt>公<rt>こう</rt>園<rt>えん</rt>
</ruby>

こちらも非常に分かりやすいですね。1文字ずつ<rt>で区切って漢字とルビを対応させると1文字ずつルビを振ることができます

1文字ごとにルビを振るやり方(2)

(1)と表示のされ方は変わりませんが、もう1つやり方を紹介しておきます。

HTML
<ruby>
<rb>中</rb><rt>ちゅう</rt>
<rb>央</rb><rt>おう</rt>
<rb>公</rb><rt>こう</rt>
<rb>園</rb><rt>えん</rt>
</ruby>

(1)のやり方だと横に漢字とルビを繋げて書いていましたが、少しコードが見づらいですよね。(2)のやり方だと1文字ずつの対応がわかりやすいので後からコードを見返しやすくなるメリットがあります。(1)は<rt>で繋げましたが、(2)では<rt>に加えて<rb>も使用します。

まとめ

いかがでしたでしょうか。HTMLでのルビの振り方を紹介しました。どれも簡単にコーディングできるので、是非本記事をきっかけにユーザにとってわかりやすいサイト作成に挑戦してみてください。

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5